DevTools Tips

Override network responses with local files

2025-02-27T00:00:00.000Z

To test a quick fix locally, in DevTools, without editing the source file and deploying it to a server, override network responses with local files.

Firefox #

Open the Network tool.
Find the request which you want to override.
Right-click the request and select Set Network Override.
Choose a location on your computer to save the response.

The current response to the request is saved to that location.
Open the local file in a text editor, make the necessary changes, and save the file.
Reload the page.

DevTools now uses the local file, with your modifications, as the response instead of the original server response.

To remove the override, right-click the request again and select Remove Network Override.

Chrome and Edge #

Open the Network tool.
Find the request which you want to override.
Right-click the request and select Override content.
In the banner that appears at the top of DevTools, click Select folder
Choose a location on your computer to save the response, and click Allow to let DevTools access the folder.

A new folder, matching the website's domain name, is created at that location, and the current response to the request is saved in that folder.
Open the local file in a text editor, make the necessary changes, and save the file.
Reload the page.

DevTools now uses the local file, with your modifications, as the response instead of the original server response.

To remove the override:

Open the Sources tool.
In the left pane, click Overrides.
To temporarily disable the override, clear the Enable Local Overrides checkbox.
To permanently remove the override, click Clear configuration.

Create contextual console loggers

2025-02-14T00:00:00.000Z

Applications are often made up of multiple subsystems or components, each with its own set of log messages. When you're debugging such an application, it might be hard to find the logs you're looking for in the Console tool, as the logs from all of the different parts of the app are mixed together.

console.context() can help you with this. This console API is an experiment in Chromium-based browsers only, but is a good step in the right direction.

Create a specific logger instance for a part of your app:

const myComponentLogger = console.context("name-of-my-component");
Then log messages as normal, using your new logger:

myComponentLogger.log("This is a log message from my component");

myComponentLogger.warn("This is a warning message from my component");

For an even nicer experience, give your logger a color:

myComponentLogger.log("%cThis is a log message from my component", "background-color:lemonchiffon;");

Here is what the Console tool might look like, with the logs from all of the components of the app:
When reviewing logs in the Console tool, filter the messages by using the name of the context:
- Click Filter to focus the search field.
- Enter context:name-of-my-component to see only the logs from your component.
Here is what the Console tool would show, once the logs have been filtered by context, to show only the logs from one component:

Find in files

2024-12-16T00:00:00.000Z

To find occurrences of a string in all of the files of the webpage you are inspecting, for example to find where a specific CSS class is defined, or where a specific JavaScript API is used:

In Firefox:
- Open the Debugger tool.
- Press Ctrl+Shift+F (or Cmd+Option+F on macOS).
  
  The Search sidebar panel appears.
- Enter the string you want to search for and then press Enter.
  
  The results are displayed in the Search sidebar panel.
  
  Results from CSS stylesheets don't appear in the results however. To find occurrences in CSS stylesheets, open the Style Editor tool and press Ctrl+F (or Cmd+F on macOS).
- Click one of the results to display the file, at the right location, in the Debugger tool.
In Chrome or Edge:
- Press Ctrl+Shift+F (or Cmd+Option+F on macOS).
  
  The Search tool appears in the bottom drawer area.
- Enter the string you want to search for and then press Enter.
  
  The results are displayed in the Search tool.
- Click one of the results to display the file, at the right location, in the Sources tool.
In Safari:

Missing content. Click Edit this page, at the bottom of the page, to add the missing content.
In Polypane:

Missing content. Click Edit this page, at the bottom of the page, to add the missing content.

Extend traces recorded in the Performance tool with your own custom data

2024-11-26T00:00:00.000Z

The Performance tool lets you add custom tracks with your own custom events, when recording performance traces. This is useful to surface your own performance data, which might not map directly to the functions defined in the code.

To extend traces, use the Performance API in your JavaScript code. For example, to start measuring a custom event, you can use performance.now() as shown below:

const start = performance.now();

Then, later in your code, you can stop measuring that event, and display it in a custom track in the Performance tool:

performance.measure(`Analyse`, {
  start: start,
  end: performance.now(),
  detail: {
    devtools: {
      dataType: "track-entry",
      // The name of the custom track.
      track: "Feature handling",
      // Custom properties of the event, displayed in the Summary pane, when the event is selected.
      properties: [["id", id], ["size", size]],
      // Tooltip text which appears when hovering over the event in the custom track.
      tooltipText: `Feature ${id}`,
    }
  }
});

When you later record a performance trace in the tool, a new track named Feature handling is displayed in addition to the Main track where the function call stacks and other browser rendering events are displayed. The custom events you added are displayed in this new custom track.

Visualize a webpage's memory usage during a performance recording

2024-10-22T00:00:00.000Z

To check how much memory a webpage consumes over the time of a specific user scenario, and to identify potential memory leaks, you can use the Memory tool in Chrome or Edge DevTools with the Memory option.

Open DevTools and go to the Performance tool.
In the toolbar, enable the Memory option.
Click Record to start the recording.
Interact with the page like a user would, to simulate the user scenario you want to analyze.
Click Stop to end the recording.

Once the resulting profile appears in the tool, a memory graph is displayed below the main flame chart area.

The memory graph shows the memory usage of the page over the time of the recording. For example, you can see how the JS heap memory (i.e, the memory region where all the JavaScript objects live) usage evolves when new objects get created (the blue line goes up) and then get garbage collected (sudden drops on the blue line).

Override source files to test changes in the browser

2024-10-15T00:00:00.000Z

It can be helpful to make quick changes to the source code that a site uses, especially when debugging a site in production. For example, if you suspect that a bug is caused by a specific line of code, and you want to test a fix, it can be faster and easier to make the required change temporarily on the production code directly, rather than setting up a local development environment.

Chrome, Edge, and Firefox allow you to temporarily override any source file that a site uses with files stored locally on your computer.

Note that the files are only overridden while DevTools is open, and no changes are made to the original files on the server.

Override files in the Firefox DevTools Debugger tool #

In Firefox DevTools, open the Debugger tool.
In the Sources panel, find the file that you want to override.
Right-click the file and select Add script override.

A file explorer window opens.
Choose a location for the file override and submit.
Make changes to the local file stored at the location you chose.
Refresh the page in Firefox to see the changes.

Override files in the Chrome or Edge DevTools Sources tool #

In Chrome or Edge DevTools, open the Sources tool.
In the right pane, open the Overrides tab. You might need to click the More tabs chevron icon to see that tab.
Click Select folder for overrides.

A file explorer window opens.
Choose a folder for the file overrides to be stored in, and then submit.

DevTools requests your permission to access the file system, click Allow.
In the right pane, open the Page tab.
Find the file that you want to override and click it.

The file content appears in the editor.
Make changes to the file content, and then save the file.

The changes get saved locally within a subfolder of the folder you chose. The subfolder is named after the domain of the site you're debugging. If you go to another site and override a file from that site, the overrides are stored in another subfolder of the folder your chose.
Refresh the page in Chrome or Edge to see the changes.

Override HTTP response headers

2024-07-18T00:00:00.000Z

With DevTools, you can override the response headers of a network request and test your website under different conditions.

HTTP response headers are metadata sent by the server to the browser, along with a response such as an HTML page, or a JS, CSS, or image resource. These headers control how the browser handles the response, such as caching, content type, and various features or security settings.

Overriding response headers from within DevTools means that you can test all of these aspects without needing to modify the server, which can be useful when you don't have access to the server, or to do quick tests.

For example, the JS self-profiling API allows you to run a JavaScript profiler, programmatically, on your website, and requires the Document-Policy: js-profiling header to be set. If you want to test your JS self-profiling code locally, without adding the header to your server, override the response header in DevTools:

Open Chrome or Edge DevTools, and go to the Network tool.
Reload the page.
Find the request for which you want to override the response headers. In the example above, you would look for the initial HTML request.
Right-click on the request and select Override headers.

The Headers tab appears in the side panel, with a list of existing response headers under the section Response Headers.
To add a new header, click the + Add header button.

A new row appears in the list of headers, where you can enter the name and value of the header you want to add.
Enter a header name, such as Document-Policy, and a value, such as js-profiling.
To edit an existing header, click on the header value and enter a new value.
Reload the page.

The resource for which you overrode the headers should now be loaded with the new headers.

Hide elements from the page, without changing the layout

2024-06-12T00:00:00.000Z

In the DevTools' Elements (or Inspector) tool, you can delete nodes from the DOM tree by selecting them in the tool and then pressing Delete or Backspace. While this is great to completely remove the elements and make others take more space for example, it can also break the CSS layout of the page.

Hiding elements without altering the DOM tree or the layout can be useful in some cases, such as:

When elements overlap each other, and you want to see what's behind them.
When you want to take a screenshot of the page without some information being visible.
When you want to focus on just one part of the page without being distracted by other elements.

In Chrome, Edge, or Firefox #

To hide an element without removing it from the DOM tree, in DevTools:

Go to the Elements tool (called Inspector in Firefox).
Select the element you want to hide.
- Either from the page, by right-clicking on it and selecting Inspect.
- Or from the tool, by finding and clicking on the element in the DOM tree.
Press H on your keyboard.

The element remains in the DOM tree, but becomes invisible in the page.

To show the element again, make sure it's selected in the Elements/Inspector tool, and press H again.

In Polypane #

Select the element you want to hide in the Elements panel.
Click the Eye icon in the toolbar.

The icon changes from an open eye to a closed eye.
Click the icon again to show the element again.

Pick a color from the webpage, or the screen

2024-06-11T00:00:00.000Z

When working with the CSS of a webpage, from the Elements or Inspector tool, in DevTools, there may be times when you want to reuse a existing color from the webpage, or from the screen, but might not know the exact color value. This can happen, for example, in cases when the color you want to pick is part of an image.

To copy the color value from a pixel on the inspected webpage, or on the entire screen, use the Eye Dropper tool in DevTools.

In Firefox #

In Firefox, you can use the Eye Dropper tool in two ways: either to copy a color to the clipboard, or to change a color in the CSS code displayed in the Rules tab.

Copy a color to the clipboard #

Open DevTools and go to the Inspector tool.
Click the Grab a color from the page button, that's located in the Inspector toolbar, above the DOM tree panel.

The Eye Dropper tool appears in the page.
Move your cursor over the webpage to find the color you want to copy, and then click.

The color value is copied into your clipboard.

Change a color in the CSS code #

Open DevTools and go to the Inspector tool.
Find the CSS color value you want to change in the Rules tab.
Click the colored circle next to the color value.

The Color Picker dropdown appears.
Click the Eye Dropper icon that's displayed in the bottom left corner of the Color Picker dropdown.

The Eye Dropper tool appears in the page.
Move your cursor over the webpage to find the color you want to use, and then click.

The color value that's displayed in the Rules tab is changed to match the color you selected.

In Chrome, Edge, and Safari #

Chrome and Edge don't have a way to copy a color to your clipboard. They only support using the Eye Dropper tool to change a color displayed in the CSS code in the Styles pane. However, these browsers support grabbing a color from the entire screen, not just the webpage.

Open DevTools and go to the Elements tool.
Find the CSS color value you want to change in the Styles pane.
Click the colored square next to the color value.

The Color Picker dropdown appears.
Click the Eye Dropper icon in the Color Picker dropdown.

Your cursor changes into the Eye Dropper tool.
Move your cursor over the webpage or the screen to find the color you want to use, and then click.

The color value that's displayed in the Styles pane is changed to match the color you selected.

In Polypane #

Click the Eye Dropper icon in the browser top toolbar.

Your cursor changes into the Eye Dropper tool.
Move your cursor over the Polypane UI or over the screen to find the color you want to use, and then click.

The Eye Dropper UI appears, showing the selected color, as well previously selected colors, and contrast ratio information.

Highlight areas that the browser engine re-paints

2024-06-11T00:00:00.000Z

When you scroll through a webpage, or when parts of the webpage change, the browser engine sometimes needs to repaint parts of the page. The process of converting the layout and style information into pixels on the screen is specific to each browser engine, but it can be quite expensive in terms of performance, especially when the repainted areas are large and when repaints occur often.

Use Paint flashing in DevTools if you suspect that your webpage is slow because of frequent and large repaints. Paint flashing highlights the areas of the webpage that the browser engine repaints, making it possible for you to visually identify the problematic areas.

Warning: using Paint flashing may not be suitable for people prone to photosensitive epilepsy.

In Chrome and Edge #

Open DevTools.
Open the Rendering tool.
Select the Paint flashing checkbox.
Interact with the webpage to see the areas that the browser engine repaints.

As the browser engine repaints areas of the page, these areas get highlighted in a different color:

In Safari #

Open the Web Inspector.
Go to the Elements tool.
Click the Paint flashing button in the toolbar.

In Firefox #

Unfortunately, Firefox no longer has a built-in paint flashing tool. This is due to the new rendering engine (WebRender) that Firefox uses, and which doesn't support paint flashing. See Paint flashing DevTools for WebRender on Bugzilla if you want to follow the updates on this feature.

Display the specificity of a CSS selector

2024-06-04T00:00:00.000Z

The specificity of a CSS selector is a score that the browser computes based on the different parts of the selector. It is used to determine which CSS rule takes precedence when multiple rules from the same origin and layer target the same element. Cascade, specificity, and inheritance, at MDN, is a good resource to learn more.

To display the specificity of a CSS selector in DevTools:

In Chrome, Edge, Firefox, and Safari
1. Go to the Elements tool (called Inspector in Firefox).
2. Hover over a CSS selector in the Styles pane.
3. The specificity of the selector is displayed in a tooltip.
In Polypane
1. Open the Style tab of the Elements panel.
2. The specificity is displayed next to each CSS selectors, to the right.
3. Click on the specificity to see how the specificity for the selector is calculated.

Copy an inline SVG image's source code

2024-05-28T00:00:00.000Z

To copy the SVG source code of an SVG image that's embedded directly in the HTML of a webpage, use the Elements tool in DevTools (Inspector in Firefox).

To open DevTools, right-click the SVG image in the webpage, and then click Inspect.

The Elements (or Inspector) tool opens, with the SVG element selected in the DOM tree of the page.
Make sure the <svg> element is selected. Depending on where you right-clicked on the webpage, an element that's inside the <svg> element might be selected instead. If so, click the <svg> element to select it.
To copy the SVG source code:
- In Firefox, Chrome, Edge, or Safari: Right-click the <svg> element in the Elements (or Inspector) tool, and then click Copy > Copy outerHTML (or Outer HTML in Firefox).
- In Polypane: Click the Copy icon and then click Copy Outer HTML.
The SVG source code is now copied to your clipboard.
Paste the SVG source code wherever you want to use it.

The following screenshot shows the Copy menu in Microsoft Edge:

And the following screenshot shows the Copy icon in Polypane:

Alternatively, in Polypane, you can right-click the SVG and then select Copy SVG as... > Copy as code.

Disable all CSS styles on the page

2024-04-09T00:00:00.000Z

To remove all CSS styles on a webpage, for example to test the accessibility of a page when styles are disabled, or to verify the order in which content is displayed, you can use the techniques below. Don't worry, the styles will be re-enabled when you refresh the page.

By running JavaScript in the console #

Open the Console tool in your browser DevTools.
Enter the following JavaScript expression:
```
document.querySelectorAll('style, link[rel="stylesheet"]').forEach(e => e.remove());
```
The expression above finds all <style> elements and <link rel="stylesheet"> elements on the page, and removes them.
Press Enter to run the expression. The page is now displayed without any CSS styles:

By using Firefox's Style Editor tool #

Firefox has a tool named Style Editor, which lists all the stylesheets used on the page. To disable the styles on the page:

Open the Style Editor tool in Firefox DevTools.
Click the Toggle style sheet visibility buttons (the eye icons) next to each stylesheet to disable it.

By using the Sources tool in other browsers #

Open the Sources tool in Chrome or Edge DevTools.
Find the CSS files that you want to disable, for example by pressing Ctrl+P (or Command+P on macOS) to open the Command Menu and by typing .css to filter the CSS files.
Select the entire text in the CSS file and delete it.
Repeat with the other CSS files you want to disable.

By using Polypane's Disable CSS option #

In Polypane, you can disable all CSS styles by using the Disable CSS option:

In the pane where you want to disable CSS styles, open the Debug tools menu.
Click Disable CSS in the menu.

Find why a CSS property is overridden

2024-04-08T00:00:00.000Z

In CSS, the cascade plays a very important role in which CSS properties apply to an element. This key concept is not explained here, but you can learn more on MDN, at Cascade, specificity, and inheritance.

When debugging CSS, sometimes you realize that the CSS property you meant to apply to an element is actually overridden by another property. Finding the overriding property is not always easy, especially when the element is styled with many CSS rules that define many properties.

Here are ways to find the overriding CSS property.

By using the computed styles #

Open the Computed styles panel in your browser DevTools. In Firefox, it's located in the Inspector tool. In other browsers, it's in the Elements tool.
Find the property which is overridden.
Expand the property by clicking the triangle icon next to it.

The list of CSS rules that define this property appears, ordered by their specificity. The rule that wins is at the top of the list.
To navigate to the overriding property, click the link next to the winning rule.

By filtering the applied rules #

Firefox DevTools has a helpful feature that allows you to filter the applied CSS rules that are displayed in the Rules panel. This can help you find the overriding property:

Locate the CSS property that is overridden in the Rules panel of the Inspector tool.
Click the Filter rules containing this property icon (a funnel) next to the property name.

