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

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 chos

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

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 keyb

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 C

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

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 SafariGo to the Elements tool (called Inspector in Firefox).Hover over a CSS selector in the Styles pane.The specificity of the selector is displayed in a tooltip.In PolypaneOpen the Style tab of the Elements panel.The specificity is displayed next to each CSS selectors, to the right.Click on the specificity to see how the specificity for the selector is calculated.

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 s

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 t

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

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 accessibili

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.

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 Emu

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 insp

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 unde

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.

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 sho

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

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 Pol

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

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.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:Open DevTools.Focus your attention in the top-right corner of the webpage, and then resize the browser window (or the DevTools panel).In Firefox:Open DevTools and go to the Settings panel (F1).Under A

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: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.Open DevTools.Open the Inspector tool.Find the image you want to convert in the DOM tree and ri

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 Con

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:

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:

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 Applica

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 th

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 repre

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

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 dro

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

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 als

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:In Safari, go to Safari > Settings.Select the Advanced tab.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.

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 t

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 yo

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 g

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 express

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

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"]);:

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!

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:Open the Inspector tool.In the toolbar of the Rules sidebar tab, use the Toggle print media simulation for the page button.In Edge or Chrome:Open the Rendering tool (you can access it easily by using the Command menu and typing "Rendering").Scroll down to the Emulate CSS media type drop-down.Choose the Print option.In Polypane:Open the Emulation options.Toggle Media type to "print".Tip: open two panes side-by-side and set one to print media to compare the print and screen version

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.

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.

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.

"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

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.

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

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

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.

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 amoun

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 log

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 s

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:Open the Inspector tool.In the toolbar of the Rules sidebar tab, use the light and dark color scheme buttons.In Edge or Chrome:Open the Elements tool.In the toolbar of the Styles pane, open the Toggle common rendering emulations menu (it looks like a paint brush).Choose one of the prefers-color-sc

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.

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 menuToggle Web Vitals StatusEach 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.

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

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.

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 compilatio

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 b

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)

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.

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 eleme

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

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);Related:console.log() is great, but do you know console.table()? console.group()? console.assert()?The console documentation on MDN.The Console API specification.

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.To hide the information tooltip #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.To pin the highlight and information tooltip on the current element #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 infor

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 t

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.

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 rep

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 f

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 fu

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 brea

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:Create an extension that customizes the DevTools UI on learn.microsoft.com.Extending DevTools on developer.chrome.com.Extending the developer tools on MDN.Adding a web development tool to Safari Web Inspector on developer.apple.com.

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 Dev

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

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.

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 E

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!

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.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 FirefoxInspect an element that uses an animation in the Inspector tool (or a par

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.

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");

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.

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.

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:Detect low color contrast issues.Fix low color contrast issues.

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.

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!

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.

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

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

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 tabClick Copy StylesPaste the result in a text editor and use however you want.

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!

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

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.

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.

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.

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

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.

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.

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

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

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

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.

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

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

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, y

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!

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.

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.

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

When you're trying to debug something and event listeners on the page keep interfering with what you're doing, it can be frustrating.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.

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.

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.

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

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

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.

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

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

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.

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.

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 websi

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

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

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.

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

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

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

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

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

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 expre

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.

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.

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 ruleIn Chrome or Edge:The Changes panel (which you can open from the command menu by typing ctrl+shift+P or cmd+shift+P)

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.

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 focusPress ctrl+F (or cmd+F on Mac) to focus the search fieldEnter your XPath expression and press enter to find the elements that matchNote 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');

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!

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

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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 sourceIn Safari #The Elements tool in Safari Web Inspector allows you to visuali

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 panelRight-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 pageYou can also use the Network request blocking panel (which opens automatically when you block a request) to add, edit and remove URLs or URL patternsWith Firefox:Go to the Network panelRight-click on the request you want to block and select Block URLReload the pageYou can also use the Blocking sidebar (which opens automati

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 ConsoleEnter document.designMode="on" and press EnterTurn 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.

Have you ever wanted to know what caused a specific DOM node or element to be created in the page?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 tabCheck the Capture node creation stacks boxReload DevToolsMake 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 panelIn 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.

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

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

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) panelUse the context-menu (right-click) on the element you care aboutGo into the Copy sub-menuChoose the Xpath optionNote that you can then use this xpath expression to find elements again in DevTools.

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 FirefoxFind an element in the Inspector panel that has font properties which you'd like to changeSelect the Fonts sidebar tabUse the unit drop-downs next to Size, Line Height or Spacing to convert the current value to another unitIn Chrome or EdgeYou first need to enable the Fonts editor experimentGo to the DevTools settings (F1)Go to the Experiments tabCheck the "Enable the new Font Editor tool within the Styles pane" boxRe-start DevToolsFind an element in the Elements panel that has font properties which you'd like to changeClick on the Aa icon in the Styles sidebar, in the CSS rule that contains the property you want to convertUse the unit drop-downs next to Font Size, Line Height, Font Weight or Spacing to convert the current value to another unit

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:Firefox Developer ToolsEdge Developer ToolsChrome Developer ToolsSafari Web InspectorPolypane developer tools

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.

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

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 menuGo to the "More Tools" submenuClick on the Eyedropper menu itemThere is a second way to do this in Firefox from DevTools:Open the Inspector panelClick on the eye dropper button in the typ-right corner of the panelIn Polypane you also do not need devtoolsClick 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 itFind the color in the Styles pane and click on the color swatch icon next to itJust start moving the mouse over the page

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 panelIn the toolbar, check the "Show Tabbing Order" boxLearn 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

The console.log output can be styled in DevTools using CSS.console.log('%c Hello World', 'color: orange; font-size: 2em;');

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 a

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.

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

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" boxIn Safari:In the Console panel, check the "Preserve Log" box in the top toolbarIn Polypane:In the Console panel, check the "Preserve" box in the top toolbar

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.

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.

The clip-path property is a great way to change the final shape of an element and give it the shape that you want.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

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.

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.

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.

Chrome and Edge both have a visual editor useful for tweaking flexbox and grid alignment properties.Head over to the Elements panelSelect an element that is either a grid or flexbox containerIn the Styles sidebar pane, find the display: grid or display:flex declarationClick the little icon next to this declaration

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

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

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.

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 panelClick on the {} icon at the bottom of the source code

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.

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

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.

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 codeOpen DevTools on your pageTrigger the action that will make your code runThe 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.