A collection of useful, cross-browser, tips and tricks to get more comfortable with using DevTools.
Use Firefox's Local Mode to test local files without having to set up a web server. Certain web APIs require to use a web server to work properly. For example, navigator.clipboard requires a secure context (HTTPS or localhost). Many web projects have a local dev server built-in which, once started, lets you access your site locally via http://localhost:8080 or similar. However, sometimes you just…
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…
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…
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 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…
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…
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,…
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…
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 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…
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…
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,…
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…
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:…
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,…
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…
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…
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,…
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…
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…
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…
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…
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,…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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…
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,…
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,…
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…
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…
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…
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…
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…
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…
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…
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…
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.…
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…
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…
"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",…