The list of CSS rules is filtered to show only the rules that contain the overridden property. In addition, the property is highlighted everywhere it appears in the panel.
Scroll through the list of properties to find the overriding property (i.e. the one that's not struck through).

You can achieve the same result in other browsers by using the Filter text box that's at the top of the Styles panel in the Elements tool.

See the accessibility tree

2024-03-05T00:00:00.000Z

The accessibility tree is a representation of the structure of a web page that is used by assistive technologies such as screen readers. It is similar to the DOM tree, but it only includes the elements that are relevant for accessibility. For example, it includes text nodes, links, images, or form controls, but not generic elements such as <div> or <span>.

It's best to actually use a screen reader, or another assistive technology, to experience how your webpage is perceived by users with disabilities. But, it can sometimes be useful to see the accessibility tree in DevTools to understand how a page is structured.

Firefox #

Firefox has a dedicated Accessibility tool. To open it:

Press F12 to open DevTools.
In the main toolbar, click the Accessibility tab.
Expand the document node that's displayed in the tool to reveal the accessibility tree.

Supported features include:

Hovering over nodes in the tree highlights the corresponding DOM elements in the page.
Selecting nodes reveals their accessibility properties in the sidebar.
Accessibility issues are displayed next to the corresponding nodes in the tree.
Checking for more issues, tabbing order, or simulating color vision deficiencies from the toolbar.

Chrome and Edge #

Chrome and Edge have an option to display the accessibility tree in the Elements tool, instead of the DOM tree. To enable it:

Press F12 to open DevTools.
Go to the Settings panel by pressing F1.
In the sidebar, click Experiments.
Find the Enable full accessibility tree view in the Elements panel checkbox and select it.
Restart DevTools.

To see the accessibility tree in the Elements tool:

Open the Elements tool.
Click Switch to Accessibility Tree View in the top-right corner of the DOM tree.

Supported features include:

Hovering over nodes in the tree highlights the corresponding DOM elements in the page.
Selecting nodes reveals the matching CSS styles in the Styles pane and lets you update them.

Name evaluated files with the sourceURL pragma

2024-01-29T00:00:00.000Z

If you insert JavaScript code in a webpage by using the eval() function, or inline <script> tags, you can use the sourceURL pragma to give them a name in DevTools.

For example, when using eval():

eval('console.log("Hello world!")\n//# sourceURL=hello-world.js');

The above code snippet not only runs the evaluated code, but it also makes it appear in the Sources (or Debugger) tool as if it came from a file named hello-world.js.

This can also be useful when using inline <script> tags:

<script>
  console.log("Hello world!")
  //# sourceURL=hello-world.js
</script>

Using the sourceURL pragma is a great way to debug your code more easily in DevTools. Console messages will be easier to identify, and source code will be easier to debug.

Simulate the Window Controls Overlay feature for PWA

2024-01-25T00:00:00.000Z

If you're building a desktop PWA, you might want to use the Window Controls Overlay (WCO) feature to make your app look more native. With WCO, you gain control over the entire surface area of the installed app window, and can display your own title bar.

The only difficulty is testing the feature. To test your new title bar when using WCO, you actually need to install the app on your device first, but also test what the app looks like on all operating systems (macOS, Windows, Linux) because the title bar will look different on each.

The Application tool in both Chrome and Edge let you simulate the WCO feature so that you don't have to leave the comfort of your browser and can test what your app will look like when installed on any OS.

To simulate WCO:

Open the PWA where you're using the WCO feature in Chrome or Edge.
Open DevTools and go to the Application tool.
Select the Manifest tab in the sidebar.
Scroll down to the Window Controls Overlay section, at the bottom of the panel.
Select the Emulate the Window Controls Overlay checkbox.
Select the operating system you want to simulate.

The OS-specific window controls will appear in the webpage, and your CSS code will work as if the env(titlebar-area-*) environment variables were set. To learn more about the CSS environment variables you can use with WCO, see Using env() to ensure content is not obscured by window control buttons in desktop PWAs on MDN.

Inspect the user-agent DOM

2024-01-19T00:00:00.000Z

Browsers often add elements to the DOM of your web pages on top of the ones you, yourself, defined. For example, when you create a <video> element, the browser creates a bunch of nested DOM nodes within it to display the controls, the progress bar, etc. When you use a <input type="range"> element, the browser also creates a nested DOM nodes to display the track and the thumb.

This is called the user-agent DOM. It's called like this because it's the DOM that the user-agent (or browser) creates for you. It's not part of the HTML code of your webpage, and it's also not visible to you in DevTools by default or accessible via JavaScript. It is useful, however, to know that it exists, and sometimes it can be useful to inspect it.

For example, in Chromium-based browsers, you can style the thumb in an <input type="range"> element using the ::-webkit-slider-thumb pseudo-element. But by default, you can't inspect the thumb in DevTools.

To display user-agent DOM nodes in DevTools, and therefore inspect and style it:

In Firefox:
1. Open a new tab and type about:config in the address bar.
2. Search for devtools.inspector.showAllAnonymousContent and set it to true.
3. Open DevTools, and open the Inspector tool.
4. Select the element you want to inspect, for example an <input type="range"> element.
5. Expand the element to inspect the DOM nodes generated by the browser for this element.
In Safari, you don't need to enable anything to use this feature:
1. Open DevTools, and open the Elements tool.
2. Select the element you want to inspect, for example an <input type="range"> element.
3. Expand the element to reveal the Shadow root (user-agent) node, and its children, that were generated by the browser for this element.
In Chrome, Edge, or other Chromium-based browsers:
1. Open DevTools.
2. Go to the Settings by pressing F1.
3. Find the Show user agent shadow DOM checkbox and select it.
4. Close the Settings.
5. Open the Elements tool.
6. Select the element you want to inspect, for example an <input type="range"> element.
7. Expand the element to reveal the Shadow root (user-agent) node, and its children, that were generated by the browser for this element.

Explain console errors by using artificial intelligence

2024-01-05T00:00:00.000Z

Edge DevTools lets use the Microsoft Copilot AI assistant to explain errors and warnings in the Console tool.

Console errors can sometimes be hard to understand and fix. The large language models that power modern AI assistants such as Microsoft Copilot are trained on so much data that they are sometimes able to reason about errors and provide helpful explanations.

The Console in Edge DevTools is now linked to the Copilot AI assistant sidebar in Edge. To explain an error in Edge DevTools:

Make sure you have the Copilot icon displayed in the top-right corner of Microsoft Edge. If not, go to Settings and more (...) > Settings > Sidebar > Copilot to enable it.
Make sure you're sign-in to Microsoft Edge with your personal Microsoft account.
Find the error you're interested in in the Console tool.
Click the ask Copilot: "Explain this error" button next to the error message.

The Copilot sidebar appears, your message is sent to the AI assistant, and you get a response that, hopefully, helps you understand the error.

To learn more, see Explain DevTools Console errors and source code using Copilot in Edge.

Enable DevTools in Safari

2023-12-22T00:00:00.000Z

Unlike other browsers, Safari hides its DevTools (and other developer-related features) by default. That's actually good because 99% of the people using the browser are probably not web developers.

If you are a web developer, though, and you want to use the DevTools in Safari, here's how to enable the option:

Go to Safari's Settings or press Cmd+,.
Go to the Advanced tab.
Check the Show features for web developers option.

This will add the Develop menu in the menu bar and the Develop tab in Settings. Use this menu to open DevTools and access other developer-related features.

The right-click > Inspect Element option will also now be available.

Block DevTools

2023-12-22T00:00:00.000Z

There are two levels to consider when talking about blocking (or disabling) DevTools in a browser:

Disabling DevTools at the browser level. For example, if you have a browser for web development, and another one for personal browsing, you may want to disable DevTools in the latter. Maybe because you don't want F12 to open DevTools. Or maybe it's your mum's browser and she always gets confused when she accidentally opens DevTools.
Disabling DevTools for an entire organization. For example, you're a teacher and you don't want your students to be able to use DevTools. Or your an IT admin and you want to disable DevTools for all the computers in your company.

All browsers have different ways to disable DevTools. Here are the ones we currently know about. If you know of others, please let us know on the DevTools Tips GitHub repo.

Firefox:
- You can disable the F12 keyboard shortcut by going to about:config, searching for the devtools.f12_enabled setting, and setting it to false. Other DevTools shortcuts are still enabled by default though.
- You can disable DevTools for your organization by using the DisableDeveloperTools policy. Learn more about policies in Firefox.
Edge:
- In Edge, the F12 keyboard is already disabled by default. The first time you press it, a confirmation dialog appears, and you can choose to either open DevTools, or continue blocking the shortcut. You can also ask Edge to remember your decision so you never have to see the dialog again. Other DevTools shortcuts are still enabled by default though.
- You can disable DevTools for your organization by using the DeveloperToolsAvailability policy. Learn more about policies in Edge.
Chrome:
- You can disable DevTools for your organization by using the DeveloperToolsAvailability policy. Learn more about policies in Chrome.
Safari:
- In Safari, DevTools (or Web Inspector as it's called there) is disabled by default. You can enable it in the Advanced tab of the Preferences. See Enable DevTools in Safari.

List all event listeners on the entire page

2023-11-21T00:00:00.000Z

When you don't know a codebase, it might be hard to know where to get started, and what events are being listened to by which elements.

The Console tool, in Chromium-based browsers, comes with a nice utility function named getEventListeners which returns all of the listeners attached to a given element. If we combine this with the $$ utility function, we can get a list of all elements on the page, and their listeners.

The following code snippet will return an array of objects, each containing an element and its listeners. It also filters out all of the elements that don't have any listeners attached to them.

$$("*").map(el => {
  return { el, listeners: getEventListeners(el) };
}).filter(data => {
  return Object.keys(data.listeners).length;
});

So, to list all elements that have listeners on a page:

Open the Console tool, by pressing Ctrl+Shift+J on Windows or Linux, or Command+Option+J on macOS.
Paste the code snippet above in the Console, and press Enter.
The list of all elements with listeners is displayed in the Console.

Debug popups that appear on hover

2023-11-21T00:00:00.000Z

As described in Debug popups that appear on hover using JS and in Debug popups that appear on hover using the debugger statement, there are ways to debug popups that appear on hover using JavaScript.

The main problem in debugging overlay elements, like popups, is that they disappear as soon as the page loses focus, for example after moving focus to the DevTools window. Use the techniques below to keep focus on the webpage while using DevTools.

In Chrome or Edge #

Chromium-based browsers, such as Chrome and Edge, provide a way to emulate a focused state on the webpage even if DevTools has focus.

To emulate a focused state on the webpage:

Open the Command Menu (Cmd+Shift+P or Ctrl+Shift+P).
Type rendering and select the Show Rendering command. The Rendering tool appears at the bottom of DevTools.
In the Rendering tool, scroll down and check the Emulate a focused page option. The webpage now has focus.
Use DevTools to inspect and debug elements that only appear when focus is in the webpage.

In Polypane #

Polypane provides a way to retain the focus state inside each pane. To retain the focus:

Right-click on the Sync icon in the toolbar.
Check the Focus option. The focus in now retained in all panes, and also kept in sync across all panes.

Force execution, skipping breakpoints, when paused

2023-10-26T00:00:00.000Z

When using breakpoints to debug your JavaScript code, sometimes you end up setting many breakpoints in different functions. You might want to keep these breakpoints but not always pause at them.

There are two ways to do this in DevTools:

Forcing execution, skipping over other breakpoints.
Or temporarily deactivating breakpoints.

Force execution #

Forcing execution is only supported in Chrome and Edge:

Open the Sources tool.
Set all of the breakpoints that you need.
Once paused at your first breakpoint, click and hold the Resume script execution button and then select the Force script execution button. The script execution resumes, and doesn't pause at any other breakpoint.

Temporarily deactivate breakpoints #

In Chrome, Edge, and Firefox, you can temporarily deactivate breakpoints:

Open the Sources tool in Chrome or Edge, or the Debugger tool in Firefox.
Set all of the breakpoints that you need.
Once paused at your first breakpoint, click the Deactivate breakpoints button, and then click Resume. The script execution resumes, and doesn't pause at any other breakpoint.

See the viewport size

2023-10-05T00:00:00.000Z

The size of the viewport that's used to render a webpage in a browser can be very important at times, such as when creating or debugging media queries.

You can easily know what the current size of the viewport is in DevTools. Here are two ways to do it.

See the viewport size in the Console #

To display the viewport size in the Console tool:

Open the Console tool in DevTools.
Enter ${document.documentElement.clientWidth} x ${document.documentElement.clientHeight} in the prompt and press Enter.
The size of the viewport, at the time you executed the expression, appears in the Console.

You can also use a live expression to see the size of the viewport in real-time, as you resize the browser window. To learn more, see Cut down on console noise using live expressions.

See the viewport size in the page #

You can also see the size of the viewport⁕ in the page directly:

In Chrome or Edge:
1. Open DevTools.
2. Focus your attention in the top-right corner of the webpage, and then resize the browser window (or the DevTools panel).
  The viewport size appears as a temporary overlay, in the top-right corner of the webpage:
In Firefox:
1. Open DevTools and go to the Settings panel (F1).
2. Under Available Toolbox Buttons, select the Toggle rulers for the page setting.
  The Toggle rulers for the page icon appears in the DevTools toolbar.
3. Click the ruler icon to display rulers in the webpage.
  In addition to the top and left rulers which now are visible in the webpage, the viewport size is displayed in an overlay, in the top-right corner of the webpage.
In Safari:
1. Open Web Inspector and go to the Elements tool.
2. Hover over any node displayed in the DOM tree of the tool.
  On hover, rulers and the viewport size appear in the page temporarily.
3. You can also click the Show rulers icon in the toolbar of the Elements tool to make the rulers and viewport size overlay permanent.
In Polypane:
1. The dimensions of each viewport are always shown above it. Edit these values to update the viewport.

⁕ In browsers with classic scrollbars, the number shown in the page by DevTools doesn't account for the scrollbar width, if there is one. The actual viewport width is about 15 to 17 pixels small than the number shown.

Convert images to data-urls

2023-10-02T00:00:00.000Z

A data URL is a URL that starts with the prefix data: instead of http: or https:. This data prefix (or scheme) allows you to embed the actual content of the resource in the URL itself, rather than linking to it. For example data:text/html,<h1>Hello world</h1> is a data URL that contains HTML content directly. Try it out in a browser tab!

Images can also be encoded as data URLs. Here is a 2x2 pixel solid red PNG image as a data URL: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEklEQVQIW2P8z8AARAwMjDAGACwBA/+8RVWvAAAAAElFTkSuQmCC.

It can sometimes be useful to convert images to their data URLs, for example when you want to embed the images in a standalone HTML document that doesn't make any server requests.

To convert any image to a data URL:

In Firefox:
1. Open the image you want to convert in a new tab. Or open the webpage that contains the image you want to convert in a tab.
2. Open DevTools.
3. Open the Inspector tool.
4. Find the image you want to convert in the DOM tree and right-click it.
5. Select Copy > Image Data-URL.
In Chrome or Edge:
1. Open the image you want to convert in a new tab. Or open the webpage that contains the image you want to convert in a tab.
2. Open DevTools.
3. Open the Network tool.
4. Find the image you want to convert in the list of requests and click it.
5. Click the Preview tab in the sidebar.
6. Right-click on the image preview and select Copy image as data URI.
In Polypane:
1. Right-click on the image you want to convert.
2. Select Copy... > Copy as data URI. Other options include coping as an IMG tag, copying as markdown and as CSS background-image.

Use user gesture restricted APIs in the Console

2023-09-21T00:00:00.000Z

Certain web APIs are user gesture restricted. This means that they can only be called as a result of a user action, such as in a click event handler.

For example, you can't simply put yout website in fullscreen mode by using document.body.requestFullscreen() in your JavaScript code. You're only allowed to do this if the user initiated the action. This is for security reasons and is all well and good.

However, it can be a pain when you need to test a user gesture restricted API in the Console tool of DevTools.

Thankfully, Chrome, Edge, and Safari let you do it:

In Chrome or Edge, this is done by default. All JavaScript code you run in the Console is treated as a user action. You can, however disable this:
- Go to the Console tool.
- Click the Console Settings button in the top-right corner of the tool.
- Clear the Treat code evaluation as user action setting.
In Safari:
- Go the Console tool.
- Check the Emulate User Gesture setting in the toolbar.

And that's it! You can now use and test any APIs in the Console, including those that normally require a user gesture.

Find the offset parent of an element

2023-09-13T00:00:00.000Z

To know what an element is offset against horizontally or vertically (Which you do with position:relative and a left, top or inset value) you need to know its offset parent.

The offset parent of an element is the closest ancestor that has a position other than static, or the root element if none of the ancestors have positioning. Learn more about offset parents on MDN.

To find the offset parent of an element in Polypane:

Inspect the element in the Elements panel.
Open the Debug tab, and then scroll down to the Context section.

The Offset parent sub-section is listed there:

Highlight all elements on the page that match a given CSS selector

2023-09-08T00:00:00.000Z

When you select an element in DevTools (in the Elements or Inspector tool), you see the CSS rules that apply to it. But, these rules can also apply to other elements in the page than the currently selected one.

To see all the elements that match a given CSS rule selector, and therefore know which elements will be impacted if you change that rule:

In Firefox, select an element in the Inspector tool, then click the Highlight all elements matching this selector button next to a CSS rule in the Styles pane:
In Chrome, Edge, or Safari, select an element in the Elements tool, then hover over a CSS selector in the Styles pane:
In Polypane, select an element in the Elements panel, then click the Highlight all elements matching this selector button next to a CSS rule in the Styles tab:

Check if a website uses third-party cookies

2023-08-31T00:00:00.000Z

Cookies are small files that websites save on your computer when you visit them. Websites often use cookies to remember things about your last visit. For example, a weather website can use cookies to store your preferred location, so you don’t have to enter it every time.

Third-party cookies are just cookies too, but they are created by websites other than the one you are visiting, for example when the website you are visiting embeds an advertisement iframe.

Third-party cookies are often used by advertisers to keep track of the websites a user visits, collect information about their browsing activity, with the hope of offering targeted ads and getting them to return to a website to buy products.

There are very legitimate uses for third-party cookies and personalized content, but they also pose significant privacy and security concerns.

With DevTools, you can detect if a website uses third-party cookies:

Go to the website you want to test in a new window or tab.
Open DevTools.
Open the Application tool in Chromium-based browsers, or the Storage tool in Firefox or Safari.
In the sidebar, expand the Cookies section.

A list appears in the Cookies section. Check the list to see if the website uses third-party cookies:

If the website doesn't use cookies, the list will be empty.
If the website uses its own (first-party) cookies, you will see one item which matches the website's URL.
If the website uses third-party cookies, you will see more items in the list, some being from third-party websites that may just be tracking you.

Customize the way objects look in DevTools

2023-08-23T00:00:00.000Z

Objects appear in many places in DevTools. Most commonly in the Console tool, but also in various parts of the Sources (or Debugger) tool when you debug JavaScript code.

DevTools is the one that decides how these objects appear in the UI. For example, string and numbers have different colors, arrays have a little preview of the items, and an icon that lets you expand them to see the full list of items, etc.

But DevTools also lets you customize the way objects are displayed by using Custom Object Formatters. This can be very useful when you're working with a framework that stores objects in a particular way, and you want to make it easier to inspect these objects, or just to make certain types of objects stand out more.

Custom Object Formatters isn't something you configure in DevTools. Instead, you define them in the code that runs on the webpage, and DevTools picks them up automatically.

To create a new formatter:

Create a new object with three properties: header, hasBody, and body. All three properties should be functions that receive an object parameter, the object that DevTools wants to display. The header function should return the preview of the object, in JsonML format. hasBody should return a boolean that tells DevTools whether the object can be expanded to display more information. And body should return the preview of the object when it's expanded, also in JsonML format. For example:

const myCoolFormatter = {
 header: function(object) {
   if (!(object instanceof ColorCombo)) {
     return null;
   }

   return ["div", {style: `background-color: ${object.color1}; color: ${object.color2}; font-weight: bold; padding: .25rem;`}, "ColorCombo"]
 },
 hasBody: function(object) {
   return object instanceof ColorCombo;
 },
 body: function(object) {
   if (!(object instanceof ColorCombo)) {
     return null;
   }

   return ["ol", 
            ["li", 
              `Color 1 (${object.color1}): `,
              ["span", {style: `display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; background-color: ${object.color1}`}]
            ],
            ["li", 
              `Color 2 (${object.color2}): `,
              ["span", {style: `display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; background-color: ${object.color2}`}]
            ]
          ]
 }
}

The above code snippet defines a custom formatter that will be used for objects that are instances of the ColorCombo class. Let's imagine this class is used on your webpage and is defined as follows:

class ColorCombo {
  constructor(color1, color2) {
    this.color1 = color1;
    this.color2 = color2;
  }
}

Append your formatter object to the global window.devtoolsFormatters array:

// You can create a new array.
window.devtoolsFormatters = [myCoolFormatter];
// Or append to the list of existing formatters.
window.devtoolsFormatters.push(myCoolFormatter);

That's it, you don't need to do anything more. Now, whenever ColorCombo objects are displayed in DevTools (for example when using console.log(object)), they will be displayed using the custom formatter you defined.

Learn more:

Firefox DevTools Custom Object Formatters.
Custom Object Formatters in Chrome DevTools.
Vector-devtools, a cool formatter for 2D vector objects.

Inspect DevTools with DevTools

2023-07-31T00:00:00.000Z

The user interface of DevTools is built with HTML, CSS, and JavaScript. This means you can inspect and debug DevTools with DevTools.

Chromium #

To debug DevTools in Chromium-based browsers, such as Chrome or Edge:

Open DevTools on any browser tab.
Undock DevTools into a separate window.
Press Ctrl+Shift+I (Cmd+Opt+I on macOS) to open a second DevTools window.

This second DevTools window now targets the first one. Anything you see in the Elements tool represents elements of the first DevTools window's user interface.

Firefox #

To debug DevTools in Firefox:

Open DevTools on any browser tab.
Open the Settings page by pressing F1.
Under Advanced settings, check the Enable browser chrome and add-on debugging toolboxes and Enable remote debugging checkboxes.
Now in the main Firefox toolbar, click Open application menu (the hamburger menu).
Click More tools > Browser Toolbox.

A new DevTools window appears. This one inspects the entire Firefox browser window. The elements you see in the Inspector tool represent elements of the Firefox user interface, including its DevTools.

Create your own DevTools theme

2023-07-31T00:00:00.000Z

You can change the color theme of DevTools to match your preference (see Change the color theme of DevTools to learn more), but you can also create your own theme from scratch by creating a browser extension.

The process is a little bit complicated, and you will need to keep up with any DevTools changes that may break your custom styles, but it's a great way to make DevTools your own. And by creating it as an extension, it also means you can share it with others.

Create an extension #

First, you need to create a browser extension that will load your custom styles in DevTools. This extension is different from traditional browser extensions in that it doesn't create any new UI element in the browser.

Create a directory for your extension.
In your extension directory, create a devtools.html file which is only used to load a JavaScript file:
```
<script src="devtools.js"></script>
```

Also create the devtools.js file. This is where you'll load the custom styles:

fetch(chrome.runtime.getURL('devtools.css')).then(response => {
  response.text().then(text => {
    chrome.devtools.panels.applyStyleSheet(text);
  });
});

Now, create the devtools.css file. This is where you'll write your custom styles. For example:
```
.webkit-html-attribute-name {
  font-weight: bold;
  color: white;
  background: black;
}
```
To help you get started with which styles you can override in your custom stylesheet, see Inspect DevTools with DevTools.

Finally, create a manifest.json file to load the DevTools page:

{
  "name": "My DevTools theme",
  "version": "1.0",
  "manifest_version": 3,
  "devtools_page": "devtools.html"
}

Enable custom DevTools themes #

By default, DevTools doesn't load custom themes created by browser extensions. To enable this:

Open DevTools.
Open the Settings page by pressing F1.
In the sidebar, click Experiments.
Enable Allow extensions to load custom stylesheets.
Close the Settings page and reload DevTools.

Load your extension #

To test locally, you can load your extension as an unpacked extension:

Open the about:extensions page in Chrome or Edge.
Enable the Developer mode toggle.
Click Load unpacked.
Browse to your extension's directory and select this folder.
Open a new tab on any website and open DevTools.

Here is what the example code above looks like in Chrome DevTools:

Find memory leaks by comparing heap snapshots

2023-07-10T00:00:00.000Z

Note: If you think your memory leak comes from DOM nodes, you can also use the Detached Elements tool in Edge, see Get detached DOM elements to investigate memory leaks.

Memory leaks are hard to find, and the Memory tool in DevTools can look pretty intimidating. But if you can reproduce the leak consistently, it helps to know about the tool's Compare feature, which allows you to focus on just the differences between two heap snapshots and forget the rest.

To compare two heap snapshots:

In Chrome or Edge DevTools, open the Memory tool.
Before doing anything else, record a first heap snapshot. This will be your baseline against which you'll compare all other snapshots.

To do this, make sure the Heap snapshot option is selected and click Take snapshot at the bottom.
Now, in the webpage, run the user scenario that creates the memory leak.
Back in the tool, record another heap snapshot by clicking the Record heap snapshot button in the top left corner.
With the new snapshot displayed, click the drop-down (which is currently set to Summary) and change its value to Comparison.
Verify that the second drop-down, to the right, has the first snapshot selected. If you record more snapshots, make sure you're comparing to the right baseline.
In this comparison view, sort by different columns to see how memory changed during the user scenario.

Sort by the Size Delta column to see how much memory each object type has increased (or decreased) since the baseline snapshot. You can also sort by New and Deleted to see which objects have been created or deleted since the baseline.
Expand object types and click on individual objects to see more details in the Retainers panel at the bottom. You should be able to find references to your own code where objects were added, eventually leading to finding the root cause of the leak!

Add custom headers to the network table

2023-06-21T00:00:00.000Z

On the web, when a client (a browser) and a server communicate using HTTP, the requests and responses they send to each other contain headers. These headers are key/value pairs that contain metadata about the request and the response. Common examples of headers include the Content-Type header, which tells the browser what type of content the server is sending back, or the User-Agent header, which tells the server what browser the client is using.

It's also possible to add custom headers to requests and responses. This is often used by proprietary software and for debugging purposes. For example, the IIS web server adds a X-Powered-By header to responses.

In Chrome and Edge, you can configure the Network tool to display any custom header you want in the request table directly, alongside the columns that are already displayed:

Open DevTools and go to the Network tool.
Right-click on any of the columns in the request table, and then click Response Headers > Manage Header Columns.
In the Manage Header Columns popup window, click Add Custom Header.
Type your custom header name and press Add.

Find the CSS rule that causes a specific style to apply

2023-06-10T00:00:00.000Z

Here is the scenario: you know there's a specific style that applies to an HTML element in your web page, say some padding, but you can't seem to find where, in the CSS code, that style is coming from.

This can easily happen when working on a large codebase where a lot of CSS rules apply to the element you're looking at.

One neat way to help with this is to use the Computed panel:

Open DevTools, and select the element you're interested in.
In the Elements (or Inspector) tool, open the Computed sidebar panel.
In the list, search for the CSS property you are interested in, say padding-bottom.
Expand the little arrow next to the property name to see the CSS rule (or rules) that caused this style to be applied.
Click the first link in the list to jump to the actual location, in your code, where the rule is defined. In Firefox, you will end up in the Style Editor tool, and in Chromium-based browser the link will take you to the Sources tool.

Quick note: in Chrome, Edge, and Safari only, you can also jump from the Computed panel to the right place in the Styles panel by clicking to the right of the property name:

Debug your Safari Web Apps on macOS

2023-06-09T00:00:00.000Z

Starting with Safari 17 (announced at WWDC 2023) any website you use in Safari can be installed as a Web App on macOS. Once installed, the Web App shows up like any other app on macOS, in all of the same places, like in the Dock. It also has its own standalone window.

Once installed, you can debug your Web Apps using the Web Inspector in Safari, here is how:

If you haven't done this already, enable the developer features in Safari. This only needs to be done once:
1. In Safari, go to Safari > Settings.
2. Select the Advanced tab.
3. Click Show features for web developers.
Open your Web App.
In Safari, go to the Develop menu.
Select the device your Web App is running on. This will be your Mac's machine name.
In the submenu, select the Web App you want to debug.

To learn more, see Safari's Develop menu documentation.

Understand when the Console opens in the main panel and in the drawer

2023-06-06T00:00:00.000Z

Have you noticed how the Console tool is sometimes displayed in a top-level tab (just like all other tools), and sometimes in a split pane at the bottom, below the main tool?

If you've been confused by this in the past, this tip should hopefully help you understand the logic behind it.

The main panel vs. the drawer #

All browser DevTools have a main area, let's call it the main panel, and typically display their tools as tabs in this main panel.

But they also also have a bottom area called the drawer.

This area is not always displayed and can be toggled by pressing the Escape on your keyboard. If you don't see the drawer, press Escape and it should appear, therefore splitting the DevTools window into 2 parts:

The main area at the top, that contains all of your tools.
The drawer area at the bottom, where other tools can be used too.

Here is what DevTools looks like, when the drawer isn't displayed:

After pressing Escape, here is what DevTools looks like, with the drawer at the bottom:

What's in the drawer? #

In Firefox, the drawer only contains the Console tool. So, whenever you feel the need to see your logs, or execute a bit of JavaScript code while working with another tool, just press Escape.

In Chrome or Edge, the drawer has its own tabbar, just like the main panel, which can contain the Console, but can also be used to open other tools too.

What if you open the Console in the main panel? #

This is where things may be confusing: what if you open the drawer to display the Console and then you also open the Console in the main panel?

When you do this, the drawer hides itself automatically. This happens because there is only one instance of the Console tool in DevTools. Whether it's displayed in the main panel or in the drawer makes no difference, it's the same tool that's used.

So, remember, if you select the Console in the main panel when it's already displayed in the drawer, the drawer hides away, only to return once you switch over to a different tool.

Know which of the font in a font-family was actually used

2023-06-02T00:00:00.000Z

The CSS font-family property let's you define a comma-separated list of fonts that the browser engine should choose from (in priority order) to render text. For example, with font-family: "Gill Sans", sans-serif; the browser will first try to use the Gill Sans font, and if it's not available on the current device, it will fall back to whatever is the default sans-serif font on this device.

As a web developer, it's often useful to know which font was actually used in a long list of fallback fonts.

On Firefox:

Open DevTools, and open the Inspector tool.
Select the element you want to inspect.
In the Rules sidebar, find the font-family property that applies to this element.
Check which font name in the property value is underlined. This is the font the browser selected.

Important note: this is different from knowing which font was used to actually render text. To make this clearer, there are two levels to keep in mind:

The CSS defined font in the font-family property, which is the font(s) that you, the web author, want to use. This may contain actual font names or generic font names such as serif or system-ui.
The actual font face the browser used to render some text. This is the font file that the browser finally chose to render the text. This font file contains the actual glyphs displayed on the rendered web page.

The defined and rendered fonts may be different for a number of reasons:

The defined font is not available on the system.
The defined font is available, but doesn't contain all the glyphs required to render the text. In this case, the browser will fall back to another font that contains the missing glyphs.
The defined font is a generic font name, such as serif or system-ui, which the browser will map to a specific font on the system.
The defined font is something like Arial, and is available, but the text contains both normal, bold, and italic text, in which case the browser may use different font files to render the different styles.

If you want to know which final font was used to render a piece of text, see: List the fonts used on a page, or an element.

Find all elements with a specific style

2023-05-31T00:00:00.000Z

Let's say you want to list all of the elements on a page that are absolutely positioned. Or maybe you want to find all of the elements that use CSS grid. How would you do that?

One way is to run a few lines of JavaScript code in the Console tool to iterate over all of the elements and check their computed styles. Here's how:

Open the Console tool.
Copy the below code snippet and paste it in the Console. Change the whatToFind object to match your needs.

var whatToFind = {
  property: "position",
  values: ["absolute"]
};

var walker = document.createTreeWalker(
  document.documentElement,
  NodeFilter.SHOW_ELEMENT,
  el => {
    const style = getComputedStyle(el)[whatToFind.property];
    return whatToFind.values.includes(style)
      ? NodeFilter.FILTER_ACCEPT
      : NodeFilter.FILTER_SKIP;
  }
);

while (walker.nextNode()) {
  console.log(walker.currentNode); 
}

Press Enter and voila! In the screenshot below, all of the absolutely positioned elements on the page are listed.

If you wanted to find all of the elements that use CSS grid, you would change the whatToFind object to this:

var whatToFind = {
  property: "display",
  values: ["grid", "inline-grid"]
};

To avoid having to copy or type this code every time, you can also use the Snippet tool in Chromium-based browsers as explained in Re-use scripts as snippets.

Inspect and debug iframes

2023-05-21T00:00:00.000Z

If the page you are working on contains an iframe which you want to inspect and debug, you can actually use DevTools to do so. This can be very useful when working with coding playground sites like CodePen, JSFiddle, or Glitch.

Firefox #

Firefox has an iframe selector button in its toolbar that lets you select the iframe you want to inspect. Once selected, the Inspector and Console tools will be scoped to the iframe you selected. This means that you will only see the DOM tree and the console messages for the iframe you selected. This also means that any JavaScript expression you execute in the Console tool will be executed in the context of the iframe.

Open Firefox DevTools.
In the main toolbar, click Select an iframe as the currently targeted document.
Select the iframe you want to inspect.

Chrome, Edge, Safari #

Chromium-based browsers and Safari have a JavaScript context selector button located in the Console tool which allows you to select the iframe you want to execute JavaScript expressions in. This button does not change what's visible in the Elements tool, it only changes the JavaScript context in which the Console tool works.

Open DevTools.
Open the Console tool.
In the Console toolbar, click JavaScript context.
Select the context you want to execute JavaScript expressions in.

Take high-resolution screenshots of web pages

2023-05-19T00:00:00.000Z

Taking screenshots of all or parts of web pages is super useful (scroll down to the See Also part at the bottom of this page for more tips on that). But sometimes, the resulting screenshots aren't high-resolution enough for your needs.

It turns you can make DevTools take high-resolution screenshots of your web pages too!

From the Console in Firefox #

Firefox has a super handy :screenshot command you can use in the Console tool to take screenshots. It takes a few options, including --dpr to specify the device pixel ratio. The default value is 1, but you can set it to 2, 3, or any other number to take screenshots at higher resolutions.

For example: :screenshot --dpr 3 --fullpage will take a screenshot of the full page at three times the resolution.

Find out more about the :screenshot command and its other options in the Firefox DevTools documentation.

From Device Mode in Chromium-based browsers #

Here's a nice trick to do a similar thing in Chromium-based browsers (Chrome, Edge, Brave, etc.):

Open DevTools and go to the Device Mode tool.
Click the Dimensions dropdown menu and select Responsive.
Click More options (⋮) and select Add device pixel ratio. This will add a new DPR dropdown to the device toolbar where you can select the DPR value.
In the DPR dropdown, select the highest value to take the highest resolution screenshot.
Click More options (the three dots icon) and then click Capture full size screenshot.

Customize the columns shown in console.table

2023-05-16T00:00:00.000Z

The console.table method is great for displaying tabular data in the console, but what if the objects your're logging contain a lot of properties, causing a lot of columns to appear in the console?

For example, let's log all DOM elements on a page with console.table($$("*")):

You can actually customize the columns that are shown in the table by passing an array of strings as a second argument to console.table(). This array should contain the names of the properties you want to display.

Let's log all DOM elements on the page as before, but this time, let's pass an array containing just the few properties we want to display for each element: console.table($$("*"), ["tagName", "id", "className"]);:

Speed up or slow down a video

2023-05-05T00:00:00.000Z

You can speed up or slow down a video on a website by using the playbackRate property of the video element.

This can be very useful for when the website makes it tricky to do this in the UI!

Open DevTools.
Select the <video> element by either right-clicking on it and choosing Inspect Element or by using the Elements or Inspector tool.
Go to the Console tool.
Type $0.playbackRate = 2 and press Enter.

This number you choose is the multiplier for the playback speed. So 2 will make the video play twice as fast, 0.5 will make it play at half the speed, etc.

Thank you Umar Hansa for this tip!

Debug your print CSS styles by simulating print media

2023-05-02T00:00:00.000Z

If you work on a webpage that's supposed to be printed, you probably want to test your print CSS styles. You can use your browser's print preview of course, but what if you need to debug the CSS?

DevTools has a way to simulate the print media right in the browser tab where DevTools is opened. This way you don't need to open the browser's print preview (or worse, actually print the webpage on a sheet of paper). You can stay in the same tab, and use the same DevTools to debug your print-specific styles!

In Firefox:
1. Open the Inspector tool.
2. In the toolbar of the Rules sidebar tab, use the Toggle print media simulation for the page button.
In Edge or Chrome:
1. Open the Rendering tool (you can access it easily by using the Command menu and typing "Rendering").
2. Scroll down to the Emulate CSS media type drop-down.
3. Choose the Print option.
In Polypane:
1. Open the Emulation options.
2. Toggle Media type to "print".
Tip: open two panes side-by-side and set one to print media to compare the print and screen versions of your page.
In Safari:
1. In the Elements panel, click the printer icon in the toolbar at the top to force the page to use the print media styles.

Measure arbitrary distances in the page

2023-04-05T00:00:00.000Z

Do you need to find out the dimensions of any element or area in the page? Or perhaps the distance between two things?

If you do, Firefox DevTools may be the right tool for the job.

First, enable the tool, you only need to do this once:

Open DevTools.
Open the Settings panel by pressing F1.
Scroll down to the Measure a portion of the page.
The ruler icon now appears in the DevTools toolbar.

Whenever you need to measure something in the page:

Click the ruler icon in the toolbar.
Click and drag in the page to start measuring an arbitrary area.
You can also resize the measured area by dragging the handles after releasing the mouse button.
To measure something else, just start click and dragging somewhere else.
Click the ruler icon in the toolbar again to stop the tool.

Replay a XHR request

2023-03-28T00:00:00.000Z

When you're debugging an XHR request to a backend service that doesn't respond with the right things it can be useful to send the request over and over again. Reloading the entire page to do so is tedious.

In Chrome or Edge DevTools, you can simply replay the same XHR request:

Open the Network tool.
Find the XHR request in the list that you want to resend. Note that this only works with XHR requests, and not Fetch requests.
Right-click the request and click Replay XHR.

Note: you can also edit the request before resending it! To learn more, see Edit and resend faulty network requests to debug them.

Find broken links

2023-03-22T00:00:00.000Z

The link to X on page Y doesn't work is probably a bug report you've received at some point. But how do you find these broken links before someone else does?

In Polypane, the Outline Panel will show you all the links on the page, and check if they return a 200 status code, or if they return an error code (like 404, or 500).

Along with broken URLs, Polypane also finds unfinished/placeholder URLs like mailto: and https:// without anything else after that text.

List the fonts used on a page, or an element

2023-03-16T00:00:00.000Z

"What font is that?" or "Why is this font used?" are probably questions you've asked yourself while working on a website design.

However, it's not always easy to know which fonts are actually used on a webpage and looking at the CSS the page uses might not always give you the answer.

Webpages often define multiple different fonts, for example: font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;

When the browser renders a page, if the first font in the list is not available on the device, the browser falls back to the next font. If the next one isn't available either, it falls back to the next one and so on. Also some fonts are defined with generic names such as serif, or monospace, which tells you nothing about which exact font the browser chose to use.

DevTools can help you determine which fonts are used on a webpage, or on a specific element on a page.

In Firefox #

Firefox has the best tool to inspect fonts. To know which fonts are used on a webpage:

Open DevTools, and open the Inspector tool.
Select the <body> element.
In the sidebar, select the Fonts tab.

The list of fonts used on the page is displayed.
You can even hover over a font name to see where it's used on the page.

To know which fonts are used on a single element:

Select the element in the Inspector tool.
The Fonts tab updates and gives the list of fonts used in that single element.

Note that an element may require multiple fonts to render correctly, even if this element only contains a single text node. This can happen when the font used to render the element doesn't have all the glyphs required to render the text, in which case the browser falls back to another font to render the missing glyphs.

In Chrome or Edge #

In Chrome or Edge (or other Chromium-based browsers), you can see which font(s) was/were used to render a given text-containing element:

Open DevTools and open the Elements tool.
Select an element that has at least one text node. Elements that only contain other elements, and not directly text won't work.
In the sidebar, select the Computed tab, and scroll down the very bottom of the panel.

The list of fonts that were used to render the text in the element appears.

In Polypane #

In Polypane, you can see which font was used to render a given text-containing element:

Hold Alt/Option and hover over the text you want to find the font for.
The rendered font is shown in the tooltip.
On inspection, the font is also shown in the Element Overview

See network request paths instead of names in the Network tool

2023-03-09T00:00:00.000Z

By default, the Network tool displays the name of each requested resource. For example, if a webpage requests an image from https://mysite.com/assets/img/image.png then the tool only displays image.png by default instead of the full file path.

Chrome and Edge #

In Chrome and Edge DevTools, you can see the full path instead, which can be useful to more easily identify resources in the request list:

In the Network tool, right-click one of the table headers.
In the list of columns, select Path, and deselect Name.

Firefox #

Firefox doesn't have a Path option, but you can display URLs instead:

In the Network tool, right-click one of the table headers.
In the list of columns, select URL, and deselect File.

Thank you Ryan Staniforth for sharing this tip on Twitter.

Display the current framerate of your webpage

2023-03-03T00:00:00.000Z

For a super smooth user experience on your website or app, it's better if the browser manages to render your page at a high framerate. Ideally, this rate should be 60 frames per second (FPS). This gives the browser 16ms to paint each frame. When the webpage doesn't do anything and the user is just reading the content, that's not hard to achieve. But if you have complicated JavaScript running and updating the page, then the browser has to squeeze a lot more work in these 16 ms frames.

A lower than 60 FPS framerate may lead to a degraded user experience where animations and page updates are noticeably janky and interactions feel slow. When debugging low framerate performance issues, it may help to display the current framerate on the screen.

In Chromium-based browsers, such as Edge or Chrome, it is possible to display an FPS meter on the screen:

Open the Command Menu: type Ctrl+Shift+P (or cmd+Shift+P on mac).
Type FPS to display the Show Frames Per Seconds (FPS) Meter command.
Press Enter.

The FPS meter appears in the upper left corner of the webpage, and displays the live framerate as you use the page. Use the Command Menu again to hide the FPS meter.

Detect unused CSS and JavaScript code

2023-03-03T00:00:00.000Z

To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that your page requires to appear correctly. If some of your CSS or JS code is only needed later, when the user starts interacting with the webpage, then consider deferring this code until it's really needed.

In Chromium-based browsers #

Chrome and Edge have a useful Coverage tool that can help identify which parts of code are unused. To detect unused code on page load:

Open the Coverage tool by using the Command Menu: type Ctrl+Shift+P (or cmd+Shift+P on mac), then type Coverage and press Enter.
In Coverage, click the Start instrumenting coverage and refresh the page button (i.e., the refresh button).
Wait for the webpage to reload and for the coverage report to appear.

The report shows a list of CSS and JS files with a percentage of unused bytes.
Click on any of the files to open it in the Sources tool.

The file appears in the tool, and the line number gutter on the left indicates which lines were used, in blue, and which were unused, in red.

You can now decide whether some parts of your code can be loaded later, when needed only.

In Safari #

In Safari, you can detect unused JS code, with the following steps,

In the Sources panel, open the JS file from the left sidebar.
Click the coverage icon C in the toolbar (top-right) to start detecting unexecuted code.
Refresh the page.
Lines of code that are not executed on page load are greyed out. Executed lines are displayed as normal.

Throttle your CPU

2023-03-01T00:00:00.000Z

Your development machine is very likely much more powerful than the devices your users have (which are probably low-end mobile devices).

Before you ship your new app or site, thinking that it will run as smoothly as it does on your computer, test it on other devices. Build empathy for your users and what they have to go through while using your app or site.

The best way to do this is to test on the real devices your users actually have! A proxy to this is to simulate a slower CPU from DevTools.

To throttle your CPU in Chrome or Edge DevTools:

In DevTools, open the Performance tool.
Click Capture settings. It's the gear icon in the top right corner of the Performance tool.
Using the CPU dropdown, simulate a 4x or 6x slowdown.

Even though the setting is in the Performance tool, you don't need to record a performance trace for the slowdown to take effect. As soon as a slowdown value is set, it takes effect immediately.

See the size of the transferred data for images, scripts, or other resources

2023-02-16T00:00:00.000Z

To know how much data your website transfers between the server and the client to display images, or scripts, or anything else:

Open the Network tool.
Refresh the page to make sure the list of requests appears in the tool.
Filter the list of requests to only what you're interested in:
- For example, to see only images, click the Img tag in the toolbar (or Images in Firefox).
- Or, to see only JPEG image files, enter .jpg in the Filter text box (to learn more about filtering, see Filter requests in the Network panel by status code, mime type and more).
- To see only JavaSript files, click the JS tag in the toolbar.
Look at the transferred size in the status bar at the bottom of the Network tool. The first number is the amount of data transferred for the filtered resources displayed in the tool.

In the screenshot below, the CSS and JS tags have been checked in the toolbar, filtering the list of resources down to just stylesheets and JavaScript files, and the status bar shows that these resources amount to 73.8kB total.

View console logs from non-Safari browsers on an iPhone

2023-02-07T00:00:00.000Z

Using the about:inspect special page you can see your website's logs in Chrome or Edge running on iPhone!

This is important because debugging a webpage that's running in Safari on an iPhone isn't hard, but debugging the same webpage when it's running in Chrome or Edge on an iPhone is impossible, and sometimes there are pages that may work in Safari, but not in Chrome or Edge.

The former requires connecting your iPhone to a Mac via USB, enabling the WebInspector tools on the Mac, and connecting from Safari desktop to Safari mobile (learn more at Enabling Web Inspector).

The latter, however, is not possible. Even if Chrome and Edge use the webkit webview on iPhone, Apple just doesn't let you connect to these webviews from your Mac. Because the webview-version of webkit is subtly different from the version of webkit that powers Safari, it's possible for your webpage to work in Safari but not in Chrome or Edge, even on the same iPhone.

Thankfully, here is a way to at least see your console logs from these browsers, which is better than nothing:

In Chrome or Edge on iPhone, open a new tab and go to about:inspect.
Click Start Logging.
Keep this tab open and open a new one.
In the new tab, go to the site that you need to test and run the user scenario that will trigger a the console logs you need to see.
Return to the previous tab. Your logs are now displayed on the about:inspect page.

Disable abusive debugger statements that prevent inspecting websites

2023-02-02T00:00:00.000Z

Some websites make it impossible to use DevTools by adding debugger statements in their code.

The statements don't do anything for normal users, but as soon as DevTools is opened, the JavaScript execution pauses, and this makes it impossible to debug or inspect the site as normal.

To disable the abusive debugger statement:

In Firefox, Chrome, and Edge #

Open the Sources tool (or Debugger tool in Firefox).
Right-click the line number gutter, right next to the debugger statement.
Either click Never pause here.
Or create a new Conditional breakpoint, and enter false as the condition for this breakpoint.
Refresh the page.

Now, everytime this line of code is executed, the nasty debugger statement will be ignored and the page will run normally!

Thank you François for the tweet and Pankaj Parashar for the tip about using the Never pause here option.

In Safari #

Open the Sources tool.
At the top left of the tool, in the list of breakpoints, click the arrow next to Debugger Statements.

Any further debugger statement will be ignored.

Emulate color schemes

2023-01-13T00:00:00.000Z

In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers using a light or a dark theme in their operating system. This is useful to style your website in a way that better blends with the rest of the operating system and respects the user's preference.

However, it can be a pain to test since you have to go in the operating system's settings and change the theme there. This can be slow and you might not actually want to change your entire theme just to test a website.

DevTools to the rescue! With DevTools, you can emulate a different color scheme just for the inspected page. All browsers support it, but it's slightly different in each one of them.

In Firefox:
1. Open the Inspector tool.
2. In the toolbar of the Rules sidebar tab, use the light and dark color scheme buttons.
In Edge or Chrome:
1. Open the Elements tool.
2. In the toolbar of the Styles pane, open the Toggle common rendering emulations menu (it looks like a paint brush).
3. Choose one of the prefers-color-scheme options.
In Safari:
1. Open the Elements tool.
2. In the toolbar of the tool, click the emulation button and choose a color scheme.
In Polypane:
1. Next to the pane you want to change, click the emulation icon in the pane header.
2. Click the Media tab.
3. Choose a scheme in the prefers-color-scheme toggle.

Simulate multiple devices that are kept in sync

2023-01-06T00:00:00.000Z

Instead of simulating devices one by one and switching between them, Polypane supports testing on multiple simulated devices and viewports at the same time.

It lets you test different simulated devices, viewports and media query features (like light and dark mode) side-by-side while keeping all your interactions (like clicks, hovers and keyboard input) in sync across all devices. This means anything you do in one device happens in all of them.

Learn more here.

Show web vitals

2023-01-06T00:00:00.000Z

Web vitals are a set of metrics that help you determine how well-built your page is. You can learn more about them here. These scores can be obtained with various online checks like PageSpeed Insights.

In Polypane you can show the current web vitals score of a page and compare it to global averages (CrUX data), as well as find out which parts of the page contribute to your scores.

To turn them on:

Open the Settings menu
Toggle Web Vitals Status
Each pane now shows a small icon that will change from a circle to a square to a rectangle depending on your web vitals score.
Hover the icon to show an overview:

In the overview you will find for each web vital the score for the current page and a bar chart of what percentage of visits were good, needed improvement or were bad. Click the Eye icon in front of a web vital, when available, will show which elements contributed to that score. Learn more here.

Manipulate global objects on page load, before other scripts run

2023-01-06T00:00:00.000Z

When a page loads, and all of its global objects are ready, but before the JavaScript code of the page actually kicks-in, is a great time to inject debugging code. For example, it might be useful to replace global functions with ones that contain altered code.

Safari lets you do this by creating an Inspector Bootstrap Script. This script is guaranteed to run after JavaScript global objects have been created, as long as DevTools is opened.

To create a bootstrap script:

Open the Sources tool
At the bottom of the sidebar, click Add resource (+).
Choose the Inspector Bootstrap Script type.
Write the code you need.

To learn more, see Inspector Bootstrap Script on the webkit blog.

Autofill forms for testing

2023-01-06T00:00:00.000Z

In Polypane you can right-click any form on the page and select Autofill form to add dummy values to all input elements. This prevents you from having to go field-by-field to fill in all required fields while developing or testing forms. It also supports clearing a form at once by selecting Clear form from the same context menu.

Learn more here.

Reload a page when there's changes on disk

2023-01-05T00:00:00.000Z

While working on a page locally and you're not using a hot reloading dev server, you need to reload the browser yourself to see the change. You need to do this every time you save a file. Wouldn't it be great if this happened automatically?

Polypane contains a Live reload panel that lets you target a folder, and any change in that folder will either reload the page, or replace just the CSS or image file that you changed without reloading the rest of the page. This way you wont have to leave your code editor even when working on a plain HTML or CSS file and the browser will keep up to date.

Open the Live Reload panel:

Right-click the reload button.
Select Live reload.
In the configuration screen (see screenshot below) select a directory and click Start watching.
The reload button will show a lightning bolt when live reloading is active.

There are specific options to tweak, like which file system events to listen for, how long to wait before reloading (to account for things like SASS compilation time) and whether to show notifications of which files changed. Learn more here.

Test your PWA protocol handlers

2023-01-04T00:00:00.000Z

Progressive Web Apps (PWA) can register themselves to handle URIs with pre-defined or custom protocols (such as mailto, geo, or web+foo). This is a great capability that makes it possible for installed PWAs to feel more like real apps.

To learn more about how to register a PWA as a protocol handler, see Handle protocols in Progressive Web Apps or URL protocol handler registration for PWAs.

However, testing your protocol handlers can be difficult. Thankfully, DevTools in both Chrome and Edge, provide a nice little tool that makes it all a lot easier.

To test your handler:

Make sure your PWA is installed first.
Open your PWA in a browser tab, and open DevTools.
Open the Application tool and then click Manifest.
Scroll down to the Protocol Handlers section.

If you see a green checkmark, that means your protocol handlers were detected correctly.
Use the dropdown to select the protocol you want to test, and the textfield to type the rest of the URI.
Click Test protocol.

Your installed PWA should now be launched automatically, and you can test your protocol handling code.

See formatted JSON responses

2023-01-04T00:00:00.000Z

Edge (starting with 110), Firefox and Polypane all have a very nice JSON viewer tool that makes it easy to view JSON responses from your server directly in the browser window.

You don't even need to open DevTools for it to work! Just enter the URL to a JSON response in a browser tab, in Edge, Firefox or Polypane, and instead of getting the raw text back, the JSON will be formatted and highlighted.

You can try it out with this sample JSON response, or these JSON test files.

Note that in Firefox and Polypane, the JSON viewer has a few more options not yet available in Edge:

Search within the response.
See the raw text.
See the headers.
Save the file locally.
Expand and collapse specific sections (Polypane only)

Emulate idle detection states

2023-01-04T00:00:00.000Z

The Idle Detection API is useful for web developers to detect when the user isn't interacting with their device. This can be useful for chat applications, for example, to mark the user as away.

Note: this API is only available on Chrome, Opera, and Samsung Internet.

The problem is testing the code that uses this API can be tricky, or even impossible. In order for your device to be idle, you need to stop using the mouse and keyboard. But in order to check that the code works correctly, you need to interact with the browser DevTools in some way.

Thankfully, Chrome has a nice little feature in its DevTools to emulate various idle detection states. Here's how:

Using the Command Menu, open the Sensors tool.
Scroll down and look for the Emulate Idle Detector state section.
Choose one of the states to test if your code does what it's supposed to.

Learn more about the Idle Detection API and the corresponding DevTools support.

Debug unwanted scrollbars

2023-01-04T00:00:00.000Z

Scrollbars can sometimes appear on a webpage unexpectedly. When this happens, finding which HTML element is the cause of the scrollbars isn't always straightforward. DevTools provides features that help you debug unwanted scrollbars.

Firefox #

In the DOM tree in the Inspector tool, scroll badges appear next to elements that have scrollbars.

The scroll badges help you identify which elements in the DOM tree are scrolling.

Click a scroll badge to highlight the descendant elements that are causing the scrolling parent to overflow. The Inspector reveals the overflowing elements:

Once you know which elements are the root cause of the problem, use the Rules sidebar pane to figure out which CSS properties are causing the overflow.

To learn more, see Debug scrollable overflow.

Chrome, Edge, and Safari #

Similar to Firefox, in the DOM tree in the Elements tool of Chrome, Edge, or Safari DevTools, scroll badges appear next to elements that have scrollbars. The scroll badges help you identify which elements in the DOM tree are scrolling.

Polypane #

Polypane displays an Horizontal overflow detected icon below pages that have a horizontal scrollbar. The Horizontal overflow detected icon helps you understand why a page has a horizontal scrollbar:

To find the elements that are causing the horizontal overflow in the page, click the icon. Polypane finds the elements and highlights them in red:

To fix the overflow problem, inspect the highlighted elements.

To learn more, see Horizontal overflow detection.

Find the most expensive CSS selectors

2022-12-14T00:00:00.000Z

When it comes to improving web rendering performance, we often spend time working on JavaScript code. But CSS has an important role to play too in how fast a web page renders. CSS selectors, in particular, can sometimes be slow for the browser engine to match to the DOM of the page, and this can become a big problem when the web page has a large DOM tree, a lot of CSS rules, and where the DOM changes often.

Chrome and Edge have a useful feature in the Performance tool to investigate inefficient CSS selectors, called Selector Stats.

So, before blindly rewriting your CSS selectors by following random guidelines you might have found on the web, measure the performance of slow scenarios on your web page, make sure that CSS is indeed having a negative impact, use Selector Stats to get ideas for what to improve, improve your code, and then measure again.

To use Selector Stats in Chrome or Edge:

Open the Performance tool.
Click Capture settings in the tool's top toolbar, and then select the Enable CSS selector stats checkbox.
Start a new performance recording, run through your slow scenario, and then stop the recording.
In the captured profile, identify a long-running Recalculate Style event and select it.
In the bottom section of the Performance tool, open the Selector Stats tab.

The Selector Stats tab displays the list of CSS selectors that the browser engine had to (at least attempt to) match during this Recalculate Style event.

Sort the table by Elapsed time to find the selectors that took the most time for the engine to match. Make sure to review the Match Attempts and Match Counts columns too. For example, if the browser engine attempted to match, say, 1000 elements, but ended up really matching 0 elements, then this selector is likely too broad and could be optimized. Finally, make sure to review the % of slow-path non-matches column. This column tells you the ratio of elements that ended up not matching the selector, and for which the browser engine had to use a less optimized code path to match.

To view the Selector Stats for the entire profile instead of just a single Recalculate Style event, deselect any Recalculate Style event that you have selected by clicking in an empty area of the profile.

List all supported console functions

2022-11-23T00:00:00.000Z

You've probably already used console.log() in your code to print debugging values to the Console tool in DevTools. But the console namespace actually has many other functions too!

To list them all, open the Console tool and type:

console.log(console);

Hide or pin the information tooltip while inspecting page elements

2022-10-27T00:00:00.000Z

When selecting elements from the page using the inspect tool, the hovered elements get highlighted, and an information tooltip follows your mouse around and gives you information about the hovered element.

You can hide, or pin this information tooltip in Chrome or Edge.

Start the inspect tool by clicking Select an element in the page to inspect it (the little cursor icon in the top left corner of DevTools).
Start hovering over elements in the webpage, elements get highlighted and the information tooltip appears.
Hold the Ctrl key on your keyboard, the information tooltip disappears.

Start the inspect tool by clicking Select an element in the page to inspect it (the little cursor icon in the top left corner of DevTools).
Start hovering over elements in the webpage, elements get highlighted and the information tooltip appears.
Hold the Ctrl and Alt keys on your keyboard, the highlight and information tooltip are pinned on the current element, and you can move your mouse around without losing this information.

Understand flexbox item sizing

2022-10-26T00:00:00.000Z

Flexbox is a great way to easily distribute elements and empty space in a row or a column, and create interesting layouts.

It only takes a couple of CSS properties to create nice layouts that automatically adapt to the available space.

But, all of this power also means that the complexity that the browser engine deals with is hidden from you, the developer. While this is, in general, fine, it tends to become an issue when your flexbox layout isn't doing the things you want it to do.

If you've ever used flexbox, there might have been times when you've wondered: why is this element this big?, or why is this element not growing to fill that gap?

Firefox has a wonderful tool that can help with this.

Right-click on the flexbox item that you're interested in and select Inspect.
DevTools opens up, and the Inspector tool is displayed, with the corresponding element selected.
Click Layout in the Inspector sidebar.

You now have a diagram that represents the size of the flex item, with some annotations that might be useful for understanding why this particular item has been sized this way.

Here is the information that might be displayed:

Content size: the size the flex item needs to display its content.
Base size: the size that corresponds to the flex-basis property (or width in row direction, or height in column direction). That's the base size that you wanted to give to this element, before any shrinking or growing happened as part of the flexbox layout.
Flexibility: whether the item grew or shrank and by how much. Note that this can also mean how much the item wanted to grow or shrink, but it might not correspond to the final size. See below.
Max or min size: whether the item has a max or min size defined (e.g. using min-width or max-width in row direction). This can clamp the item, even if it wanted to grow or shrink more.
Final size: the actual final size of the item.

Customize keyboard shortcuts

2022-10-26T00:00:00.000Z

DevTools comes with tons of keyboard shortcuts. Some are well known (like F12 to open DevTools), but there are many others which you might not be familiar with, and which could make your life easier.

Chrome and Edge have a screen where you can not only find all of the keyboard shortcuts, but also customize them. Chrome enabled this screen in version 107, and Edge has had it for a longer while.

To list the shortcuts:

Open DevTools (F12).
Go to the Settings by pressing F1.
Click Shortcuts in the sidebar.

You can also find the full list of shortcuts here: Edge, Chrome, Firefox, Safari.

To customize the shortcuts:

Hover one of the shortcuts and click the edit icon (the icon looks like a pencil).
Press the new key combination you want for this shortcut.
You can then save the new shortcut, cancel your change, or revert to the shortcut's initial value.

Re-use scripts as snippets

2022-10-25T00:00:00.000Z

The Console is great to write short JavaScript expressions that read from the document or manipulate it. But it's also a terrible editor.

You can actually use a full editor in Edge, Chrome, and Safari to write more complex scripts and run them in the context of the current page and even keep them for later re-use.

Note: if you're looking for a way to do this in Firefox, there isn't currently one. However, you can write code on multiple lines which helps a lot already, and even search through previous Console expressions by pressing F9 in the Console tool.

In Edge & Chrome #

In Chromium-based browsers, these are called snippets and you can access them in the Sources tool by clicking Snippets in the left hand side toolbar (you may have to use the >> to reach them).

You can create as many named snippets as you like and remove ones you don't need any more.

Snippets have full access to the window object and you can use any of the console API methods in them too. For example, this script would replace each image in the document with its alternative text:

$$('img').forEach(i=>{
   let txt = document.createElement('span');
   txt.innerText = i.alt;
   i.parentNode.replaceChild(txt,i);
   console.log(i.alt);
});

You can run snippets by pressing ctrl+Enter (or cmd+Enter on mac) or using the button on the bottom of the editor.

Even better, you can use the Command menu to run snippets more easily. Simply press ctrl+P (or cmd+P on mac) and type ! followed by the name of your Snippet.

In Safari #

In Safari, these scripts are called Console Snippets and can also be created from the Sources tool by clicking the + icon at the bottom of the tool, and choosing Console Snippet....

Simulate different devices and screen sizes

2022-10-19T00:00:00.000Z

All browser DevTools have a built-in mode that you can use to test a webpage under different screen sizes and device capabilities.

As a web developer, it is very important to realize that your website won't only be used on one type of device. People browse the web with many different device types, from small phones, to large desktop monitors, and everything in between.

Not only do the devices people use have different screen sizes, but they can also have different pixel densities, support for touch input, network speeds, and more.

Browser DevTools make it easy to simulate how a webpage might render under different screen sizes and device capabilities. However, note that this is only a simulation, and you should always test your webpage on the real device too. For example, even if the device mode in Chrome DevTools lets you simulate an iPhone screen, it doesn't actually render the webpage with the same rendering engine as the iPhone would. So, always test on the real device too.

Available features #

This simulation mode comes with the following features (more might be available depending on the browser you're using):

Resize the simulated viewport size by hand.
Choose one of the pre-defined devices to simulate.
Create your own simulated devices.
Capture screenshots.
Throttle the network speed to test your website on slower connections.

Start simulating #

In Chrome #

To enable the device mode in Chrome DevTools, click the Toggle Device Toolbar button or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

In Edge #

To enable the device mode in Edge DevTools, click the Toggle device emulation button or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

In Firefox #

In Firefox, you don't need DevTools to be opened to simulate devices. Click Open application menu > More tools > Responsive design mode, or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

Or, if you're in DevTools, click the Responsive Design Mode button, or press Ctrl+Shift+M (or Cmd+Shift+M on macOS).

In Safari #

In Safari, you don't need DevTools to be opened to simulate devices. Click Develop in Safari's menu bar, and then click Enter Responsive Design Mode, or press Ctrl+Command+R.

If you aren't seeing the Develop menu item, enable it first (this only needs to be done once):

In Safari, in the menu bar, go to Safari > Settings.
Select the Advanced tab.
Click Show features for web developers.

In Polypane #

Simulating different screen sizes is Polypane's default behavior. Polypane is the only browser DevTools that allows you to see multiple screen sizes side by side too. To learn more, see Simulate multiple devices that are kept in sync.

Ignore JavaScript code to ease debugging

2022-10-17T00:00:00.000Z

Debugging JavaScript can quickly get out of hand when you have a lot of code and many functions that call each other.

What's even worse is when a lot of this code isn't even yours. This can happen when you use frameworks or libraries. You don't really want to debug the library code, but sometimes it gets in the way when trying to step through your own code while using breakpoints.

To help with this, you can ignore third-party scripts (like library source files) in DevTools. When ignored, those files don't appear in your callstacks when debugging, and you don't step through them anymore.

To ignore a script in Chrome or Edge: right-click anywhere in the file and click Add script to ignore list. Learn more on the Chrome docs or the Edge docs.
In Firefox: right-click in the file and click Ignore source. Or click the Ignore source button in the bottom left corner of the file (learn more).

In Firefox, you can go even further than this and ignore parts of a script only. Maybe you have a utility function in your file that gets called over and over again but isn't related to what you're trying to debug.

To ignore part of script only in Firefox:

Select the code you want to ignore.
Right-click the select and click Ignore lines.

Edit JavaScript functions while debugging to test a quick fix

2022-10-17T00:00:00.000Z

Sometimes, when debugging JavaScript code in DevTools, you may want to test a quick change and see whether that fixes the bug.

Usually, this involves the following steps:

Pause at a breakpoint, or an error.
Look at the code and local variables to understand the problem.
Go to your editor, make the change to the code, and save it.
Go back to the browser, reload the page, hit the breakpoint again (which may involve doing a bunch of other steps first).
Check if the fix was right.

Now in Chromium-based browsers, you can test those quick fixes much faster without ever leaving DevTools:

Pause at a breakpoint, or an error.
Look at the code and local variables to understand the problem.
Make your change directly in the source shown in DevTools, and press Ctrl+S (or Cmd+S) to save it.
The function is automatically restarted, with the new code, and you can verify your fix right away.

This means you don't need to leave DevTools, make your change to the original code, reload the page, and wait to hit the breakpoint or error again!

Install or create extensions to customize DevTools

2022-10-14T00:00:00.000Z

There's a lot of tools in DevTools already, probably more than you use. But in some cases, you may need very specific tools that aren't available by default.

Thankfully, DevTools can be extended with custom tools! You can either download extensions others have created to customize the DevTools UI, or even create your own.

For example, you can download the React DevTools extension for Chrome, Firefox, or Edge.

All browsers have their own extension stores where you can find other DevTools extensions: Chrome, Edge, Firefox, Safari.

To go further, you can create your own extensions. Here are a few links to learn about developing your own extensions:

Use DevTools in another language

2022-10-04T00:00:00.000Z

If you want to use DevTools in another language than English, you can do it across all major browsers.

In Firefox, DevTools will always match the language of the browser, so if you downloaded Firefox in French for instance, then DevTools will be in French too.

In Edge & Chrome, you can choose between English and the language the browser is in. To do so,

Go to Settings.
Go to Languages.
Add the language of your choice and select "Display Microsoft Edge in this language".

And then in DevTools:

Open the settings (press F1 or click the cog icon).
Click the "Match browser language" checkbox.

Alternatively, you can only change the language of the DevTools using the following steps,

Open DevTools Settings (F1 or Shift+?)
Preferences > Appearance > Language. Select a language and then click Reload DevTools.

For Safari, you can set the app level language in MacOS by using System preferences > Language & Region > Apps.

Add the Safari app and choose the language. Restart Safari. and then the browser & the DevTools will use the selected language.

Access results from recent Console evaluations

2022-09-29T00:00:00.000Z

Imagine you evaluate a long expression like $$('*').map(el => Object.values(el.attributes).map(attr => {return {name: attr.name, value: attr.value}})) which extracts the attributes from all of the DOM elements on the page.

Now imagine you want to access one element in particular from the giant returned array. You could just type the same expression again and add [14] at the end of it to access the 15th item.

Or, you can use this great Console trick to reference the previous result without having to type it again:

To access the last result just type $_ in the Console. In the above example, you would therefore type $_[14].

Safari goes even further and provides shortcuts from $1 all the way to $99 to access previous results too. So if you had evaluated many expressions in the Console before, you can refer to their results by using one of the $n shortcuts where $1 is the first evaluated expression, $2 is the second one, and so on (more information here).

Simulate a different latitude/longitude geolocation

2022-09-15T00:00:00.000Z

If your website has features that depend on the geographic location of your users, you can test these features by simulating different geolocations right from DevTools!

Chrome and Edge DevTools have a built-in way to simulate any location:

In DevTools, press ctrl+shift+P (or cmd+shift+P on mac) to open the Command Menu.
Type "Sensors" in the command menu and press Enter.
In the Sensors tool, find the Location drop-down.
Choose any of the preset locations (or create your own by clicking Manage) and refresh the webpage.

In the following screenshot, the webpage is google.com and the location was set to São Paulo, Brazil. After a refresh, the google.com homepage shows the text in Portuguese.

Find inactive CSS styles

2022-09-02T00:00:00.000Z

Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can be frustrating.

Indeed, there are many cases where a CSS declaration has no effect on an element. One common example is using width on an inline element. While this example may be known to most, there are so many different CSS properties and possible ways to combine them that it's impossible to know all of the cases where CSS won't have any effect.

Firefox innovated with very cool feature that helps find these "inactive" CSS properties, and Chromium-based browsers now also have something!

In Firefox:

Select an element in the Inspector panel.
Look at its applied styles in the Rules panel.
Inactive properties are greyed out and have an information icon next to them.
Hover over the information icon to know why the property is inactive.

In Chrome or Edge:

Make sure the feature is enabled:
- Use Chrome or Edge 106 or later.
- In DevTools go to the Settings (press F1).
- Select the Experiments tab, enable the Enable CSS Authoring hints for inactive rules, deprecated properties, etc. checkbox, close the Settings, and reload DevTools when prompted.
Select an element in the Elements tool.
Look at its applied styles in the Styles panel.
Inactive properties have an information icon next to them. If you see one, that means an authoring hint is available for this property.
Hover over the icon to reveal the tooltip with information about the property.

Note: this is not an audit tool! It won't help you remove useless CSS rules throughout your codebase. Its value is when inspecting specific elements only, to easily detect when a given CSS property isn't doing anything on it.

Get the recently selected DOM nodes in the console

2022-08-31T00:00:00.000Z

If you type $0 in the Console tool, in any browser, the currently selected DOM node is returned. This is very handy. To learn more, check Get the selected element in the console.

On top of this, in Edge, Polypane and Chrome, the $1, $2, $3, and $4 shortcuts are also defined!

They can be used to access the recently selected DOM nodes:

$1 returns the DOM node you selected just before the currently selected one.
$2 returns the DOM node you selected before that.
And so on!

Inspect CSS animations

2022-08-17T00:00:00.000Z

Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions, and Web animations. These tools not only help you debug animations, but also let you modify the various animation properties.

For Chromium browsers (Chrome/Edge)

Open the Command Menu (Cmd+Shift+P or Ctrl+Shift+P), type "Show Animations", and press Enter.
This will open the Animations tool.

Next, trigger an animation in the webpage to record it in the tool. The Animations tool is divided into 4 sections:

Controls: From here, you can clear all currently captured animation groups, or change the speed of the currently selected animation group.
Overview: Select an animation group here to inspect and modify it in the Details pane.
Timeline: Pause and start an animation from here, or jump to a specific point in the animation.
Details: Inspect and modify the currently selected animation group like adding delay or changing timing duration.

For Firefox

Inspect an element that uses an animation in the Inspector tool (or a parent of that element) and open the Animations pane from the right sidebar.

Next, trigger the animation to view its timeline in the Animations pane.

Use the draggable vertical line to scrub through the timeline or jump to a specific point. You can also change the playback speed and do much more.

Remove annoying page overlays and other elements

2022-08-09T00:00:00.000Z

A lot of websites these days get covered with overlays and crammed with lots of ads and other things that make it hard to just read the content of the page.

To get rid of an annoying overlay, or any other element for that matter:

Open DevTools (press F12).
Start the inspect tool by clicking the pointer icon in the DevTools toolbar.
On the webpage, select the element which you want to remove. As you hover elements, they will get highlighted. Use this highlight to make sure you're selecting the right element.
Now, with the element selected in the Inspector/Elements panel, just press Delete on your keyboard to remove the element.

Credits go to Chris Heilmann for this tip and other cool DevTools tips for non-developers, which you can find here: web cheatcodes.

Copy CSS selector of an element

2022-07-26T00:00:00.000Z

To uniquely identify an element that lacks an identifier, so that you can reference the element in JavaScript and other places, use DevTools' ability to copy unique CSS selectors.

All DevTools have the option to build a unique CSS selector for an element and then copy it to the clipboard:

In Chrome and Edge:

In the Elements tool, right-click an element, and then select Copy > Copy selector.
In Firefox:

In the Inspector tool, right-click an element, and then select Copy > CSS Selector.
In Safari:

In the Elements tool, right-click an element, and then select Copy > Selector Path.
In Polypane:

In the Elements panel, right-click an element, and then select Copy Selector.

This copies a unique CSS selector for the element, which you can then use in your JavaScript code, for example, to reference the element:

document.querySelector("#maincontent > div > h2");

Copy an element's JavaScript path

2022-07-22T00:00:00.000Z

JavaScript often needs references to DOM nodes on the page. Getting a reference is sometimes easy with document.getElementById() or similar. Other times however, a more complicated CSS selector needs to be created and used with document.querySelector().

To automatically get the right JavaScript expression to use for any node:

Find the node you are interested in in the Elements tool.
Right-click the node and select Copy > Copy JS path.
The right document.querySelector() expression is now in your clipboard. You can paste it anywhere you need it.

Jump from a label `for` attribute to the linked input (and more)

2022-07-01T00:00:00.000Z

In HTML, it's possible for certain attributes to reference other elements by their IDs. For example, a <label>'s for attribute can be used to link the label to the input it's associated with:

<label for="foo">Label</label>
<input id="foo">

Other cases of attributes referencing the ID of other elements include:

<button form="formID">
<input list="datalistID">
<td headers="header1ID,header2ID">

In DevTools, to jump from an element that references another element's ID attribute, to that other element, use the following steps:

In Firefox, in the Inspector tool: hold Cmd on MacOS or Ctrl on Windows or Linux, and then click the attribute.
In Polypane, in the Elements panel: click the attribute.

The referenced element is selected in the DOM tree.

In the above <label>/<input> example, using the above steps on the foo value of the for attribute selects the input element.

Thank you to Manuel Matuzović for sharing on twitter.

Fix color contrast issues using the element tooltip

2022-06-30T00:00:00.000Z

There are multiple ways to detect and fix color contrast issues with DevTools, but here is a nice one to keep in mind. It's not straightforward to use and takes a few steps, but makes it very nice to see the resulting contrast ratio as you change the color value.

Thanks to Adam Argyle for sharing this on Twitter.

In the Styles panel, click on the color value you want to change, to focus the field.
Press Ctrl+Shift+C (or Cmd+Shift+C on Mac) to start the inspect tool.
Position your mouse over the element which you are changing the color for. Don't click anywhere, we want to keep the color value field focused, just hover over the element so the element tooltip appears.
Now change the color value with the keyboard and check the contrast ratio in the tooltip as you do so.

Related tips:

Empty the cache and hard refresh

2022-06-14T00:00:00.000Z

Here is a nice tip to quickly empty your cache and refresh the page, in order to test new code changes:

In Chrome, or Edge, open DevTools (F12). This step is not needed for Polypane.
Right-click on the page refresh icon, in the browser toolbar.
Click Empty cache and hard refresh.

Quickly spot out-of-viewport elements

2022-06-02T00:00:00.000Z

Sometimes, either by accident or on purpose, HTML elements end up outside of the visible browser viewport. When they do, it can be really hard to find them in DevTools. Indeed, the DOM tree in the Elements tool is nice and all, but it's not super easy to navigate especially when it's huge and deeply nested.

Here's a nice tip to quickly find out-of-viewport elements, by using the 3D View tool in Edge DevTools:

Open DevTools in Microsoft Edge (press F12).
Open the 3D View tool by clicking the More tools (+) button in the toolbar at the top and choosing 3D View.
In the left sidebar, choose the DOM tab.
Zoom and pan the 3D scene to find out of viewport elements!

Edit an element's attributes and tag name with the keyboard

2022-05-17T00:00:00.000Z

Using the keyboard can be faster than using a mouse in certain cases (and for some people). One such case is editing an element's tag name and attributes in DevTools.

To do this, select an element in the Elements tool (called Inspector in Firefox) and:

Press Enter to start the editing mode. The first attribute of the element becomes editable with the keyboard! (Note: on Firefox, the tag name becomes editable first).
After you have made the necessary changes, you can:
- Either press Enter again to commit the change.
- Or, press Tab or Shift+Tab to move to the next or previous attribute, or the tag name if there are no other attributes.

Create your own simulated devices

2022-05-16T00:00:00.000Z

You can simulate various different devices from DevTools, to get an idea of how your webpage might render on those devices (note that this is only a simulation, the tool only changes the screen dimensions, touch event handling, and user agent string, but ultimately, the rendering of the webpage is still done by the browser you are using).

But what's even better, is that you can create your own simulated devices. This is useful if what's available in the list isn't enough for you. Here's how:

Open DevTools (press F12), and start the device mode (on Edge and Chrome, click the Toggle device emulation button, on Firefox, click Responsive Design Mode).
In the device simulation screen, expand the device drop-down and click Edit.... The device customization screen appears.
From this screen, you can check or uncheck devices to customize the device drop-down, and you can click Add Custom Device... to add your own devices.
Choose a device name, dimensions, dpr, and user agent string, and submit. Your new device should now be available in the device drop-down!

In Polypane these steps are not needed. Double-click anywhere to add a new device and configure its settings from the Emulation options.

Discover all the tools

2022-05-13T00:00:00.000Z

DevTools is confusing! There's so much functionality packed in such a small UI. Did you know that Chrome DevTools had more than 30 individual tools! Yes, that's right, 30.

It's hard for both new users and more experienced users. New users may feel overwhelmed, and more experienced users will tend to stay in the same few tools and not know that others exist.

So here is a list of all the panels available in DevTools, per browser! Want to test your knowledge? Play What's That Tool?

Firefox (📕Docs)
- Accessibility: Navigate the internal accessibility tree that assistive technology uses to present web pages to users.
- Application: Debug Service Workers and Web App Manifests.
- Console: View log messages, errors, and execute JavaScript expressions.
- Debugger: Debug JavaScript code.
- DOM: Navigate the list of DOM properties on the page.
- Inspector: View the DOM tree, authored and computed styles, edit CSS, and get layout information.
- Memory: Capture and navigate memory snapshots of the current page.
- Network: View network traffic on the page and inspect individual HTTP requests and responses.
- Performance: Measure the runtime performance of the page and understand bottlenecks.
- Storage: View and edit cookies, local storage, cache, etc.
- Style editor: Edit stylesheets on the page and create new ones.
Chrome (📕Docs)
- Animations: View and edit CSS animations, transitions, and Web Animations API animations.
- Application: Debug your PWA Service Workers, Web Apps Manifest. View and edit IndexedDB, local storage, cache. Debug background services such as notifications and background sync.
- Changes: See all the CSS changes you made on the page in DevTools.
- Console: View log messages, errors, and execute JavaScript expressions.
- Coverage: Generate code coverage reports for JavaScript and CSS to detect how much code is used.
- CSS overview: Get a summary of the CSS styles on the page, including colors, contrast ratio, and fonts.
- Developer resources: missing, please help by editing this file
- Elements: View the DOM tree, authored and computed styles, edit CSS, and get layout information.
- Issues: Detect common issues with your webpage.
- Javascript profiler: Record JavaScript code execution on the page for some time and then view time spent in each function.
- Layers: See the various compositing layers the browser engine created based on your page's DOM and CSS code.
- Lighthouse: Run Lighthouse audits on your page.
- Media: missing, please help by editing this file
- Memory: Capture memory snapshot of the current page and understand what retains objects in memory.
- Memory inspector: Inspector JavaScript ArrayBuffers.
- Network: View network traffic on the page and inspect individual HTTP requests and responses.
- Network conditions: Modify certain network conditions such as cache, speed, and user-agent.
- Network request blocking: Define custom patterns for URLs you want to block.
- Performance: Analyze your page's runtime performance, including CPU usage, GPU activity, memory usage, refresh rate, user interactions, layout and graphic engine operations, and more.
- Performance insights: Get actionable performance insights about your page.
- Performance monitor: Monitor your page's performance live with CPU usage, memory size, DOM node numbers, etc.
- Protocol monitor: Monitor the CDP (Chrome DevTools Protocol) traffic that DevTools relies on to debug your page.
- Quick source: A simpler version of the Sources panel.
- Recorder: Record user scenarios in the tab, and easily replay them automatically.
- Rendering: Emulate different rendering modes: media features, color vision deficiencies, and more.
- Search: Search within the resources loaded on the page.
- Security: Get an overview of the page's security aspects.
- Sensors: Simulate device location, orientation and touch events.
- Sources: View the currently loaded resources on the page, edit stylesheets, and debug JavaScript code.
- Web audio: View the audio node graph.
- Webauthn: Create virtual authentication environments to debug your web authentication flows.
- What's new: Get highlights from the most recent DevTools update.
Edge (📕Docs)
- 3D view: View your page's DOM, z-index stacking, or layers tree in 3D.
- Animations: View and edit CSS animations, transitions, and Web Animations API animations.
- Application: Debug your PWA Service Workers, Web Apps Manifest. View and edit IndexedDB, local storage, cache. Debug background services such as notifications and background sync.
- Changes: See all the CSS changes you made on the page in DevTools.
- Console: View log messages, errors, and execute JavaScript expressions.
- Coverage: Generate code coverage reports for JavaScript and CSS to detect how much code is used.
- Css overview: Get a summary of the CSS styles on the page, including colors, contrast ratio, and fonts.
- Detached elements: Find DOM elements in memory that are no longer attached to the DOM, and record heap snapshots to find what retains them.
- Developer resources: missing, please help by editing this file
- Elements: View the DOM tree, authored and computed styles, edit CSS, and get layout information.
- Issues: Detect common issues with your webpage. The issues are powered by webhint.
- Javascript profiler: Record JavaScript code execution on the page for some time and then view time spent in each function.
- Layers: See the various compositing layers the browser engine created based on your page's DOM and CSS code.
- Lighthouse: Run Lighthouse audits on your page.
- Media: missing, please help by editing this file
- Memory: Capture memory snapshot of the current page and understand what retains objects in memory.
- Memory inspector: Inspector JavaScript ArrayBuffers.
- Network: View network traffic on the page and inspect individual HTTP requests and responses.
- Network conditions: Modify certain network conditions such as cache, speed, and user-agent.
- Network console: Create and manage your API requests and test them whenever you want.
- Network request blocking: Define custom patterns for URLs you want to block.
- Performance: Analyze your page's runtime performance, including CPU usage, GPU activity, memory usage, refresh rate, user interactions, layout and graphic engine operations, and more.
- Performance monitor: Monitor your page's performance live with CPU usage, memory size, DOM node numbers, etc.
- Protocol monitor: Monitor the CDP (Chrome DevTools Protocol) traffic that DevTools relies on to debug your page.
- Quick source: A simpler version of the Sources panel.
- Recorder: Record user scenarios in the tab, and easily replay them automatically.
- Rendering: Emulate different rendering modes: media features, color vision deficiencies, and more.
- Search: Search within the resources loaded on the page.
- Security: Get an overview of the page's security aspects.
- Sensors: Simulate device location, orientation and touch events.
- Source maps monitor: Check where source maps are downloaded from.
- Sources: View the currently loaded resources on the page, edit stylesheets, and debug JavaScript code.
- Webaudio: View the audio node graph.
- Webauthn: Create virtual authentication environments to debug your web authentication flows.
- Welcome: Get help, resources, and latest news.
Safari (📕Docs)
- Elements: View the DOM tree, authored and computed styles, edit CSS, and get layout information.
- Console: View log messages, errors, and execute JavaScript expressions.
- Sources: View the currently loaded resources on the page, edit stylesheets, and debug JavaScript code.
- Network: View network traffic on the page and inspect individual HTTP requests and responses.
- Timelines: Record performance profiles on your page and visualize network requests, layout and rendering operations, user events and JavaScript execution, and CPU usage.
- Storage: View and edit local storage.
- Graphics: missing, please help by editing this file
- Layers: See the various compositing layers the browser engine created based on your page's DOM and CSS code.
- Audit: Run audits on the page.
Polypane (📕Docs)
- Meta: An overview of all meta data, robots.txt, structured data, webmanifest and social media previews
- Outline: View the heading, landmark, image, link outlines, as well as the focus order of the page.
- Storage: An overview of the localstorage, sessionstorage and cookies of the page.
- Accessibility: Run an automated accessibility scan.
- Source: Show a formatted version of the HTML source of the page along with HTML validation.
- Elements: View the DOM tree, authored and computed styles, edit CSS, get layout and accessibility information.
- Console: View log messages, errors, and execute JavaScript expressions.
- Live CSS: Inject CSS into the current page.
- Devtools: Access the regular Chromium devtools. (See above)
- Browse: Open a second URL along your main one
- Workspaces: Save and restore different sets of devices to test on.

Copy an elements styles

2022-05-11T00:00:00.000Z

You can extract all the styles of an element in one go by using the Copy styles feature.

No need to go through all CSS rules and properties that apply to the element in the Styles pane, and manually build the resulting list. With this feature, you can get the whole list at once, with all of the needed styles:

Select the element you want to extract the styles from by right-clicking on it and choosing Inspect.
In the Elements tool, right-click the selected element.
Click Copy > Copy styles.
Paste the result in a text editor and use however you want.

In Polypane,

Select the element you want to extract the styles from by right-clicking on it and choosing Inspect.
In the Elements Panel go to the Computed tab
Click Copy Styles
Paste the result in a text editor and use however you want.

Use document.designMode to spell check your webpage

2022-05-02T00:00:00.000Z

Amelia Bellamy-Royds shared a really cool tip to spell-check a webpage's content from DevTools:

Open DevTools, and go to the Console tool.
Type document.designMode = "on" and press Enter.
Click somewhere on the webpage.
The browser now highlights the misspelled words in red!

Visualize and debug CSS cascade layers

2022-04-20T00:00:00.000Z

Cascade layers is a CSS feature that allows web developers to define their CSS styles in multiple layers and control the order in which these layers apply. Cascade layers are meant to bring an elegant solution to problems we've historically been fixing by using !important or artificially making selectors have higher specificity. To learn more about cascade layers, check out Miriam Suzanne's complete guide on CSS Tricks.

In this tip, let's see how to visualize and debug layers in DevTools. All browser DevTools have support for layers in their Styles/Rules panels, and some browsers have more advanced features.

All browsers #

Open a page that uses cascade layers like this one.
Inspect an element which has styles defined in one of the cascade layers like one of the green links in the above demo.
In the sidebar where CSS rules are displayed (called Styles or Rules depending on the browser), the rules are sorted by cascade layers, with the highest priority layer at the top, and lowest priority at the bottom.
Rules that are part of a cascade layer have a @layer <layername> label next to them.

Chrome and Edge only #

On top of the above, Chrome and Edge have a Layers view that shows the cascade layers in a list:

Open a page that uses cascade layers like this one.
Inspect an element which has styles defined in one of the cascade layers like one of the green links in the above demo.
Click the Toggle CSS layers view button in the Styles panel toolbar (next to the search field) to reveal the list of layers.

Polypane only #

Polypane also has a CSS Layers view that shows the cascade layers in a list:

Open a page that uses cascade layers like this one.
Inspect an element which has styles defined in one of the cascade layers like one of the green links in the above demo.
Click CSS Layers in the Elements panel to reveal the list of layers. The layers that are not dimmed in the list apply to the currently selected element.

Automatically get issues your site has with performance, accessibility, security, compatibility, and others.

2022-04-07T00:00:00.000Z

Edge has a very useful Issues panel that can automatically list a lot of different issues with your site. It can detect common issues related to browser compatibility, accessibility, performance, security, and more.

To see issues with the current page in Edge:

Open DevTools (F12).
Click More tools (+) and click Issues (you can also open the panel by using the Command menu).
Issues are listed in the panel, organized by category, and severity.
At this point, reload the page to make sure all issues are listed, as some of them depend on how your page loads over the network.
You can use the toolbar at the top to filter issues too. The Browser filter, in particular, lets you filter down the compatibility issues to just the browsers you care about.

Learn more about this tool.

Take a screenshot of part of a webpage from the Command Menu

2022-03-25T00:00:00.000Z

The Command menu in Edge and Chrome is a great way to do many of the things you can do in DevTools without having to navigate the UI.

Csaba Kissi shared a great tip on Twitter about the Command menu:

Press Ctrl+Shift+P on Windows or Linux (or Cmd+Shift+P on mac) to open the Command menu in DevTools.
Type "screenshot" to filter the list of commands.
Select the screenshot command you want to use, such as Capture area screenshot to grab a screenshot of a part of the page.

Quickly reference React components in the console

2022-03-25T00:00:00.000Z

Zee shared a great tip on Twitter if you are working with React and have the React DevTools extension installed.

You can use $r in the Console tool to reference the currently selected element in the React DevTools. This is a great way to quickly inspect the props and state of a component.

Start your HTML and CSS prototypes in the browser directly

2022-03-25T00:00:00.000Z

Sometimes I need a blank canvas to prototype an idea with HTML and CSS. Something outside of the website I'm working on. Maybe I need a new layout or component and I'm not sure yet how to do it.

In this case, starting from a blank HTML page makes a lot of sense since I don't have to worry about the rest of the site yet and only focus on my prototype.

Turns out a quick way to do this is to start it directly in the browser, instead of creating a new HTML file somewhere in a dev folder! Here's how I do it:

I open my favorite browser and type something like this in the address bar: data:text/html,<div></div>.

This is a data URL that will tell the browser to just load the HTML content I provided after the data:text/html, prefix, instead of loading a remote website.
I can also write more fancy HTML, maybe add more elements, and attributes. But usually just one div is enough to get me started, because my next step ...
I immediately open DevTools and dock it to the side of the browser window.

I like having it on the side because it gives me a simple way to resize the space available to my prototype by just dragging the splitter between DevTools and the page.
And then that's when the prototyping begin.

Using the Elements/Inspector panel, I can add more elements with the Edit as HTML feature, add and modify attributes by double-clicking them, add classes from the Styles/Rules panel, etc.
When I'm done coding in the browser and feel like I have what I wanted, it's time to export my changes so they don't disappear when close the browser window.
- To export the HTML code, I usually do this: right-click on the <body> element and choose Copy inner HTML.
- To export the CSS code: in Firefox, I open the Changes sidebar panel and click Copy All Changes (learn more), and Chrome/Edge I go to Sources, find the inspector-stylesheet source and copy the content from it.

Here is a quick demo I did 4 years ago showing roughly this workflow. Things have changed a bit, but most of it still applies:

https://www.youtube.com/watch?v=o5wy237B5qc

Fix low color contrast issues

2022-03-25T00:00:00.000Z

With DevTools you can detect low color contrast issues which is great. But Chrome DevTools, Edge DevTools, and Polypane, you can go one step further and fix these issues directly!

In Chrome and Edge #

Here is a tip shared on dev.to by Domi:

Find an element which text color doesn't have enough contrast with its background color.
Select this element in the Elements tool.
Click on the little color swatch next to the color value in the Styles pane.
A color picker will appear. Expand the Contrast ratio section.
A couple of useful lines appear in the color gradient. These lines represent the minimum contrast ratio required for the text to be readable.
You can also click on the little reload icons next to the AA and AAA labels in the Contrast ratio section to let DevTools suggest a color that would pass the AA or AAA requirements.

In Polypane #

In Polypane, these suggestions are made inline on the page itself when enabling the Contrast checker debug tool.

Debug popups that appear on hover using the debugger statement

2022-03-25T00:00:00.000Z

In Debug popups that appear on hover using JS we described how to pause the debugger to inspect popups that appear on hover and disappear as soon as the cursor moves away.

Here's another way to do this by Zain Zafar which involves using the debugger statement in the Console:

Open the Console tool.
Enter setTimeout(() => {debugger}, 3000) and press Enter. You can change the 3 seconds delay to anything that matches your needs.
Quickly hover over the popup and wait for the debugger to pause the script execution.

Now the popup is visible and you can easily inspect it without having to worry about it disappearing.

Zain shared this awesome tip on Twitter and YouTube.

console.log() is great, but do you know console.table()? console.group()? console.assert()?

2022-03-25T00:00:00.000Z

You probably know about console.log() already, it's a great way to print variables and objects to the console while the code is running, to debug it. But there are other console methods that can help you debug your code even more easily (you can list them all by the way).

console.table #

console.table() is great to print arrays and objects in a tabular format.

Say you have the following data:

const products = [{
  id: 1,
  name: 'Instant Pot',
  price: 79.99,
  inStock: true
}, {
  id: 2,
  name: 'Aeropress Coffee Maker',
  price: 29.99,
  inStock: false
}, {
  id: 3,
  name: 'George Foreman Grill',
  price: 25.99,
  inStock: true
}];

You can log it to the console a much more readable way with console.table() by using the following code: console.table(products);

You can even customize the table columns that are shown.

console.group #

When your code generates a lot of logs, it can quickly become difficult to read those logs in the console.

console.group() allows you to group console logs together and indent them in a nice collapsible section, making them easier to read.

Take the following code example that generate a lot of logs:

for (const product of products) {
  console.log(product.id);
  console.log(product.name);
  console.log(product.price);
  console.log(product.inStock);
}

Now let's use console.group() to group those logs together:

for (const product of products) {
  console.group(product.name);
  console.log('ID:', product.id);
  console.log('Price:', product.price);
  console.log('In stock:', product.inStock)
  console.groupEnd();
}

console.assert #

Finally, the console.assert method allows you to log an error to the console only if some predefined condition is not met.

Let's say you want to make sure that all products in the products array are in stock and log an error if not.

You could use an if statement and console.error, like this:

products.forEach(product => {
  if (!product.inStock) {
    console.error(`${product.name} is not in stock`);
  }
});

Using console.assert requires less code:

products.forEach(product => {
  console.assert(product.inStock, `${product.name} is not in stock`);
});

That's it!

Credits go to Suze Shardlow for sharing this on her site.

Debug CSS grid areas

2022-03-16T00:00:00.000Z

A really useful way to position elements on a CSS grid is using the grid-template-areas property. With it, you can give names to various areas of your grid (potentially spanning multiple cells), and then simply position your elements by referring to those names.

The syntax for the grid-template-areas property is a bit special though. It consists in a series of strings where each corresponds to one row in the grid. For example:

.container {
  grid-template-areas: "header  header"
                       "sidebar main  "
                       "sidebar footer";
}

DevTools makes it very easy to debug potential problems that may occur when making mistakes with the above syntax:

Open the Elements tool (or Inspector tool in Firefox).
Select an element from the page that defines a grid container with named areas (you can use the grid badge in the DOM tree to find grid containers).
Open the Layout sidebar pane.
Under the Grid section, enable the Show area names checkbox (named Area Names in Safari).

Emulate forced-color mode

2022-03-15T00:00:00.000Z

Operating systems offer an accessibility feature where the colors shown on the screen are converted to offer higher contrast. When you use this feature, it impacts all the content on the screen: your desktop, folders, native apps, web browser and its web content, etc.

This means web pages are not displayed in their usual colors, but in a high-contrast mode instead. Learn more about the Windows high-contrast mode and how to style a website with it here and about the forced-colors media query here.

If you are not using this high-contrast mode yourself though, you won't know how your website looks to users who do. To make sure your content is fully accessible to users of this mode, and to avoid having to switch your entire OS to it, you can use Edge's or Chrome's ability to emulate the forced-color mode.

In Edge or Chrome:

Open the Command Menu: ctrl+shift+P (or cmd+shift+P on mac).
Type Rendering and press Enter.
In the Rendering panel, scroll down to the Emulate CSS media feature forced-colors and activate it from the drop-down.

In Polypane:

Open the Emulation options.
Toggle Forced colors.
(Optionally) Toggle the prefers-color-scheme to test both a light and dark forced color mode.

Check if your site can be instantly reloaded from bfcache

2022-03-15T00:00:00.000Z

Most browsers are now able to instantly go back to previously visited pages without having to wait for them to load. This ability is powered by the back/forward cache (or bfcache). Firefox, Safari, and Chromium-based browsers support it, and it's massive performance boost when hitting the back button.

The way the bfcache works is by storing a snapshot of the page in memory, in a way that no work needs to be done when going back to it, other than displaying the pixels on the screen.

Not all web pages can be cached in bfcache though. Chrome and Edge have a new tool that lets you detect potential issues with a page that might prevent it from being bfcache'd.

To test if your page can be cached:

Open the Application tool.
Click Back/forward cache in the side bar.
Click the Test back/forward cache button.

A report will be displayed, telling you whether your page can be cached, and if not, why.

Send feedback, ask for features and report bugs

2022-03-10T00:00:00.000Z

Browser vendors depend on your feedback to build the right tools for you. Without hearing from you all about what problems you have, or what features you lack, they can't take the right decisions about what to build.

If you report bugs to the DevTools team when you see them, you won't just be helping you when the fix comes, but you may be helping many others who have the same bug but haven't reported it.

It's worth knowing that the various DevTools teams at Microsoft, Mozilla, Apple and Google are usually fairly small and receive a lot of feedback, so reporting an issue does not mean it will be fixed quickly (or at all, if it's lower priority than others), but it does help, and those teams are listening.

Here are a few ways you can report bugs, ask questions or request features:

Firefox DevTools:
- Firefox uses Bugzilla as their public bug tracker and anyone is welcome to report bugs or ask for new features by creating a new entry on Bugzilla. All you need is a GitHub account to log in.
- Getting in touch with the team can either be done on Twitter by mentioning the @FirefoxDevTools account, or logging in to the Mozilla chat (find documentation about the chat here).
Safari Web Inspector:
- Like Firefox, Safari uses the Bugzilla product to track their webkit bugs. Here is documentation about how to search for bugs and report new ones.
- You can also get in touch with the team on Twitter with @webkit.
- Finally, you can also signal bugs about Safari and the Safari Web Inspector using the feedback assistant.
Chromium
- Chromium is an open-source project that several browsers are based on, including Google Chrome and Microsoft Edge. If you believe you found a bug that pertains to Chromium rather than just one of the browsers based on it, you can head over to the Monorail bug tracker that Chromium uses and find all issues and create new ones here.
Edge DevTools:
- The easiest way to report a problem you encountered while using the tools is by using the feedback button in DevTools (the little stick figure in the top-right corner of the tools).
- But if you have ideas, questions, feedback, and want to have longer conversations, use the Edge DevTools feedback repository instead.
Chrome DevTools:
- On top of the Chromium bug tracker, the team also listens for feedback on the devtools-dev mailing list as well as on twitter at @ChromeDevTools.
Polypane:
- In the Help menu select "Chat with us" to chat with Polypane directly, or click "Get Support" to email them. On top of chat and email, the team also listens for feedback on twitter at @polypane.

Manipulate complex JSON files using DevTools

2022-03-10T00:00:00.000Z

I often work with large amount of data that I need to go through and gather interesting information from. Sometimes this data is in JSON format. When that's the case, I like using DevTools to turn it into what I want, using JavaScript!

I copy the JSON data content from a text editor.
I open the Snippet pane in the Sources tool (learn more about snippets).
I paste the data in a new snippet, work on it with JavaScript to extract what I need (usually using array functions like map and filter).
Finally I extract the data again using the copy function, and paste it back into my text editor (learn more about copy).

Take a look at the following video to see my workflow in action:

https://www.youtube.com/watch?v=W8s9UiEhaLE

Note that while the workflow works in every browser, the Snippets pane only exists in Edge and Chrome. In Firefox, you can use the multi-line console to do the same thing.

Detect low color contrast issues

2022-03-03T00:00:00.000Z

Low color vision is very common, and your choice of text and background colors can negatively impact people's experience of your website. What seems legible to you might not be for everyone.

DevTools comes with a number of features to help you detect possible color contrast issues:

You can simulate various color vision deficiencies ➡️ Simulate color vision deficiencies.
You can get color contrast ratios on hover, when using the inspect tool ➡️ See quick accessibility information on hover.
In Chrome and Edge, you can list all contrast issues at once with the CSS Overview tool.
- Open the Command Menu: ctrl+shift+P (or cmd+shift+P on mac).
- Click Capture overview.
- Click the Colors tab in the sidebar and scroll down to the Contrast issues section.
In Firefox, you can find all contrast issues too, using the Accessibility panel.
- Open the Accessibility panel from the toolbar.
- In the Check for issues drop-down, select Contrast.
- Click each item in the table and review the color contrast ratio.
In Polypane, you can find all contrast issues with the Color Contrast debug tool.
- Open the Debug Tools settings of a pane.
- Find Contrast Checker Under Accessibility.
- Select whether you want to check for WCAG AA or AAA compliance.
- Contrast issues are displayed inline on the page. Where available, Polypane suggests improved colors.

Paste multiple CSS declarations at once

2022-02-25T00:00:00.000Z

You know how you can paste a CSS property name or value in the Styles (or Rules) panel? Well, you can actually paste several declarations at once too!

For example, try copying the following entire CSS code snippet, which includes multiple declarations:

font-family: courier;
font-size: 14pt;
color: #f06;
margin: 4rem;

Now open DevTools, and the Elements (or Inspector) panel, find a CSS rule and click somewhere in it as if you were about to type a new property.

And now paste the code in. Instead of everything getting pasted in just this one text field, see how DevTools noticed that your clipboard contained multiple declarations, and created them all for you!

Detect the element with focus at any time

2022-02-21T00:00:00.000Z

If you want to know which element has the focus on the web page at any time, you can use a live expression in the Console tool.

Open the Console.
Click the Create live expression button (it looks like an eye icon).
In the text box that appears, type document.activeElement.
Now click/tab around on the page and see the live expression update to reflect which element is currently focused.

Use full browser window for device emulation

2022-02-09T00:00:00.000Z

Emulating different devices in the browser is incredibly useful. It gets tricky when you are on a device with limited resolution as the emulated device needs to be zoomed down to fit the screen as a large part of the window is taken up by the Developer Tools.

In Polypane, responsive design mode with multiple devices is the default.

Firefox has a keyboard shortcut to show device emulation without Developer Tools - command + option + M on Mac and ctrl + shift + M on Windows/Linux.

On Chromium based browsers like Chrome and Edge the trick is to start the device emulation and then un-dock the Developer Tools. You can un-dock the tools into their own window using the … menu. This gives you the full browser as an emulation playground.

Record and replay user flows

2022-02-02T00:00:00.000Z

Sometimes, you need to repeatedly test the same user scenario on a website. This can happen when working on a fix or a performance improvement. Testing the same user scenario over and over again requires clicking the same buttons and do the same actions every time you reload the page. This can quickly become time consuming and frustrating.

To automate this process, you can use the Recorder tool in Chrome or Edge. The Recorder tool allows you to record any user flow once, and then replay the flow as many times as you want.

To record a new flow:

Open the Recorder tool:
- In Chrome, the Recorder tab is already available in the main toolbar. If you don't see it, click More tabs (>>) > Recorder.
- In Edge, click More tools (+) in the Activity Bar, then Recorder.
Click Create a new recording.
Enter a name for your recording.
Click Start recording.
Use the page as normal, for example click on buttons, use form controls, navigate to other pages.
When you're done with the user flow you want to record, click End recording.

Your recording is now available in the Recorder tool. To replay your recording, click Replay.

If you close and then reopen DevTools, your recording will still be available in the Recorder tool. To replay it:

Find your recording in the tool's initial screen, or from the dropdown located in the tool's toolbar.
Click Replay.

To learn more about the Recorder tool (including how to edit a recording and how to use it to test performance improvements), see Record, replay, and measure user flows.

Remove or disable event listeners

2022-01-26T00:00:00.000Z

When you're trying to debug something and event listeners on the page keep interfering with what you're doing, it can be frustrating.
Imagine a mousemove event listener that changes some of the information on the page.

Fortunately, DevTools can help you here.

In Firefox, you can disable (and re-enable) events from the Inspector panel:

Find the element in the panel that has the event listener.
Click the event badge next to it.
Find the event type you are interested in.
Check or uncheck the box next to the event listener to enable or disable it.

In Chrome and Edge, you can remove events from the Elements panel (but not add them again):

Find the element in the panel that has the event listener.
In the sidebar of the panel, find the Event Listeners pane.
Find the event type you are interested in and expand it.
Click the Remove button next to the listener you want to remove.

Find HTML parsing errors

2022-01-17T00:00:00.000Z

DevTools is so full of features these days that we hardly ever use View-Source anymore. But it turns out that it has one trick up its sleeves that other tools don't, at least in Firefox and Polypane.

Indeed, in those browsers, on top of showing the HTML source code of the page, it also highlights in red the HTML parsing errors!

Consider the following HTML code:

<!DOCTYPE html>
<ul>
  <li>
    Lorem ipsum dolor sit...
  </li>
  <li>
    Lorem ipsum dolor sit...
  </li>
  <li>
    Lorem ipsum dolor sit</em>, ...
  </li>
</ul>

Firefox's view-source makes it easy to find the stray </em> ending tag! You can also hover over it to reveal more information about the type of parsing error.

Polypane additionally shows all validation errors in a list above the source.

Select elements with pointer-events:none by holding Shift

2022-01-13T00:00:00.000Z

When selecting elements from the page they normally get highlighted on hover and selected on click. However certain elements can't be selected.

Indeed, if an element does not react to pointer events because the pointer-events:none CSS declaration is set, then you just can't select it, and the only way to get to it is to find it in the Elements/Inspector panel.

In Chrome, Edge, Polypane and Firefox, you can hold the Shift key on your keyboard while hovering elements in the page! When you do this, even elements with pointer-events:none can be selected!

Šime Vidas also proposed this alternative solution in Firefox:

Open the Accessibility tool.
Use the accessibility picker tool (top-left corner) to pick the element from the page.
Find the corresponding DOM node in the Properties sidebar panel, and click the inspect icon next to it.

Query object instances and holders from the console

2022-01-10T00:00:00.000Z

All browser DevTools have a few built-in functions in the console to do things like get the current element, or copy a string. But Safari exposes 2 nice built-in functions:

queryInstances
queryHolders

These two functions are really useful when your site starts using a lot of JavaScript objects. In some situations, it may become difficult to keep track of the dependencies between these objects, and memory leaks may start to appear, too.

If app.TodoItem is a JavaScript class in your application, then queryInstances(app.TodoItem) will return an array of all of its instances.

Or if you want to know what refers to the object you're debugging, use queryHolders(this), which will return an array of all the other objects that have references to this.

Learn more about these, and other, built-in functions here.

Get detached DOM elements to investigate memory leaks

2022-01-10T00:00:00.000Z

Note: This Microsoft Edge-specific feature is being removed starting with Edge 133. The feature that it provides will continue to be available by using the Memory tool instead, and using the upcoming Detached Elements profiling type. The new profiling type will be available in all Chromium-browsers.

Memory leaks can quickly become a big problem for long-running applications, and a common source of memory leaks is detached DOM elements (elements that are no longer attached to the DOM tree).
It's usually very hard to investigate these memory leaks, because it's hard to know if elements are detached, and which ones, let alone find which part of your JavaScript code is causing them to be detached.

Edge has a tool just for this: the Detached Elements panel. To use it:

Open the command menu and type "detached" to find and open the Detached Elements tool.
Click the Get detached elements button to list all of the currently detached elements.
Click the Analyze button to take a memory heap snapshot. Once done, you can then double-click any of the detached elements' Ids to find the link between these elements and your JavaScript code in the Memory panel.
Don't forget to click the Collect garbage button every once in a while to force garbage collection. Then get the detached elements again. Indeed, some elements may remain in memory simply because the browser hasn't yet cleaned them up. Forcing GC makes sure the list only contains the elements that are detached and cannot be cleaned up.

You can find out much more about this tool in this blog post and over at Microsoft's documentation site.

Write code on multiple lines in the Console

2021-12-16T00:00:00.000Z

If you're feeling adventurous and want to write longer pieces of code in the Console to execute more complex things, it can quickly become difficult.

Thankfully, there are a few ways to make your life easier by writing on multiple lines, like you would in a code editor:

Use Shift+Enter to create a new line without executing the expression. This works in all browsers.
Or use Firefox's multiline editor. To do this, click on the Switch to multi-line editor mode button located in the top-right corner of the Console message area (or press Ctrl+B).
Or you can create code snippets in Edge, Chrome, or Safari's Sources tools. The added advantage of this technique is that code snippets are saved on your disk, and therefore can be used even after you've restarted the browser. See Re-use scripts as snippets for more information.

Download all images from the page

2021-12-16T00:00:00.000Z

If you want to download all of the images on a webpage in one go, you can use the following few lines of JavaScript code to do it:

$$('img').forEach(async (img) => {
  try {
    const src = img.src;

    // Fetch the image as a blob.
    const fetchResponse = await fetch(src);
    const blob = await fetchResponse.blob();
    const mimeType = blob.type;

    // Figure out a name for it from the src and the mime-type.
    const start = src.lastIndexOf('/') + 1;
    const end = src.indexOf('.', start);
    let name = src.substring(start, end === -1 ? undefined : end);
    name = name.replace(/[^a-zA-Z0-9]+/g, '-');
    name += '.' + mimeType.substring(mimeType.lastIndexOf('/') + 1);

    // Download the blob using a <a> element.
    const a = document.createElement('a');
    a.setAttribute('href', URL.createObjectURL(blob));
    a.setAttribute('download', name);
    a.click();
  } catch (e) {}
});

This will list all of the img elements on the page, then attempt to fetch them from the server (which might fail for some, depending on the CSP on the page), and then trigger the download of each one of them by the browser, using a <a download> element.

If you want to reuse this script often, you can store it in your Snippets on Chrome or Edge (learn how to do it here).

Edit and resend faulty network requests to debug them

2021-12-15T00:00:00.000Z

When you're investigating a bug where the backend you connect to doesn't respond with the right things it's useful to tweak the requests and try again quickly. You can do this by changing your frontend code, and reloading the page, but DevTools can help you go faster by letting you edit and then resend any request, without having to make any frontend code changes.

Below are a few ways to do this, depending on your browser of choice.

Using cURL (Firefox, Chrome, Edge) #

In Firefox, Chrome, or Edge, you can copy any request from the Network tool as a cURL command. Once copied, you can paste the command in your terminal app, edit it to match your needs, and then run it.

To copy a request as cURL:

Find the request you want to edit in the Network tool.
Right-click the request and select Copy > Copy as cURL.
Paste the command in your terminal app, make any changes you need, and then run it.

Using fetch (Firefox, Chrome, Edge) #

Similar to above, you can also to use the Copy as Fetch option in Firefox, Chrome, or Edege DevTools.

Find the request you want to edit in the Network tool.
Right-click the request and select Copy > Copy as Fetch.
Open the Console tool.
Paste the copied code in the Console tool, make any changes you need, and then run it.

Using Firefox's Edit and Resend feature #

Firefox has a built-in Edit and Resend feature that's very convenient because it doesn't require to switch to the terminal or to the Console tool. With Edit and Resend, you stay in the Network tool and can edit requests directly:

Find the request you want to test in the Network tool.
Right-click the request and select Edit and Resend. The New Request sidebar appears.
In the sidebar, edit the request's method, url, query string, headers, and body to match your needs
Click Send to resend the modified request.

Using Edge's Network Console tool #

Edge has a built-in feature very similar to Firefox's Edit and Resend named Network Console. This feature lets you edit and resend requests, but also allows you to create any number of requests to test, like Postman.

The easiest way to get started is by going to the Network tool and finding the request you want to test.
Right-click the request and select Edit and Resend. The Network Console tool appears.
Edit the method, url, query string, headers, body, and more to match your needs.
Click Send.
To test the same modified request in the future, save this request. You can find all saved requests in the Network Console tool.

Highlight the effect of individual CSS properties on hover

2021-12-09T00:00:00.000Z

How do certain CSS properties apply to the page isn't always an easy question to answer.

While some properties might be considered simple, others have complex effects that depend on other factors. Properties like justify-content or gap depend on writing and layout direction for example.

Edge and Chrome help with this by highlighting the effect that individual CSS properties have in the page. This doesn't work with all properties, but does work with margin, padding, border, justify-content, align-items, gap.

Find one of the above properties in the Styles panel.
Move your mouse cursor over it.
Watch as the corresponding affected region of the element gets highlighted in the page.

Visualize the effect of CSS transforms

2021-12-06T00:00:00.000Z

CSS transforms can sometimes be hard to wrap your head around, especially when chaining multiple transformations.

Firefox helps with a cool visualization tool that allows you to see how and where the element was before being transformed, and how it is now.

Being able to compare the 2 states at the same time makes it easier to debug your transform CSS properties.

Select the transformed element in the Inspector.
Find the transform property in the Rules sidebar panel.
Hover over the property value.
The on-page highlighter appears.

Learn more about it here.

Copy a CSS rule as CSS-in-JS format

2021-11-30T00:00:00.000Z

Do you use a CSS-in-JS framework? If so, you know how frustrating it can be to copy CSS from DevTools and paste it into your code.

Indeed if the CSS you worked on in the Styles panel looks like this:

h1 {
  background: hotpink;
  letter-spacing: .5rem;
  margin: 2rem;
  font-size: 3rem;
}

your CSS-in-JS framework probably expect it this way instead:

{
  background: 'hotpink',
  letterSpacing: '.5rem',
  margin: '2rem',
  fontSize: '3rem'
}

Although the 2 are relatively similar, it's frustrating having to change semi-columns to commas, adding quotes, and swapping hyphen-separated property names with their camelCase equivalents.

In Edge and Chrome, you don't have to. They both have an option that does the re-formatting for you:

Right-click on any rule in the Styles pane.
Select Copy all declarations as JS.

Note that you can also use Copy declaration as JS if you only want one. But this feature really shines when you copy all declarations at once.

Find out more about this feature on the Microsoft DevTools docs website, or take a look at this short screencast:

https://www.youtube.com/watch?v=DCWSV0J5C8A

Scroll an element into view

2021-11-23T00:00:00.000Z

If the inspected web page is long with a lot of elements, and its DOM tree is big and complex, it's easy to get lost, not knowing where the selected element is in the page.

DevTools has got your back here! You can easily reveal where the selected element is in the page by scrolling it into view:

Right-click the element in the Elements panel (or Inspector panel in Firefox).
Click Scroll into view (in Firefox, you can also press S).

Take screenshots of your site in a device frame

2021-11-17T00:00:00.000Z

Taking a photo of a mobile device or tablet is daunting as you have to deal with fingerprints, glare and focus issues. Using Device Emulation makes this a lot easier.

To take a screenshot of a web page inside a device frame, use either Chrome or Edge (or any Chromium browser):

In DevTools, turn on Device Emulation by clicking the icon or pressing Ctrl + Shift + M (Cmd + Shift + M on Mac).
Select a device from the Device dropdown menu. Be aware that not all devices have graphical frames.
Click the … button (More options) and select Show device frame.
Click the … button again and select Capture screenshot.

That's it, you now have a photo of your web page inside a device on transparent background.

You can see this in action in the following video:

https://www.youtube.com/watch?v=ZViLMjxpqEE

Take a screenshot of a single node

2021-11-17T00:00:00.000Z

In Firefox, Chrome, Polypane and Edge DevTools, you can screenshot a single node from the page.

Go to the Elements panel (or Inspector panel in Firefox).
Right-click on the node you want to screenshot.
Select Capture node screenshot (or Screenshot node in Firefox).

In Polypane:

Click the "Make a screenshot" option.
Select "Element".
Click the element on your page you want to screenshot.

Automatically logging name and value in console.log()

2021-11-17T00:00:00.000Z

Using the console of DevTools you can to log some information to debug your JavaScript.

The common way to do that is to add a console.log() statement where you want to learn the value of a certain variable. In the following example the mouse position and how far the document has scrolled.

document.body.addEventListener('click', e => {
  let x = e.pageX;
  let y = e.pageY;
  let top = document.documentElement.scrollTop;
  console.log(x);
  console.log(y);
  console.log(top);
})

The problem is that this results in lots of numbers in the console without explanations about what they are. If you wrap the values you want to read out in curly brackets {}, the console automatically displays both the name and the value of the variable.

document.body.addEventListener('click', e => {
  let x = e.pageX;
  let y = e.pageY;
  let top = document.documentElement.scrollTop;
  console.log({x});
  console.log({y});
  console.log({top});
})

https://www.youtube.com/watch?v=xTnqsA5vZX4

Move panels to re-arrange them

2021-11-15T00:00:00.000Z

Moving panels around the user interface can be very useful to make DevTools more unique to you and adapted to your needs.

There are 2 ways that you can re-arrange panels in DevTools today: dragging them horizontally in the toolbar, to re-order them, and moving them between the top toolbar and the bottom (drawer) toolbar

To move tabs between the top and bottom areas (Edge only) #

Right-click on any of the tabs.
Select Move to Bottom or Move to Top depending on where the tab is.

This only works in Edge at the moment is makes it super easy to see any 2 tools at once (more information about Edge personalization features).

To re-order panels by dragging (Chrome, Edge, Firefox, Safari) #

Click and hold any of the tabs in the toolbar.
Move the tab horizontally, left or right, until the desired location is reached.
Release the mouse button. The new order will be persisted every time you open DevTools.

If you use some tools more than others, this can be used to group them at the start of the toolbar for example.

Format console messages

2021-11-10T00:00:00.000Z

You can use special formatters in the console.log function to format logs just the way you want.

Use %s to format a variable as a string.
Use %d to format a variable as an integer.
Use %f to format a variable as a float.
Use %o to print a DOM element variable.
Use %O to print an object variable.

As a bonus, the %c formatter can also be used to style console messages with CSS properties!

var el = document.body;
console.log('%c There are %d elements in %O', 'color:lime;background:black;', el.childElementCount, el);

Simulate pseudo CSS classes

2021-11-07T00:00:00.000Z

If you use :hover, :active, or other pseudo-classes in your CSS code, it can be tedious to test them. For example, having to hover over an element which is styled with the :hover pseudo-class means that you can't use your mouse to inspect the element in DevTools at the same time.

Thanks to DevTools, you can actually simulate these pseudo-classes without having to use your mouse or keyboard.

To simulate a pseudo-class:

Inspect an element that has a pseudo-class defined in your CSS code.
Depending on your browser, do either of the following:
- In Chrome, Edge, or Safari: in the Elements tool, in the Styles sidebar, click the :hov button.
- In Firefox: in the Inspector tool, in the Rules sidebar, click the :hov button.
- In Polypane: in the Elements tool, click the rhombus icon.
The pseudo-class section appears.
Select one, or more, pseudo-classes to simulate.

Here is a screencast showing how to use pseudo-class simulation to check the hover, active, visited and focused state of a link without having to interact with the link using your keyboard or mouse:

https://www.youtube.com/watch?v=CgHuHYRyvXc

To try it out yourself, here is the demo page used in the video.

Zoom the DevTools UI to your liking

2021-10-29T00:00:00.000Z

Do you find the UI of DevTools too small to comfortably work with? Because this UI is made of HTML and CSS, just like any other web pages, it can be zoomed in (or out) by the browser just like you can zoom in on web pages.

To zoom the UI of DevTools:

Make sure it has focus first (click somewhere in DevTools).
Use the Ctrl++ and Ctrl+- keyboard shortcuts to zoom in or out (replace Ctrl with Cmd on Mac).

See the page in 3D

2021-10-29T00:00:00.000Z

See your page in 3 dimensions to quickly find out how deeply nested it is, fix z-index stacking issues, and performance issues.

In Edge #

Open the Command Menu by pressing ctrl+shift+P (or cmd+shift+P on macOS).
Type "3D" and press Enter. The 3D View tool opens up.
In the tool, choose which 3D mode you want to use: Z-index (to visualize the stacking context tree), DOM (to visualize DOM nesting), and Composited Layers (to visualize the layers created by the browser engine to paint the page in separate chunks).

In Chrome or Safari #

Chrome and Safari also have a Layers tool that provides the same information as Edge's Composited Layers 3D mode.

You can learn more about Edge's 3D View tool in this video:

https://www.youtube.com/watch?v=BZAH8ZXhHZA

Cut down on console noise using live expressions

2021-10-29T00:00:00.000Z

Using the Console of DevTools to log information that changes a lot is a bad idea. First of all, you flood it with information. Secondly, it can impact the performance of your product. And last but not least, you are most likely to only log this information to debug your project and end users should never get that information.

An excellent alternative to logging a lot of information are live expressions. To add a new live expression do the following:

Click the eye icon in DevTools
This gives you an entry field to type in any JavaScript expression.
Save the expression by clicking outside the field or press cmd+Enter on Mac or ctrl+Enter on Windows/Linux.

This will pin the expression on top of the Console and show you the value returned from it. Any change will show live below the expression.

You can use this, for example, to resize the window to a certain size by monitoring the outerWidth and outerHeight properties.

`${window.outerWidth} x ${window.outerHeight}`

You can set as many live expressions as you want, and you can remove them by clicking the x icon next to them.

Easily change CSS number values from the keyboard in increments of 0.1, 1, 10, 100

2021-10-29T00:00:00.000Z

When playing with styling or layout code in DevTools, it's useful to be able to change widths, margins, and other CSS number values quickly.

Manually entering new numbers works of course, but it gets in the way of creativity a little bit.

In DevTools you can change numbers by using the arrow keys on your keyboard, this way you can easily and quickly test changes while checking the result in real time in the page. But there's more, you can also hold the various control keys to change the speed at which the numbers increment:

Focus a CSS value in the Styles/Rules/Elements panel.
Make sure the text cursor is on a number.
Press the Up or Down arrow button on the keyboard to increment, or decrement the number by 1.
Hold Shift at the same time to increment by 10.
Or, hold Alt to increment by 0.1.
Or, hold Ctrl to increment by 100.

Get contextual DevTools help

2021-10-29T00:00:00.000Z

Edge has a feature called the DevTools Tooltips that gives you help about the different tools right inside of DevTools.

There are several ways to enable it:

Press ctrl+shift+H (or cmd+shift+H on mac),
or click on the three-dots menu icon, then Help, then Toggle the DevTools Tooltips,
or using the command menu (ctrl+shift+P or cmd+shift+P) and typing "tooltips".

When tooltips are enabled, you can hover over them to get documentation about the tools.

Find and export CSS changes

2021-10-29T00:00:00.000Z

If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Sources or Styles panels (in Chrome or Edge), and you don't remember all of the changes you made, you can find and extract them easily from:

In Firefox or Safari:
- The Changes panel (in the Inspector), which allows you to copy all changes, or copy a given CSS rule
In Chrome or Edge:
- The Changes panel (which you can open from the command menu by typing ctrl+shift+P or cmd+shift+P)

Use commands to do things faster

2021-10-29T00:00:00.000Z

There is a command menu in Edge and Chrome that allows you to quickly access many different features of DevTools without having to navigate the UI.

Press Ctrl+Shift+P on Windows or Linux (or Cmd+Shift+P on macOS) to open the command menu, and just start typing.

You can use this to, for example, switch to a different panel by typing its name, change the color theme, change settings, disable javascript, etc.

Evaluate XPath to find elements in the page

2021-10-29T00:00:00.000Z

DevTools supports 2 ways to evaluate XPath expressions to help you locate elements in the page. All browsers support those 2 ways:

From the Elements (or Inspector) panel:
- Click anywhere in the panel to make sure it has focus
- Press ctrl+F (or cmd+F on Mac) to focus the search field
- Enter your XPath expression and press enter to find the elements that match

Note that you can also copy the XPath expression from any element in DevTools.

From the Console panel:
- You can use the built-in $x() helper function like this:

$x('//div/div/label');

Store a node as a variable to use it in the console

2021-10-23T00:00:00.000Z

If you want to use a DOM node from the page in the console:

Right-click the node in the Elements (or Inspector in Firefox).
Click on Store as global variable (or Use in Console in Firefox).

The Console opens up, pre-filled with a new variable name (something like temp1) which you can use to refer to the node any time you want.

Note that if you only want to refer to the currently selected node (and not create a new variable), you can also use $0 in the console.

Thank you Austin Gil for sharing this tip on Twitter!

Console.log() for the web with logpoints

2021-10-20T00:00:00.000Z

Using the console to log some information is a very common way to debug your JavaScript. But you can also log information in any web site using Logpoints in the sources panel.

Here's how to do it:

In the Sources panel (or Debugger in Firefox), open a JavaScript file and right-click any line number.
Select Add logpoint to open the editor
In the editor, enter the JavaScript expression you'd like to log.
Hit Enter to save and a badge shows on the line number.
Go to the console, interact with the site and every time this line executes, you see the result of the logpoint expression.
If you don't want to log information any longer, click the Logpoint again to remove it.

Logpoints are a way to inject a console.log() into any web site without editing its source code.

You can see this in action in this video on YouTube:

https://www.youtube.com/watch?v=DRRezUZvZ6I

Debug popups that appear on hover using JS

2021-10-20T00:00:00.000Z

Have you ever been frustrated because you couldn't style a popup or tooltip that appeared on hover? If it uses JavaScript to get displayed, it's hard to style without modifying the code to make it stay visible.

Switch the Sources/Debugger panel.
Then hover the element in the page so the popup appears, and leave the mouse there.
Now press F8 to pause the debugger.

That's it! The JS engine will pause and freeze the state of the page. You can now switch back to Elements/Inspector and style the popup content!

Thank you to Sam Selikoff for tweeting about this tip and making a youtube video about it too:

https://www.youtube.com/watch?v=aNZ9ci_1gtM

Monitor all events dispatched on an element

2021-10-15T00:00:00.000Z

You can use the monitorEvents global function in the Console panel to log all of the events dispatched on a particular element.

Select an element in the Elements panel.
Go to the Console.
Type monitorEvents($0, 'key'); and hit Enter.
Interact with the selected element in the page to dispatch events.

You can replace $0 with a reference to any other element. $0 is just a shortcut to the currently selected element.

You can also change key to other event types like mouse.

Thank you to Minko Gechev for tweeting about this tip.

Edit CSS shadow visually

2021-10-11T00:00:00.000Z

If you don't remember the CSS syntax for the box-shadow property (and who does!), then Chrome and Edge can help you with their visual shadow editor!

Select an element that has some shadow applied.
Go to the Styles pane.
Click on the little shadow editor icon next to the box-shadow property value.

Hide resources loaded by extensions in the Network panel

2021-10-08T00:00:00.000Z

If you want to hide scripts and other resources loaded by browser extensions in the Network panel, use the -scheme:chrome-extension pattern in the filter input box.

Credits go to Sunil for his post on twitter.

Jump from a CSS variable usage to where it is defined

2021-09-27T00:00:00.000Z

CSS custom properties (also called variables) are very useful to avoid repeating values in CSS, like colors for example.

You can define and use a custom property as shown below:

rule-1 {
  --my-main-color: blue;
}
rule-2 {
  color: var(--my-main-color);
}

Sometimes, it can be hard in DevTools to see both the place where the variable is used and the place where it is defined. There may be a lot of rules and properties that apply to an element, requiring a lot of scrolling and searching.

In Edge and Chrome, you can simply click on a var(--foo) function to jump to where the --foo variable is defined!

In Edge or Chrome, select an element in the Elements panels which has CSS rules applied that use custom properties.
Hover over the property name inside the var() function. You can see the value in a tooltip.
Click on the property name.
The Styles panel scrolls to where the property is defined and highlights it for a second.

Pause script execution when the DOM changes

2021-09-22T00:00:00.000Z

If you want to know what JavaScript code removes, adds, or modifies a DOM element in the page, you can use DOM breakpoints in DevTools. You can choose to break on:

Subtree modification: this pauses execution when any element in the subtree of the selected element is modified (added, removed, or changed attribute).
Attribute modification: this pauses execution when an attribute of the selected element is modified.
Node removal: this pauses execution when the selected node is removed from the DOM tree.

This is useful if you don't know the codebase you are debugging for example.

To add a DOM breakpoint:

Navigate to the Inspector/Elements panel.
Find the node which you want to add the breakpoint on.
Open the contextual menu (right-click).
Open the Break on sub menu and choose the type of breakpoint you want to set.

Once the requested DOM modification occurs, the JavaScript execution will pause and DevTools will navigate to the Sources/Debugger panel, showing the right line of code where execution is paused.

Convert color formats

2021-09-20T00:00:00.000Z

Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexadecimal, and others.

In DevTools, you can easily convert from one format to the next.

Find an element in the Elements panel (or Inspector panel in Firefox) that has some CSS color properties applied.
In the Styles panel (or Rules in Firefox), hold Shift and click on the color swatch (the little colored circle next to the color value) to cycle through the different formats.

Change the color theme of DevTools

2021-09-20T00:00:00.000Z

Chrome, Firefox and Safari all have a light and dark theme for their DevTools. On top of these two themes, Edge also has about 10 VS Code themes such as Monokai and Solarized Dark.

To change the theme based on your preference:

In Firefox:
- Open the Settings page (press F1).
- In the Themes setting, choose between Light, Dark, or Auto to match the theme of your operating system.
In Chrome:
- Open the Settings page (press F1).
- In the Preferences section, under Appearance, use the Theme dropdown to choose between Light, Dark, or System preference to match the theme of your operating system.
In Edge:
- Open the Settings page (press F1).
- In the Preferences section, under Appearance, use the Theme dropdown to choose one of the available Light or Dark themes, or System preference to match the theme of your operating system.
In Safari:
- Open the Settings page (press F1).
- In the Appearance section choose between Light, Dark, or System.

Force PWA periodic background syncs

2021-09-10T00:00:00.000Z

The periodic background sync API, available to PWAs is a great way to fetch new content while the user isn't on the site, and while they have access to the network, to make sure they have the latest content when they come back to the app.

It can be hard to debug though, as the sync only happen after the minimum interval has passed, and the browser thinks that now is a good time to trigger the sync.

Thankfully, there is a way in Chrome and Edge to force the sync, so you don't have to wait for the browser to do it.

Navigate to the Application panel.
Select the Service Workers tab.
Scroll down to the Periodic Sync input.
Enter the tag name for your registered sync, and click the Periodic Sync button.

Play a sound when a line of JavaScript is executed

2021-09-08T00:00:00.000Z

Sometimes pausing execution when a line of JavaScript is executed is too much, sometimes you only want to know that the line was executed at all, not pause there.

To do this you can add console.log() statements in your code, or use logpoints.

In Safari, you can play an audio beep instead! This way you can hear that the line got executed, and your console doesn't get cluttered with more messages.

To add an audio breakpoint:

Add a breakpoint on a line of code by clicking in the line number gutter.
Right-click on the breakpoint and select Edit breakpoint.
Click Add action and select Play sound from the action dropdown.
Check the Automatically continue after evaluating option to avoid pausing on this line.

And that's it! Now every time this line is executed, an audio beep will be played.

You can remove the breakpoint by right-clicking on it and selecting Delete Breakpoint.

Visualize the screen reader order for elements within the page

2021-08-30T00:00:00.000Z

Some users make use of assistive technology, like screen readers (e.g. Narrator, VoiceOver, NVDA), to consume the content of web pages and interact with them. If a screen reader presents the content in an incorrect order, such as presenting the content of a section before its title, this might give users a confusing experience.

Incorrect ordering can occur if you use CSS to reorder elements visually in a way that is not reflected in the source order. To learn more, see HTML Source Order vs CSS Display Order.

You should ensure that the source order matches the display order, and you can use DevTools to check.

In Edge and Chrome #

Open the Elements tool.
Select the DOM element for which you want to check the source order.
Open the Accessibility tab in the tool's sidebar.
Under the Source Order Viewer section, click Show source order.

An overlay appears on the page, and shows the order in which elements appear in the source

In Safari #

The Elements tool in Safari Web Inspector allows you to visualize the source order for flexbox containers.

Open the Elements tool.
Open the Layout tab in the sidebar.
Under Flexbox, select the Order Numbers checkbox.
Below, find the flexbox container for which you want to visualize the source order and select the checkbox.

An overlay apppears on the page, showing lines around the flexbox container, the flexbox items, and labels indicating the source order of flexbox items.

Block resources to test your site without CSS or JavaScript

2021-08-19T00:00:00.000Z

The various resources loaded by your site aren't always guaranteed to reach your users when they visit your site. Network problems can occur, JavaScript may be disabled, a CDN may be down, or the browser can decide to block a resource.

It's useful to test how your site looks when this occurs. It may also be useful to compare the performance of your site with and without certain resources.

With DevTools you can block individual URLs or more global patterns.

With Chrome or Edge:
- Go to the Network panel
- Right-click on the request you want to block and select Block request URL (you can also select Block request domain to block all resources from the same domain)
- Reload the page
- You can also use the Network request blocking panel (which opens automatically when you block a request) to add, edit and remove URLs or URL patterns

With Firefox:
- Go to the Network panel
- Right-click on the request you want to block and select Block URL
- Reload the page
- You can also use the Blocking sidebar (which opens automatically when you block a request) to add, edit and remove URLs or URL patterns

Prototype content changes with designMode

2021-08-02T00:00:00.000Z

When creating or modifying a design prototype for the web, you may want to quickly edit content in the browser without having to find the relevant code.

When you turn on designMode for the document or a given element, all associated text becomes editable directly in the browser. Images and other page content can be deleted, too. This is a quick way to prototype design changes such as seeing how a page responds to very long or very short headline copy.

designMode is not a DevTools-specific feature, as it is defined as part of the Web API. However, toggling designMode via the DevTools Console is a convenient way to temporarily make the page editable.

Open the Console
Enter document.designMode="on" and press Enter

Turn off designMode with the expression document.designMode="off".

In Polypane these steps are not neede and it's enough to open the Debug tools and activating Edit content.

Changes are not persisted and will revert on page close or refresh.

Capture node creation stack traces

2021-07-27T00:00:00.000Z

Have you ever wanted to know what caused a specific DOM node or element to be created in the page?
When working on a site that uses a lot of JavaScript and especially when you don't know the codebase, this can be a life saver.

It turns out there is a way to do this automatically without having to set breakpoints in the code at all. It is a hidden experiment for now so you will need to first enable it in Chrome or Edge.

Go through the following steps once to enable the experiment:
- Go to the DevTools settings (press F1, or use the gear icon in the toolbar)
- Go to the Experiments tab
- Check the Capture node creation stacks box
- Reload DevTools
Make sure DevTools is opened when using the website so that stack traces get captured. When you want to know what created a node:
- Select the node in the Elements panel
- In the sidebar, select the Stack Trace panel (you might have to first click on the More tabs chevron >> to see the tab)
- The stack of JavaScript calls that led to the node creation (if any) should be displayed.

Throttle the network speed to test your website on slower connections

2021-07-20T00:00:00.000Z

While you may develop your website on a fast network connection at home or at work, your users may not be able to use it with an equally fast connection. Perhaps they're in a moving car, or on the subway, or they don't have access to high-speed internet at their place. Whatever it is, they may experience your site very differently than you do because of this.

Testing your site with a slower connection helps you understand how it loads and appears on the screen.

Firefox, Chrome and Edge let you simulate slower network connections to do this.

To throttle your connection:

Go to the Network tool.
Use the dropdown that says No throttling and choose any of the other values.

You can also do this from the device simulation mode by using the same dropdown there.

In Polypane:

Open the Emulation options.
Go to the Network tab.
Toggle between the different network speed settings

Edit CSS absolute and relative positions by dragging points in the page

2021-07-19T00:00:00.000Z

Firefox features a position editor that lets you move elements in the page by drag and drop. This works with elements that are positioned in CSS with position:relative or position:absolute and that have at least one of top, right, bottom and left defined.

Select an element with position:relative or position:absolute applied to it in the Inspector panel.
Open the Layout sidebar panel, and scroll down to the Box Model section.
Find the "Edit Position" icon and click it.
Use the handles in the page to move the element around, within its positioned ancestor.

Learn more about this tool here

Copy an element's XPath expression

2021-07-13T00:00:00.000Z

You can easily copy an element's XPath expression from DevTools. This is useful if you need this expression for an automated test for example.

Go to the Elements (or Inspector) panel
Use the context-menu (right-click) on the element you care about
Go into the Copy sub-menu
Choose the Xpath option

Note that you can then use this xpath expression to find elements again in DevTools.

Convert font property units

2021-07-12T00:00:00.000Z

Font CSS properties such as font-size, line-height or letter-spacing can be expressed in multiple different length units (like many other CSS properties).

Firefox, Chrome and Edge allow you to convert values between these units easily.

In Firefox
- Find an element in the Inspector panel that has font properties which you'd like to change
- Select the Fonts sidebar tab
- Use the unit drop-downs next to Size, Line Height or Spacing to convert the current value to another unit

In Chrome or Edge
- You first need to enable the Fonts editor experiment
  - Go to the DevTools settings (F1)
  - Go to the Experiments tab
  - Check the "Enable the new Font Editor tool within the Styles pane" box
  - Re-start DevTools
- Find an element in the Elements panel that has font properties which you'd like to change
- Click on the Aa icon in the Styles sidebar, in the CSS rule that contains the property you want to convert
- Use the unit drop-downs next to Font Size, Line Height, Font Weight or Spacing to convert the current value to another unit

Find DevTools reference documentation

2021-07-02T00:00:00.000Z

If you want to learn more about what other tools exist in a browser, or what features a given tool provides, you can find reference documentation from all the major browsers here:

Drag and drop nodes in the DOM tree

2021-07-01T00:00:00.000Z

If you need to move nodes or elements around in the DOM tree, to re-order things in the page, you can do it by drag and dropping nodes around in the Elements (or Inspector) panel.

Event listeners are suppressed when paused

2021-06-30T00:00:00.000Z

This is not really a tip, but rather an interesting thing to be aware of when debugging JavaScript.

If you use breakpoints in the Sources (or Debugger) tab in DevTools to debug JavaScript, you should know that all event listeners are suppressed while paused at one of them.

For example, if you have a button with an onclick handler, and you're paused at a breakpoint, then clicking that button won't execute the handler. It also won't execute it later when you resume execution.
In fact, most DevTools display an overlay on top of the entire page that prevents you from accessing it at all.

This also happens if you manually try to dispatch new events from the console using dispatchEvent. If there are handlers for these events, they also won't get called while execution is paused.

The reason for this is that (ignoring workers) JavaScript on your page only runs in one thread. So while that thread is paused at one specific location, it's not supposed to be able to execute code from other locations.

Sample colors from the page

2021-06-30T00:00:00.000Z

Being able to sample colors from the page is super useful. Firefox, Edge and Chrome all allow you to do this in 2 different ways:

In Firefox it's really simple and doesn't even require opening DevTools:
- Go to the main Firefox menu
- Go to the "More Tools" submenu
- Click on the Eyedropper menu item

There is a second way to do this in Firefox from DevTools:
- Open the Inspector panel
- Click on the eye dropper button in the typ-right corner of the panel

In Polypane you also do not need devtools
- Click the eye dropper icon in the address bar.
- Or use the keyboard shortcut Shift Alt P.
After selecting a color, an overview of previously selected colors, previews and contrast ratios is shown.

In Chrome and Edge:
- Open the Elements panel and select an element that has some CSS color set to it
- Find the color in the Styles pane and click on the color swatch icon next to it
- Just start moving the mouse over the page

Visualize the tabbing order on the page

2021-06-29T00:00:00.000Z

Users who do not or can't use a mouse or trackpad can use the tab key to navigate through focusable elements on the page. If the order in which those elements get focused is incorrect, this might give users a confusing experience.

In Firefox:

Firefox has a dedicated accessibility inspector panel that, among other things, lets you visualize the tabbing order on a page.

This tool adds a layer on the page that shows the order in which elements would become focused.

Go to the Accessibility panel
In the toolbar, check the "Show Tabbing Order" box

Learn more about it here.

In Polypane:

Polypane has an outline panel that, among other things, lets you visualize the focus (tabbing) order on a page.

This tool shows the tabbing order in a list that also warns you about issues with non-interactive elements, wrong tabindices and when the tab order is illogical for the current reading direction. The current active element is shown with an arrow.

Click Show overlay to add a layer to the page that draws a line from each element to the next, to make it easy to follow.

Learn more about it here.

Apply CSS styles to console messages

2021-06-28T00:00:00.000Z

The console.log output can be styled in DevTools using CSS.

console.log('%c Hello World', 'color: orange; font-size: 2em;');

Find all images without alternative text

2021-06-28T00:00:00.000Z

With HTML, you can add alternative text to images using the alt attribute. It can be used to add a text description to images, which is extremely useful for accessibility as some people may not be able to see the images. With alt, screen readers can announce the alternative text to the user.

Using DevTools, you can quickly check which images on a page do not have an alt text, here is how:

Execute this in the Console panel: console.table($$('img').filter(i => !i.alt), ['src']) and that's it! You'll have the list of image URLs that don't have an alternative text.

Here's what this command does:

$$() find all elements that match a given CSS selector (learn more here). Here it is used to find all images.
filter() is used to only keep the images that do not have an alt attribute.
Finally, console.table() takes the array returned by filter and outputs a pretty table in the console based on it. Notice the second (optional) paramter that is used here to retrict the number of columns to just the src attribute from each image.

In Polypane:

Open the outline panel.
Select Images.
See which images in the list have an "Alt: missing!" warning.
(Optionally) click Show overlay to highlight the missing images on the page.

Draw a box around all elements to debug your CSS and page structure

2021-06-25T00:00:00.000Z

Simple, yet powerful, * { outline: 1px solid red; } is a useful debugging trick that helps understanding the page structure, finding overflow bugs or understand why elements are being pushed away for no apparent reason.

In Edge, Chrome, Firefox and Safari:

Go to the Elements panel (in Chrome, Edge or Safari) or Inspector panel (in Firefox).
Click the + (new style) icon in the Styles or Rules sidebar.
Add the rule { outline: 1px solid red; } to the CSS Selector *.

In Polypane:

Press ctrl/cmd + d to automatically add outlines around all elements.

And voila! All elements are outlined and you can understand what's going on.

Find DOM elements from the console

2021-06-24T00:00:00.000Z

$ and $$ are 2 functions you can use in the console to find elements in the page.

They are essentially shortcuts to the longer document.querySelector() and document.querySelectorAll() functions, but $$ returns an array instead of a NodeList.

They're nice and short, and for those who worked with jQuery, they will feel familiar.

Persist console messages across page navigations and reloads

2021-06-24T00:00:00.000Z

By default, the messages displayed in the console get removed as soon as you refresh the page (or navigate to a new page). If you want to keep those messages as long as DevTools is open, follow these steps:

In Firefox:
- In the Console panel, click on the cog icon (top-right corner) and select "Persist Logs"
In Edge or Chrome:
- In the Console panel, click on the cog icon (top-right corner) and check the "Preserve Log" box
In Safari:
- In the Console panel, check the "Preserve Log" box in the top toolbar
In Polypane:
- In the Console panel, check the "Preserve" box in the top toolbar

Simulate color vision deficiencies

2021-06-22T00:00:00.000Z

People who visit your web pages may have different types of color vision deficiencies that, if you incorrectly use colors for meaning, may affect their experience.

Firefox, Chrome, Polypane and Edge make it possible for you to test how a web page may appear to somebody with a color vision deficiency.

Firefox #

Open the Accessibility tool.
In the toolbar at the top, choose from a selection of different color vision deficiencies in the Simulate drop-down.

Chrome and Edge #

Open the Rendering tool by either using the command menu and type "rendering", or by using the main menu (the ... icon in the top-right corner of the screen) and by going to More Tools.
Scroll down until you find the Emulate vision deficiencies section, and choose from the drop-down.

Polypane #

Open the Debug tools option of a pane.
Switch to Simulators.
Select one of the nine available color vision simulators or hover over the i icon for additional information.

Edit CSS angles

2021-06-22T00:00:00.000Z

In CSS, several different properties use angle unit values, such as the rotate() function of a transform or the linear-gradient orientation of a background-image, and more.

In Chrome and Edge, wherever a value that uses an angle unit (e.g. deg, rad, grad, turn) is displayed in the Styles panel, you can edit it with a nice little visual editor instead of typing the number by hand.

Edit clip-path and shape-outside CSS properties by dragging points in the page

2021-06-21T00:00:00.000Z

The clip-path property is a great way to change the final shape of an element and give it the shape that you want.
You can use this property to make an element be a circle, an ellipse, a polygon or any shape that can be described with an SVG path.

The shape-outside property is similar in that you can define a shape, but it's useful to float other content around an element, along that shape.

In Firefox, you can freely edit the polygon, circle or ellipse types of shapes with the mouse, by dragging points around in the page.

Select an element that has a clip-path or shape-outside property applied.
In the Rules sidebar (in the Inspector panel), the clip-path property will have a little shape icon. Click on this icon.
The shape now gets highlighted in the page, with control points.
Click-and-drag any of these points to change the shape to your likings.

Learn more about this tool here

Copy an object from the console

2021-06-21T00:00:00.000Z

The console panel supports a very handy copy() function that stringifies and copies anything you pass to it as an argument, so you can then paste it somewhere else.

For example: copy($$('a').map(a => a.href).join('\n')) copies all of the links from the page.

Get the selected element in the console

2021-06-17T00:00:00.000Z

If you selected an element in the Elements panel (in Chrome, Safari, Polypane or Edge) or the Inspector panel (in Firefox), you can refer to it in the console using $0.

This shortcut will return the DOM node instance, which you can then use to do things like getting computed styles, or check DOM properties, etc.

Example: getComputedStyles($0).display.

In Chrome, Polypane and Edge, the last 4 previously selected elements are additionally available as $1, $2, $3 and $4. Learn more here.

Find your web component's custom element code

2021-06-17T00:00:00.000Z

In Firefox, when inspecting elements (in the Inspector panel), you can click on the custom badge to go straight to the custom element's JavaScript source code.

Tweak css grid and flexbox alignment properties

2021-06-15T00:00:00.000Z

Chrome and Edge both have a visual editor useful for tweaking flexbox and grid alignment properties.

Head over to the Elements panel
Select an element that is either a grid or flexbox container
In the Styles sidebar pane, find the display: grid or display:flex declaration
Click the little icon next to this declaration

See quick accessibility information on hover

2021-06-15T00:00:00.000Z

In Edge, Polypane and Chrome, whenever you use the element selector and hover over elements in the page, a tooltip appears with, among other things, some accessibility information about the hovered element.

To start the element selector, click on the mouse cursor icon in the top-left corner of the DevTools window.
Then simply hover over elements in the page

Filter requests in the Network panel by status code, mime type and more

2021-06-11T00:00:00.000Z

The Network panel lets you filter requests by status code, or mime type, and more.

Click in the filter input field in the toolbar.
Start typing status-code, you should see an autocomplete popup letting you know of the possible accepted values. Use status-code:404 to find all requests that ended up in a 404 error.
Other possible filters include mime-type, domain, larger-than, method, and more.
You can also negate the search by putting a - in front (e.g. -status-code:404).

View performance markers in order

2021-06-10T00:00:00.000Z

When logging performance.timing events to the console, they appear in alphabetical order since they are properties of the PerformanceTiming object.

In order to view them in order, you can use console.table(performance.timing) and click on the column heading to sort them by time.

Unminify JavaScript code to easily read and debug it

2021-06-08T00:00:00.000Z

Sometimes, the JavaScript code that runs on a website is minified and really hard to read. This is common in production.

You can unminify code in DevTools to read it more easily, and also set breakpoints.

Open a file in the Sources or Debugger panel
Click on the {} icon at the bottom of the source code

Highlight all the elements that a CSS rule matches

2021-06-08T00:00:00.000Z

When you want to know which elements a given CSS rule will apply to, in addition to the currently selected element, you can:

In Firefox:
- In the Style Editor panel: hover over any rule selector for some time.
- In the Rules panel: click on the selector icon next to any rule selector.
In Chrome, Edge or Safari:
- In the Styles panel: hover over any rule selector for some time.
In Polypane:
- In the Elements panel: Click the [+] icon next to each selector.

Expand DOM nodes recursively

2021-06-08T00:00:00.000Z

You can expand all descendants under a given DOM node in one go, to avoid having to expand each node one by one, which may take a while.

In Chrome and Edge
- Right-click on the node you want to expand and select "Expand recursively". You can also alt+click or option+click on the arrow next to the node.
In Firefox and Safari
- Right-click on the node you want to expand and select "Expand All". You can also alt+click or option+click on the arrow next to the node.

Edit CSS filters

2021-06-08T00:00:00.000Z

The filter property in CSS lets you change the way a particular element gets rendered.

Firefox provides a visual editor to play with CSS filters. You can add or remove filter functions from the list, re-order them, edit individual functions and even create presets that you can reuse later.

In the Rules panel, find an existing filter property, or add a new one.
Click on the filter swatch icon next to the filter value.

Learn more on MDN.

Use the debugger statement to pause script execution

2021-06-08T00:00:00.000Z

If you prefer to use console.log() statements rather than the JavaScript debugger because you find it difficult to set breakpoints in DevTools (or you can't), then you can use the debugger statement in JavaScript.

Where you normally add a console.log(), add a debugger, directly in the code
Open DevTools on your page
Trigger the action that will make your code run
The Sources panel (or Debugger panel in Firefox) will automatically open up, and pause script execution at that line, giving you a chance to see what are the values of local variables, the callstack, etc.