The process in this article needs to be done once per platform. Once you have the code, you can apply it every time to create a ToC. Note that if the platform changes something, you may need to adjust the script.

Table of Contents

• Browser Dev Tools

• JavaScript Console

• Understanding the DOM Structure

• Creating TOC in Markdown

• How to create an HTML TOC?

• Copy the HTML code for the editor

• What to do if I don’t have headers?

  • Create Table of Contents for DEV.to

• Conclusion

Browser Dev Tools

Dev Tools is an extension to the browser that can allow you to inspect and manipulate the DOM (Document Object Model), which is a representation of the HTML the browser keeps in memory in the form of a tree. It also gives access to the JavaScript console, where you can write short code snippets to test something. It has a lot more features, but we'll only use those two.

To open Dev Tools (in Google Chrome), you can press F12 or right-click on the page with your mouse and click Inspect.

Above is the screenshot of DevTools with a preview of this article. On the right, you can see a selected h1 HTML tag (the title) and CSS applied to that tag. The tree structure you see is the DOM.

JavaScript Console

We will need to have access to the JavaScript console. To open the console in Google Chrome, you can use F12, right-click on the page and select Inspect from the context menu, or use the shortcut CTRL+SHIFT+C (Windows, Linux) or CMD+OPTION+C (Mac).

In Chrome DevTools, you can pick the Console tab at the top of the DevTools. But this will hide the DOM tree. It’s better to open the bottom drawer. You need to click the 3 dots in the top right corner and pick “show console drawer”.

The Dev Tools will look like this:

The console is a so-called Read-Eval-Print-Loop. A classic interface, where you type some commands, here JavaScript code, and when you press enter, the code is executed in the context of the page the DevTools is on.

Above, you can see a page alert executed from the console.

Understanding the DOM Structure

The first step to create a ToC is to inspect the DOM and find the headers. They are usually H1…H6 tags. H1 is often the title of the page. In an ideal world, it would always be.

In my case, the header looks like this:

<h2 id="heading-dev-tools">Dev Tools</h2>

The article only has H2 tags, but later in the article, I will also explain how to create a nested ToC.

Now with DevTools, we can write code that will find every header:

document.querySelectorAll('h2[id], h3[id], main h4[id]');

In the case of my article on freeCodeCamp, it returned this output:

NodeList(5) [h2#heading-dev-tools, h2#heading-javascript-console, h2#heading-understanding-the-dom-structure, h2#trending-guides.col-header, h2#mobile-app.col-header]

First, it’s a NodeList that we need to convert to an Array. Second is that besides our headers that we have so far, we also have two headers that are part of the website and not the main content. So we need to find out the single element that is the parent of the headers we need.

You can right-click on the white page that contains the article and pick Inspect Element. In our case, it found an element <main>. So we can rewrite our selector as:

document.querySelectorAll('main h2[id], main h3[id], main h4[id]');

And now it returns our headers and nothing more.

How to Create the ToC in Markdown

A lot of blogging platforms support Markdown, so it'll be the first thing we'll create.

First, we'll convert the Node list to an array. We can use the spread operator:

[...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')];

Then we can map over the array and create the Markdown links that point to the given header.

const headers = [...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')];

headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    const hash = node.getAttribute('id');
    const indent = ' '.repeat(level * 2);
    return `\({indent}* [\){node.innerText}](#${hash})`;
});

The output looks like this:

(4) ['* [Dev Tools](#heading-dev-tools)', '* [JavaScript Console](#heading-javascript-console)', '* [Understanding the DOM Structure](#heading-understanding-the-dom-structure)', '* [What to do if I don’t have headers?](#heading-what-to-do-if-i-dont-have-headers)']

To get the text, we can join the array with a newline character and use console.log to display the output. If we don’t use console.log, it will show a string with \n characters.

const headers = [...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')];

console.log(headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    const hash = node.getAttribute('id');
    const indent = ' '.repeat(level * 2);
    return `\({indent}* [\){node.innerText}](#${hash})`;
}).join('\n'));

The output for this article will look like this:

