DevTools Tips

Use Firefox's Local Mode to test local files without having to set up a web server.

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.

Applications are often made up of multiple subsystems or components, each with its own set of log messages.

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.

The Performance tool lets you add custom tracks with your own custom events, when recording performance traces.

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.

It can be helpful to make quick changes to the source code that a site uses, especially when debugging a site in production.

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

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.

When you scroll through a webpage, or when parts of the webpage change, the browser engine sometimes needs to repaint parts of the page.

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.

The specificity of a CSS selector is a score that the browser computes based on the different parts of the selector.

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 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.

In CSS, the cascade plays a very important role in which CSS properties apply to an element.

The accessibility tree is a representation of the structure of a web page that is used by assistive technologies such as screen readers.

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.

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.

Browsers often add elements to the DOM of your web pages on top of the ones you, yourself, defined.

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

There are two levels to consider when talking about blocking (or disabling) DevTools in a browser: Disabling DevTools at the browser level.

Unlike other browsers, Safari hides its DevTools (and other developer-related features) by default.

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.

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.

When using breakpoints to debug your JavaScript code, sometimes you end up setting many breakpoints in different functions.

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.

A data URL is a URL that starts with the prefix data: instead of http: or https:.

Certain web APIs are user gesture restricted.

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.

When you select an element in DevTools (in the Elements or Inspector tool), you see the CSS rules that apply to it.

Cookies are small files that websites save on your computer when you visit them.

Objects appear in many places in DevTools.

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 user interface of DevTools is built with HTML, CSS, and JavaScript.

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.

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.

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.

Starting with Safari 17 (announced at WWDC 2023) any website you use in Safari can be installed as a Web App on macOS.

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?

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.

Let's say you want to list all of the elements on a page that are absolutely positioned.

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.

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).

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?

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

If you work on a webpage that's supposed to be printed, you probably want to test your print CSS styles.

Do you need to find out the dimensions of any element or area in the page?

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.

The link to X on page Y doesn't work is probably a bug report you've received at some point.

"What font is that?"