https://devtoolstips.org/ Skip to main content DevTools Tips * All tips * Categories + accessibility + apps + console + css + debug + export + frameworks + help + highlighter + html + javascript + network + perf + personalization + productivity + testing + webcomponents * Browsers + chrome + edge + firefox + polypane + safari Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations. 153 DevTools Tips * Customize the way objects look in DevTools Example of how a ColorCombo object looks in the Console tool of Chrome DevTools Objects appear in many places in DevTools. Most commonly in the Console tool, but also in various pa... Read more Categories: + personalization + frameworks Supported by: + edge + firefox + chrome * Inspect DevTools with DevTools Two Chrome DevTools windows, the first one inspects a webpage, the second one inspects the first one The user interface of DevTools is built with HTML, CSS, and JavaScript. This means you can inspect a... Read more Categories: + personalization + productivity Supported by: + edge + chrome + firefox * Create your own DevTools theme Chrome DevTools showing a custom theme where attribute names in the Elements tool are bolded You can change the color theme of DevTools to match your preference (see Change the color theme of D... Read more Categories: + personalization Supported by: + edge + chrome * Find memory leaks by comparing heap snapshots Microsoft Edge, with a demo webpage, and DevTools on the side with the Memory tool showing 2 snapshots have been recorded Note: If you think your memory leak comes from DOM nodes, you can also use the Detached Elements to... Read more Categories: + perf Supported by: + edge + chrome * Add custom headers to the network table Edge DevTools Network tool, showing a list of requests in the table, and the x-powered-by custom header as a column On the web, when a client (a browser) and a server communicate using HTTP, the requests and response... Read more Categories: + network Supported by: + edge + chrome * Find the CSS rule that causes a specific style to apply The Elements tool in Chrome, showing the Computed tab. The expander icon next to the CSS property has been clicked, revealing the stylesheet location where this style comes from Here is the scenario: you know there's a specific style that applies to an HTML element in your web... Read more Categories: + css + debug Supported by: + firefox + edge + chrome * Debug your Safari Web Apps on macOS The Develop menu in the Safari menu bar, showing different devices and debugging targets Starting with Safari 17 (announced at WWDC 2023) any website you use in Safari can be installed as a... Read more Categories: + apps Supported by: + safari * Understand when the Console opens in the main panel and in the drawer DevTools, with just one tool displayed, the Elements tool Have you noticed how the Console tool is sometimes displayed in a top-level tab (just like all other... Read more Categories: + help + personalization + console Supported by: + edge + chrome + firefox + safari * Know which of the font in a font-family was actually used Firefox, DevTools is opened on the side, showing the Inspector tool and the Rules sidebar tab. The font-family property shows a long list of fonts, with one of them being underlined The CSS font-family property let's you define a comma-separated list of fonts that the browser engin... Read more Categories: + css Supported by: + firefox * Find all elements with a specific style The Firefox DevTools Console tool, with the code shown on the left, and the resulting nodes listed on the right Let's say you want to list all of the elements on a page that are absolutely positioned. Or maybe yo... Read more Categories: + css + console + testing Supported by: + edge + chrome + firefox + safari + polypane * Inspect and debug iframes Firefox, with DevTools opened on the side, showing the iframe selector button in the toolbar If the page you are working on contains an iframe which you want to inspect and debug, you can actua... Read more Categories: + debug Supported by: + edge + chrome + firefox * Take high-resolution screenshots of web pages Firefox, with DevTools opened, and the Console tool visible, showing that :screenshot command Taking screenshots of all or parts of web pages is super useful (scroll down to the See Also part at... Read more Categories: + export Supported by: + firefox + chrome + edge * Customize the columns shown in console.table Example of a console.table output in Chrome DevTools showing a lot of columns, making it hard to read each column header The console.table method is great for displaying tabular data in the console, but what if the object... Read more Categories: + console Supported by: + edge + firefox + chrome + safari + polypane * Speed up or slow down a video Screenshot of the Console tool showing the playbackRate property You can speed up or slow down a video on a website by using the playbackRate property of the video e... Read more Categories: + console + personalization Supported by: + edge + chrome + firefox + safari * Debug your print CSS styles by simulating print media Firefox, with DevTools open, showing the Inspector tool, with the print media button If you work on a webpage that's supposed to be printed, you probably want to test your print CSS sty... Read more Categories: + css + testing Supported by: + edge + chrome + firefox + polypane + safari * Measure arbitrary distances in the page Firefox with DevTools docked on the side. The measure tool icon is in the DevTools toolbar and has been clicked. An arbitrary area has been defined on the page and its dimensions are displayed in a tooltip Do you need to find out the dimensions of any element or area in the page? Or perhaps the distance b... Read more Categories: + productivity Supported by: + firefox * Replay a XHR request Chrome's Network tool, with the Replay XHR contextual menu item When you're debugging an XHR request to a backend service that doesn't respond with the right things... Read more Categories: + network Supported by: + chrome + edge * Find broken links Polypane, with the outline panel open. Two of the links show a 404 error code The link to X on page Y doesn't work is probably a bug report you've received at some point. But how... Read more Categories: + testing Supported by: + polypane * List the fonts used on a page, or an element Firefox, with DevTools on the side, showing the Fonts panel that contains the list of fonts. One of the fonts is hovered "What font is that?" or "Why is this font used?" are probably questions you've a... Read more Categories: + css Supported by: + edge + chrome + firefox + polypane * See network request paths instead of names in the Network tool The Network tool in Edge, showing the contextual menu that's used to customize the network list columns By default, the Network tool displays the name of each requested resource. For example, if a webpage... Read more Categories: + network Supported by: + edge + chrome + firefox * Display the current framerate of your webpage Chrome, with the FPS meter in the webpage, and DevTools opened to the side, showing the FPS command in the Command Menu For a super smooth user experience on your website or app, it's better if the browser manages to ren... Read more Categories: + perf Supported by: + edge + chrome * Detect unused CSS and JavaScript code Edge DevTools, with the Coverage tool in the drawer, showing a list of files, and the Sources tool in the main panel, showing one of the files with red and blue bars in the gutter, which indicates which lines are unused vs. used To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that... Read more Categories: + perf + css + javascript Supported by: + edge + chrome + safari * Throttle your CPU The Performance tool in Chrome showing the CPU throttling drop-down. Your development machine is very likely much more powerful than the devices your users have (which a... Read more Categories: + perf Supported by: + edge + chrome * See the size of the transferred data for images, scripts, or other resources The Network tool in Chrome, with the transferred size highlighted To know how much data your website transfers between the server and the client to display images, or... Read more Categories: + network + perf Supported by: + edge + chrome + firefox + safari * View console logs from non-Safari browsers on an iPhone Edge on iOS, showing the about:inspect page, filled with logs Using the about:inspect special page you can see your website's logs in Chrome or Edge running on iP... Read more Categories: + debug + console Supported by: + edge + chrome * Home * Page 1 * Page 2 * Page 3 * Page 4 * Page 5 * Page 6 Have ideas for other tips? We'd love you to submit them on our GitHub repository! Find us on Twitter and Mastodon.