* [Dev Tools](#heading-dev-tools)
* [JavaScript Console](#heading-javascript-console)
* [Understanding the DOM Structure](#heading-understanding-the-dom-structure)
* [Creating TOC in Markdown](#heading-creating-toc-in-markdown)
  * [This is fake header](#heading-this-is-fake-header)

I created one fake subheader. Platforms, even when not supporting Markdown when writing articles, often support Markdown when copy-pasted. The ToC at the top of the article was created by copying and pasting markdown generated with the last JavaScript snippet.

How to Create an HTML ToC

If your platform doesn’t support Markdown (like Medium), you can create HTML, preview that HTML, and copy the output to the clipboard. Pasting that into the editor of the platform you're using should keep the formatting.

To convert Markdown to HTML, you can use any online tool, but you'll see how to create it yourself in the snippet. It will be faster after you create the code.

const headers = [...document.querySelectorAll('main h2[id], main h3[id], main h4[id]')]

function indent(state) {
    return ' '.repeat((state.level - 1) * 2);
}

function closeUlTags(state, targetLevel) {
    while (state.level > targetLevel) {
        state.level--;
        state.lines.push(`${indent(state)}</ul>`);
    }
}

function openUlTags(state, targetLevel) {
    while (state.level < targetLevel) {
        state.lines.push(`${indent(state)}<ul>`);
        state.level++;
    }
}

const result = headers.reduce((state, node) => {
    const level = parseInt(node.nodeName.replace('H', ''));

    closeUlTags(state, level);
    openUlTags(state, level);
    
    const hash = node.getAttribute('id');
    state.lines.push(`\({indent(state)}<li><a href="#\){hash}">${node.innerText}</a></li>`);
    return state;
}, { lines: [], level: 1 });

closeUlTags(result, 1);

console.log(result.lines.join('\n'));

This is the output of the code in this article:

<ul>
  <li><a href="#heading-table-of-contents">Table of Contents</a></li>
  <li><a href="#heading-dev-tools">Dev Tools</a></li>
  <li><a href="#heading-javascript-console">JavaScript Console</a></li>
  <li><a href="#heading-understanding-the-dom-structure">Understanding the DOM Structure</a></li>
  <li><a href="#heading-creating-toc-in-markdown">Creating TOC in Markdown</a></li>
  <li><a href="#heading-how-to-create-html-toc">How to create HTML TOC</a></li>
  <ul>
    <li><a href="#heading-level-3">Level 3</a></li>
    <ul>
      <li><a href="#heading-level-4">Level 4</a></li>
    </ul>
  </ul>
  <li><a href="#heading-what-to-do-if-i-dont-have-headers">What to do if I don’t have headers?</a></li>
</ul>

I added a few headers at the end, so you can see that it will work for any level of nested headers. Note that we also have the ToC as the first element on the list.

Copy the HTML code for the editor

Most so-called WYSIWYG editors are using HTML, and you should be able to copy the output of HTML code with formatting and paste it into that editor. The easiest is to just save that into a file, open that file, and select the text:

What to Do If I Don’t Have Headers?

You need to find anything that can be targeted with CSS. If they are p tags with a specific class (like header), you can use p.header instead of h2.

How to Create a Table of Contents for DEV.to

If you have a different DOM structure, you can use different DOM methods to extract the element you need. For example, on DEV.to, the headers look like this:

<h2>
  <a name="overview" href="#overview">
  </a>
  Overview
</h2>

So the selector needs to be just main h2. But when you execute this code:

[...document.querySelectorAll('main h2, main h3, main h4')];

You will see that there are way more headers than the content of the document. Luckily, we can use a new selector in CSS :has(). The final selector for one header can look like this: main h2:has(a[name]).

Here is the full code:

const selector = 'main h2:has(a[name]), main h3:has(a[name]), main h4:has(a[name])';
const headers = [...document.querySelectorAll(selector)];

console.log(headers.map(function(node) {
    // H2 header should have 0 indent
    const level = parseInt(node.nodeName.replace('H', '')) - 2;
    // this is how you get the hash
    // you can also access href attribute and remove # from the output string
    const hash = node.querySelector('a').getAttribute('name');
    const indent = ' '.repeat(level);
    return `\({indent}* [\){node.innerText}](#${hash})`;
}).join('\n'));

Conclusion

Creating a table of contents can help your readers digest your article. Since most people don’t read the whole article, they only scan for what they need. You can also find a lot of articles about its impact on SEO. So it’s always worth adding one if the article is longer.

And as you can see, creating a ToC is not that hard with a bit of web development knowledge.

If you like this article, you may want to follow me on Social Media: (Twitter/X, GitHub, and/or LinkedIn). You can also check my personal website and my new blog.

Usually, you’d open DevTools or an SEO auditing tool to find answers to these questions. But what if you could analyze any web page instantly, without leaving your browser?

In this tutorial, you’ll learn how to build a Chrome extension that scans and analyzes any webpage for titles, meta descriptions, headings, and links.

By the end of this article, you’ll:

• Understand how Manifest V3 works in Chrome Extensions

• Learn how to inject content scripts into web pages

• Build a popup UI that fetches and displays structured data

• Explore how this same foundation can be extended with AI-powered insights

💡 This guide focuses on learning and education – no frameworks or build tools required. Just HTML, CSS, and vanilla JavaScript.

Table of Contents

• Prerequisites

• Step 1: Understanding How Chrome Extensions Work

• Step 2: Set Up the Project Structure

• Step 3: Define the Manifest File

• Step 4: Create the Popup UI

• Step 5: Write the Content Script (content.js)

• Step 6: Connect the Popup and Content Script

• Step 7: Load and Test Your Extension

• Step 8: Add Optional Enhancements

• Step 9: Publish to the Chrome Web Store

• Final Thoughts

🧰 Prerequisites

Before starting this tutorial, make sure you have:

• A basic understanding of HTML, CSS, and JavaScript

• A recent version of Google Chrome installed on your system

• Familiarity with using Chrome DevTools (optional but helpful)

• A code editor like VS Code or Sublime Text

• A local folder where you can create and organize your extension files

💡 Again, no frameworks or build tools are required. We’ll use only vanilla JavaScript and simple web technologies throughout this guide.

🧩 Step 1: Understanding How Chrome Extensions Work

A Chrome extension is just a bundle of web technologies – HTML, CSS, and JS – that extends browser functionality.

Extensions can have multiple parts:

• Manifest file (manifest.json): defines permissions, icons, and structure.

• Content scripts: run inside web pages and access the DOM.

• Background scripts: handle long-running or event-driven logic.

• Popup UI: what users see when they click your extension icon.

Here’s a high-level flow of what we’ll build:

[Popup UI] <—> [Content Script] <—> [Web Page DOM]

When the user clicks “Analyze,” the popup will send a message to the content script. The script will then read the DOM and send back results like page title, description, headings, and links.

🧠 Step 2: Set Up the Project Structure

Create a new folder called page-analyzer-extension. Inside it, create these files:

page-analyzer-extension/
│
├── manifest.json
├── popup.html
├── popup.js
├── content.js
├── styles.css
└── icons/
    ├── icon16.png
    ├── icon48.png
    └── icon128.png

Icons are optional, but they make the extension look professional. You can use placeholders or generate them from favicon.io.

⚙️ Step 3: Define the Manifest File

Create manifest.json and paste this in:

{
  "manifest_version": 3,
  "name": "Page Analyzer",
  "version": "1.0",
  "description": "Analyze any web page for its title, description, headings, and links.",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Let’s break this down:

• manifest_version: 3: the latest version with security and performance improvements

• permissions: allow the extension to access the active tab and run scripts

• content_scripts: define which JS files should automatically run in web pages

🧩 Step 4: Create the Popup UI

The popup appears when users click the extension icon.

popup.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Analyzer</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h2>Page Analyzer</h2>
    <p>Click below to analyze the current page:</p>
    <button id="analyze">Analyze Page</button>
    <div id="results"></div>

    <script src="popup.js"></script>
  </body>
</html>

styles.css:

body {
  font-family: system-ui, sans-serif;
  padding: 12px;
  width: 280px;
}
button {
  background: #2563eb;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
}
#results {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.4;
  word-wrap: break-word;
}

🧠 Step 5: Write the Content Script (content.js)

This script will analyze the web page.

function analyzePage() {
  const title = document.title || "No title found";
  const description =
    document.querySelector('meta[name="description"]')?.content || "No description found";
  const headings = Array.from(document.querySelectorAll("h1, h2, h3")).map((h) =>
    h.innerText.trim()
  );
  const links = document.querySelectorAll("a").length;

  return {
    title,
    description,
    headings,
    linkCount: links,
    domain: location.hostname,
  };
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === "analyze") {
    sendResponse(analyzePage());
  }
});

What’s happening here:

• We extract the title, description, headings, and total link count

• We return this data as a structured object

• The script listens for messages from the popup and responds with the analysis

⚡ Step 6: Connect the Popup and Content Script

In popup.js, add the logic that triggers page analysis.

document.getElementById("analyze").addEventListener("click", async () => {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });

  chrome.tabs.sendMessage(tab.id, { action: "analyze" }, (response) => {
    const resultContainer = document.getElementById("results");

    if (!response) {
      resultContainer.innerText = "Unable to analyze this page.";
      return;
    }

    const { title, description, headings, linkCount, domain } = response;
    resultContainer.innerHTML = `
      <strong>Domain:</strong> ${domain}<br/>
      <strong>Title:</strong> ${title}<br/>
      <strong>Description:</strong> ${description}<br/>
      <strong>Headings:</strong> ${
        headings.length ? headings.join(", ") : "No headings found"
      }<br/>
      <strong>Links:</strong> ${linkCount}
    `;
  });
});

This uses the Chrome Tabs API to find the current tab and send a message to the content script. When the script responds, we update the popup with the results.

🧪 Step 7: Load and Test Your Extension

1. Open chrome://extensions/

2. Enable Developer Mode

3. Click Load Unpacked

4. Select your project folder

Now, pin your extension to the toolbar, open any website, and click “Analyze Page.”

You’ll instantly see:

• The page’s title

• Meta description

• Extracted headings (H1–H3)

• Link count

• Domain name

🎉 Congratulations! You’ve built a working web page analyzer.

🧩 Step 8: Add Optional Enhancements

Now that the basics work, here are some ways to level up your project.

🧠 1. Add AI Insights

You can connect to an AI API (like OpenAI or Gemini) to summarize the page or evaluate SEO structure.

// Example: pseudo-code for calling an AI API
const aiResponse = await fetch("https://api.openai.com/v1/chat/completions", {
  method: "POST",
  headers: { Authorization: `Bearer ${API_KEY}` },
  body: JSON.stringify({
    model: "gpt-4o-mini",
    messages: [
      { role: "system", content: "You are an SEO assistant." },
      { role: "user", content: `Analyze the following page info: ${JSON.stringify(pageData)}` }
    ]
  })
});

For example, after building this basic analyzer, I expanded it into a full-featured RankingsFactor AI SEO Extension which combines this same foundation with:

• AI-generated keyword suggestions

• Metadata improvement recommendations

• Automatic screenshot capture

• Page freshness detection

This demonstrates how a simple developer project can evolve into a powerful, production-ready tool.

🔍 2. Detect Missing SEO Tags

You can check for missing tags like this:

const missingTags = [];
if (!document.querySelector('meta[name="description"]')) missingTags.push("description");
if (!document.querySelector('meta[property="og:title"]')) missingTags.push("og:title");

🖼️ 3. Add Screenshot or Report Export

Use the chrome.tabs.captureVisibleTab() API to take a screenshot, or generate a downloadable HTML/JSON report.

🧭 Step 9: Publish to the Chrome Web Store

Once you’ve tested your extension, visit chrome.google.com/webstore/devconsole. You’ll need to pay a one-time $5 developer registration fee, then you can upload your extension as a ZIP file. Make sure you write a clear, helpful description before submitting your extension for review.

✅ Final Thoughts

In this tutorial, you learned:

• How Chrome extensions communicate between scripts and web pages

• How to safely extract DOM data

• How to display structured information in a popup UI

• How to extend browser tools with AI for smarter analysis

Browser extensions are an incredible way to bring web automation, analysis, and creativity directly into your workflow. Whether you’re analyzing pages, improving accessibility, or experimenting with AI, you now have the foundation to build anything you imagine.

This is where the React Developer Tools, AKA React DevTools comes into play. It allows you to inspect and debug your React applications by providing access to the components, states, hooks, props, what renders what, and more.

This article will show you how to use React DevTools by focusing on components, props, and state inspection. We'll also examine how to use it to enhance application performance.

For demonstration, we'll use the 2048 game code. You can grab it in this GitHub repository.

How to Install React Developer Tools

Installing the React developer tools extension for your browser is the most common way to use it.

If you use Chrome, visit the Chrome Webstore and search for "React", then select "React Developer Tools" and click the "Add to Chrome" button to install it.

React Devtools in Chrome Web Store

React DevTools is also available as a standalone electron app, an NPM package, and an add-on for both Edge and Firefox browsers. If you use the Safari browser, consider using the NPM package.

If you use the extension on Chrome but want to migrate your data to either Edge and Firefox, it will be automatically installed for you!

How to Navigate the React Developer Tools Interface

After installing the DevTools as an extension, open your browser console and you should see two additional tabs – Components and Profiler.

Google Chrome with React DevTools extension

The Components tab displays a tree view of the components in your application. It also gives you access to the hooks and props in each component.

Components tab in React DevTools

The Profiler tab allows you to analyze the runtime performance of your applications and identify costly re-renders or performance bottlenecks. From there, you can import and export recorded performance sections and see how long a component renders or why it re-renders.

Profiler tab in React DevTools

If you click the gear icon on the right side in any of the tabs, you should see a pop-up with 4 tabs – General, Debugging, Components, and Profiler.

React DevTools settings

In the 4 tabs, you can adjust settings related to theme, display, debugging options, component filters, and recording settings for the profiler.

How to Inspect React Components with DevTools

In the Components tab, you can select a component and inspect it, just like you'd do with HTML elements in a traditional browser's dev tools.

To do that, click the select icon on the top-left corner, then select any part of the app to see the component that represents it:

Inspecting components in React DevTools

As you make changes that involve adding something, new components will be added to the tree.

Live component updates in React DevTools

On the right-hand side in the Components tab are the props, hooks, renderer, and the source for any component you select in the tree.

Component details in React DevTools

How to Explore Component State and Props

Remember that when you select a component in the tree, the state and props in that component are available on the right-hand side.

In the screenshot below, I have selected a Tile component for you to see the props:

Tile component selected

You can see that the Tile component has id, position, and value properties. From here, you can add a new prop and edit the existing props.

For example, I just changed a value prop from 2 to 4 and it reflected in the UI in real-time:

change value from 2 to 4

You can also make changes to a piece of state. For instance, the scorecard you can see in the UI is a piece of state in the GameProvider context. It updates your score as you play the game.

You can select the GameProvider context, look for the score state, and change it to something else:

Change score state

How to Debug React Applications with React DevTools

The traditional browser developer tools is good for debugging your HTML, CSS, and JavaScript code, but it has limitations concerning debugging React applications.

This is the primary reason React DevTools was created in the first place, as it has the essential built-in features that can show you everything you need to debug your React apps.

One of the errors the browser can help you debug is a reference error. For instance, if there's an error in any of your components, the browser can show you the error message and the line affected.

For example, I've forced an error by changing cells to cell on line 62 in the board.tsx file of the app. This is what the error message looks like in the browser:

Reference Error in React 19

You can then go to the line of code where the error occurred and make the necessary adjustments so the app can run again.

React DevTools also shows you a reference error and the component in which it occurs.

Reference Error in React DevTools

How React DevTools Takes Debugging to the Next Level

In the Components tab, above the items on the right-hand side, are iconized buttons you can use to:

• Force the selected component to an errored state
• Inspect the matching DOM element
• Suspend the selected component
• Log the component data to the console
• View the source code for the elements in the selected component

Component utilities in React DevtTools

For example, if the tiles in the game are not showing as they should, it's probably a styling issue.

Unstyled tiles in 2048 Game

This particular error will not stop your app from running, so the best way to debug it is to use React DevTools instead of looking through your code, especially if it's large.

You can select the Tile component and log its data to the console. When you do this, the props, hooks, and nodes of that component will be logged for you.

Utility allowing to log component data to the console in React DevTools

To see the component's data, you have to switch to the console tab and inspect the nodes to see what might have gone wrong.

Component data printed in the console React DevTools

In the image above,it shows that there is a div element with an undefined className. This tells you that you've misspelt a className value, so you need to go back to your code and correct it.

If the error you're getting has to do with props or hooks, then you need to open up any of them to see what went wrong.

You can also look through the source code of any component causing an issue. For instance, if the scoreboard is not showing as it has to, select the component and click the "View source code for this element" icon.

View source of this component utility in React DevTools

After the source code is displayed, you can step through the end of each line. Any line end that is red when you do that is the one causing the error.

You can then go back to your editor and make the necessary changes on that line.

Performance Analysis with React DevTools

Doing performance analysis with React can help you understand the efficiency of your application and identify any performance bottlenecks. This is what the Profiler tab lets you do.

To do this, switch to the Profiler tab and click the "Start profiling" icon to start recording.

Record button in the Profile tab of React DevTools

Perform the actions in your app you want to analyze. This could be page loads, user interactions like button clicks, swiping, or dynamic content loading. When you're done, click "Stop" to end the recording.

The Profiler will then display a flame graph and a list of commits. Each commit represents a render phase of your React application. Components that take longer to render will have wider bars.

You can then select a specific commit to view detailed information about the render performance of components during that commit:

Profiling results in React DevTools

You can also download the profiling session, or import a profiling session. This means you can share the session with your teammates.

Common Issue and Solution: How to Fix React DevTools Not Showing

If DevTools fails to show up, it could be because it doesn't have access to the React sites you're viewing in the browser.

To fix this, type chrome://extensions/ into the address bar and hit enter, then search for the extension and make sure it's toggled on.

How to enable React DevTools extension in Google Chrome

If that doesn't fix the issue, click the "Details" button and make sure you grant an "On all sites" access under the "Site access" option

How to change extension's site access settings in Google Chrome

Conclusion

From inspecting the component hierarchy and modifying state and props to profiling performance and understanding complex re-renders, React Developer Tools offers a comprehensive set of features that can improve the quality of your React applications.

Whether you're a beginner aiming to have a better understanding of the inner workings of React, or an experienced developer looking to optimize your applications, investing the time to master React Developer Tools will be profitable in your development processes.

Learn React and Next JS

Are you ready to dive deep into React and start creating real-world applications? Enroll in my React and Next JS course on Udemy! You'll learn through hands-on coding as we build an incredible 2048 game from scratch with cool animations.

Join now and start your journey to becoming an employable React developer!

Click to get started

It doesn't matter if you're just starting out or have been coding for years. Knowing how to effectively use Developer Tools (DevTools for short) can significantly boost your development process. You can edit pages on the fly, quickly spot issues, and deeply understand your site's performance.

All major browsers have their own DevTools that let you examine the code of a webpage, evaluate its metrics, and run some tests alongside. This article will discuss Chrome's DevTools, as it's the industry standard.

Table of contents:

• What is Chrome DevTools?
• How to Open Chrome DevTools
• Keyboard shortcuts for Easy Navigation
• Key Chrome DevTools Features
• Practical DevTools Use Cases
• Conclusion

What is Chrome DevTools?

Chrome DevTools is a set of tools that are essential for diagnosing and solving web development challenges, directly within the Google Chrome browser.

It gives you direct access to a website's inner workings - to inspect HTML and CSS, debug JavaScript, analyze performance, and see the immediate impact of your code, all in realtime.

This direct access to a website's inner workings is crucial for diagnosing issues quickly and efficiently, ensuring your web applications are both performant and bug-free.

A grid of elements, console, performance and network panels screenshots

How to Open Chrome DevTools

To open DevTools in your Chrome browser, you can either:

1. Right-click on any webpage and select inspect from the list of options.
2. Use the shortcut (command + option + I on Mac or control + shift + I on Windows).
3. Click the three dot icon next to your profile picture on your Chrome browser, choose 'More Tools' and 'Developer Tools' from the second option box.

It usually opens in a split screen interface, either below your current webpage or beside it. Once open, its features line up as tabs at the top of the DevTools window. These tabs include: Elements, Console, Source, Network, Application, Security, Memory, Performance, Audits.

Keyboard Shortcuts for Easy Navigation

1. Use Cmd or Ctrl + Shift + C to open the Elements panel
2. Use Cmd or Ctrl + Shift + J to open the Console panel
3. Use Cmd or Ctrl + ] to move forward to the next panel
4. Use Cmd or Ctrl + [ to move back to the previous panel

Key Chrome DevTools Features

DevTools is packed with features essential for web developers to streamline various aspects of their workflow. Let's look at a few of them in some detail now.

Elements Panel

This panel is used for inspecting and modifying the HTML and CSS of a webpage in real-time, which is great for debugging layout issues or experimenting with new styles before applying them in your actual code. You also get to see how the DOM (Document Object Model) is structured.

Imagine fine-tuning your website's footer appearance (background color, font size) directly in your browser and seeing the results instantly.

With DevTools open, click on the Elements tab to access it.

A screenshot of Chrome DevTools' Elements panel

Console Panel

This panel serves as your interactive playground for JavaScript within the browser. Whether you're tracking down an elusive bug with a quick console.log() or experimenting with DOM elements, in the Console panel you can test snippets of JavaScript and view any logs or errors in the currently loaded webpage.

To use it, simply open DevTools and select the "Console" tab or use the shortcut (option + command + J on Mac or contrl + shift + J on Windows).

A screenshot of Chrome DevTools' Console panel

Network Panel

This panel gives you an overview of all network activity on your webpage – from tracking every resource that is loaded to how your site communicates with servers.

If you've wondered why your website takes forever to load or why some API requests seem to vanish into thin air, the Network panel is your go-to as it provides insights into the success or failure of API calls.

To access it, open DevTools and navigate to the "Network" tab.

A screenshot of Chrome DevTools' Network panel

Performance Panel

This panel is used for capturing and analyzing a website's performance metrics. It shows all the activities happening when interacting with a page.

When your web app starts to crawl under heavy usage, the Performance panel can pinpoint where the performance bottlenecks lie so that you can resolve these issues, ensuring your app runs smoothly.

With DevTools open, click on the "Performance" tab to use it.

A screenshot of Chrome DevTools' Performance panel

The above are only a handful of the panels available, but they're by far the most popular and must-knows. Using them properly will make your development processes more intuitive and rewarding.

Practical DevTools Use Cases

In the following interactive examples, I intentionally created the mini project in Codepen with issues to simulate real-world debugging scenarios using Chrome DevTools.

I figured it'd be a great way to highlight the practical uses of certain DevTools panels and features in identifying bugs and troubleshooting right in the browser.

Prerequisites

• Chrome browser (Click this link to download)
• A basic understanding of HTML, CSS, and JavaScript
• Codepen

See the Pen Modal Window by Ophy Boamah (@ophyboamah) on CodePen.

How to Debug HTML and CSS with the Elements Panel

Our mini project contains a modal that, upon clicking, should display a modal window with some important information. But there's a bug preventing this from happening.

This situation sets the stage for a practical demonstration of how you can use the Elements Panel to troubleshoot and resolve styling and structural issues.

<body>
  <button class="show-modal">Click me to learn a secret 🤫</button>

  <div class="modal hidden">
    <button class="close-modal">&times;</button>
    <h1>Hey Ophy here 👋🏾</h1>
    <p>
      I lead Women Who Code Frontend, a global remote community of 3,000+ women frontend devs and enthusiasts. Find us on beacons.ai/wwcodefrontend
    </p>
  </div>
  <div class="overlay hidden"></div>

  <script src="script.js"></script>
</body>

.hidden {
  display: none;
}

.modal {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  width: 70%;

  background-color: white;
  padding: 6rem;
  border-radius: 5px;
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
  z-index: 10;
}

In our modal's HTML code above, we've added the class name 'modal hidden' which has a corresponding styling with the CSS property of display:none that is set to hide the modal when the page is loaded initially and only display it when the button is clicked.

✅ Step 1 - Initial inspection:

Attempt to trigger the modal by clicking on the 'Click me to learn a secret' button. Since we've set that up not to work, right-click on the area where the modal should appear and choose "Inspect" to open DevTools' Elements Panel.

✅ Step 2 - Diagnose visibility issues:

In the Elements Panel, locate the modal in the DOM to see that the modal is present but not visible. This confirms that the bug is caused within our CSS code display: hidden.

As soon as you click on the modal in the DOM, any corresponding CSS classes will be pulled up within Styles at the bottom section of the Elements panel. You can toggle some properties on and off or type others to see the effects in real-time.

Manually change the class name from modal hidden to modal block to trigger the right properties that'll cause the modal to show.

A screenshot of debugging the modal's HTML, CSS in Elements panel

✅ Step 3 - Center the modal:

Now the modal is visible, but it's displayed at the top – which is different from where we'd like it to be (that is, in the center of the page).

To change this, modify the transform property to translate(-50%, -50%) by adding the second -50% and ensure that top: 50%, and left: 50% are correctly set to center the modal on the screen.

✅ Step 4 - Enhance the appearance:

You can go further to refine the modal's appearance by tweaking its background-color, padding, or other stylistic properties directly within the Styles to achieve the desired look and feel.

A GIF fixing the modal in Chrome DevTools' Elements panel

Debug JavaScript with the Sources Panel

I added a bug in the JavaScript code of our modal mini project to prevent it from opening when the button is clicked.

In the real world, this would cause neither the open nor close commands to trigger any action, which would leave users unable to interact with the content and frustrated as a result. Let's troubleshoot and debug this issue in the Sources Panel.

In the code below, the openModal function is set to remove the indicated classes. However, this doesn't work because we deliberately misspelled hidden.

// Introducing a bug: Incorrectly spelling 'hidden' as 'hiddn'
const openModal = function () {
  modal.classList.remove("hiddn"); // Intentional bug
  overlay.classList.remove("hidden");

  // Fetch data from a real API and display in the modal
};

✅ Step 1 - Set up breakpoints:

Open Chrome DevTools and navigate to the Sources Panel. Here, find the JavaScript file that includes the modal functionality (in our example its pen.js).

The openModal function contains the logic for displaying the modal on the screen. This function will include a line where the modal element's class is manipulated to remove a "hidden" class.

Click on the number next to this code line in DevTools. A blue (or sometimes red, depending on the theme) icon appears next to the line number, indicating that a breakpoint has been set. This breakpoint will pause the execution of our JavaScript code as soon as it reaches this line.

A screenshot of setting breakpoints the modal's JS in Sources panel

Breakpoints pause code execution at critical points, allowing you to inspect the current state of variables and understand the flow of execution. This step is crucial for identifying where the code deviates from expected behaviour.

✅ Step 2 - Examine the code execution flow:

With our breakpoint in place, try to open the modal by clicking on its button. Execution of our JavaScript code now pauses at our breakpoint, which enables us to step through the code line by line.

This is an opportunity to observe variables, function calls, look for anomalies such as misnamed functions, incorrect logic, or uncaught exceptions that could explain why the modal isn't working.

In our case it's because we intentionally misspelled the class name hidden as hiddn. Fix that in the code to get the modal working again.

A GIF troubleshooting the modal bug in Chrome DevTools' Elements panel

Optimize Performance with the Network Panel

Here I've added a fetch function that makes an API call to a live endpoint (https://jsonplaceholder.typicode.com/posts/1). This is an excellent opportunity to explore the Network Panel's capabilities in diagnosing and understanding network-related problems.

From the code below, you can see that the openModal function doesn't only open the modal but also makes an API call to the jsonplaceholder endpoint to fetch some data.

const openModal = function () {
  fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(json => document.getElementById('modal-content').innerText = json.title)
    .catch(error => console.error('Error loading the content:', error));
};

✅ Step 1 - Initiate the API call:

On the modal project UI, click on the 'Click me to learn a secret' button. Though the modal does not visibly activate, because of the fetch logic within the openModal function, an API call will be made.

✅ Step 2 - Network Panel Inspection:

Ideally, your Network Panel should be open before clicking the button, but you can also reverse the steps. Detailed insights on your API request such as the request's method, status code, response and the time it took to complete, will be available under headers, preview, response, initiator and timing tabs respectively.

A screenshot overview of API request in Network panel

✅ Step 3 - Simulating Network Conditions:

Use the Network Panel's throttling feature to mimic various network speeds like offline or slow 3G to see how the API request behaves under constrained conditions.

From this you can compare how different network speeds can affect application performance. This will teach you the importance of optimizing data loading strategies to enhance user experience, especially on slower connections.

A GIF observing API requests and responses in Chrome DevTools' Network panel

Conclusion

Bringing Chrome DevTools into your web development routine is not just about fixing bugs. It's about streamlining your workflow, making your sites more accessible, and boosting their performance.

Through our modal window mini-project, we've seen firsthand how DevTools can address a wide array of development challenges, but that’s merely scratching the surface of what it can do.

As you continue to explore its capabilities and familiarize yourself with its features, you'll find it's an invaluable companion on your web development journey – designed to make your development process not just faster, but also more rewarding.

• The Official Chrome DevTools documentation
• How to use the Chrome DevTools to troubleshoot websites