Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Find the offset parent of an element
To know what an element is offset against horizontally or vertically (Which you do with position:rel... Read moreCategories:Supported by:
-
Highlight all elements on the page that match a given CSS selector
When you select an element in DevTools (in the Elements or Inspector tool), you see the CSS rules th... Read moreSupported by:
-
Find all elements with a specific style
Let's say you want to list all of the elements on a page that are absolutely positioned. Or maybe yo... Read moreSupported by:
-
Customize the columns shown in console.table
The console.table method is great for displaying tabular data in the console, but what if the object... Read moreSupported by:
-
Debug your print CSS styles by simulating print media
If you work on a webpage that's supposed to be printed, you probably want to test your print CSS sty... Read moreSupported by:
-
Find broken links
The link to X on page Y doesn't work is probably a bug report you've received at some point. But how... Read moreCategories:Supported by:
-
List the fonts used on a page, or an element
"What font is that?" or "Why is this font used?" are probably questions you've a... Read moreSupported by:
-
Emulate color schemes
In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers usin... Read moreSupported by:
-
Simulate multiple devices that are kept in sync
Instead of simulating devices one by one and switching between them, Polypane supports testing on mu... Read moreCategories:Supported by:
-
Show web vitals
Web vitals are a set of metrics that help you determine how well-built your page is. You can learn m... Read moreCategories:Supported by:
-
Autofill forms for testing
In Polypane you can right-click any form on the page and select Autofill form to add dummy values to... Read moreCategories:Supported by:
-
Reload a page when there's changes on disk
While working on a page locally and you're not using a hot reloading dev server, you need to reload... Read moreCategories:Supported by:
-
See formatted JSON responses
Edge (starting with 110), Firefox and Polypane all have a very nice JSON viewer tool that makes it e... Read moreSupported by:
-
Debug unwanted scrollbars
Sometimes scrollbars appear on a web page in places we don't want them to. And when this happens, it... Read moreSupported by:
-
Simulate different devices and screen sizes
There is a great mode in all major browser developer tools that makes it really easy to test your we... Read moreSupported by:
-
Install or create extensions to customize DevTools
There's a lot of tools in DevTools already, probably more than you use. But in some cases, you may n... Read moreSupported by:
-
Access results from recent Console evaluations
Imagine you evaluate a long expression like $$('*').map(el => Object.values(el.attributes).map(at... Read moreSupported by:
-
Get the recently selected DOM nodes in the console
If you type $0 in the Console tool, in any browser, the currently selected DOM node is returned. Thi... Read moreSupported by:
-
Empty the cache and hard refresh
Here is a nice tip to quickly empty your cache and refresh the page, in order to test new code chang... Read moreSupported by:
-
Create your own simulated devices
You can simulate various different devices from DevTools, to get an idea of how your webpage might r... Read moreSupported by:
-
Discover all the tools
DevTools is confusing! There's so much functionality packed in such a small UI. Did you know that Ch... Read moreSupported by:
-
Copy an elements styles
You can extract all the styles of an element in one go by using the Copy styles feature. No need to... Read moreSupported by:
-
Use document.designMode to spell check your webpage
Amelia Bellamy-Royds shared a really cool tip to spell-check a webpage's content from DevTools: Ope... Read moreSupported by:
-
Visualize and debug CSS cascade layers
CSS cascade layers is a CSS feature that allows web developers to define their CSS styles in multipl... Read moreSupported by:
-
Fix low color contrast issues
With DevTools you can detect low color contrast issues which is great. But Chrome DevTools, Edge Dev... Read moreSupported by:
-
console.log() is great, but do you know console.table()? console.group()? console.assert()?
You probably know about console.log() already, it's a great way to print variables and objects to th... Read moreSupported by:
-
Emulate forced-color mode
Operating systems offer an accessibility feature where the colors shown on the screen are converted... Read moreSupported by:
-
Send feedback, ask for features and report bugs
Browser vendors depend on your feedback to build the right tools for you. Without hearing from you... Read moreSupported by:
-
Detect low color contrast issues
Low color vision is very common, and your choice of text and background colors can negatively impact... Read moreSupported by:
-
Use full browser window for device emulation
Emulating different devices in the browser is incredibly useful. It gets tricky when you are on a de... Read moreSupported by:
-
Find HTML parsing errors
DevTools is so full of features these days that we hardly ever use View-Source anymore. But it turns... Read moreSupported by:
-
Select elements with pointer-events:none by holding Shift
When selecting elements from the page they normally get highlighted on hover and selected on click.... Read moreSupported by:
-
Write code on multiple lines in the Console
If you're feeling adventurous and want to write longer pieces of code in the Console to execute more... Read moreSupported by:
-
Take a screenshot of a single node
In Firefox, Chrome, Polypane and Edge DevTools, you can screenshot a single node from the page. Go... Read moreSupported by:
-
Automatically logging name and value in console.log()
Using the console of DevTools you can to log some information to debug your JavaScript. The common w... Read moreSupported by:
-
Easily change CSS number values from the keyboard in increments of 0.1, 1, 10, 100
When playing with styling or layout code in DevTools, it's useful to be able to change widths, margi... Read moreSupported by:
-
Prototype content changes with designMode
When creating or modifying a design prototype for the web, you may want to quickly edit content in t... Read moreSupported by:
-
Throttle the network speed to test your website on slower connections
While you may develop your website on a fast network connection at home or at work, your users may n... Read moreSupported by:
-
Find DevTools reference documentation
If you want to learn more about what other tools exist in a browser, or what features a given tool p... Read moreSupported by:
-
Sample colors from the page
Being able to sample colors from the page is super useful. Firefox, Edge and Chrome all allow you to... Read moreSupported by:
-
Visualize the tabbing order on the page
Users who do not or can't use a mouse or trackpad can use the tab key to navigate through focusable... Read moreSupported by:
-
Find all images without alternative text
With HTML, you can add alternative text to images using the alt attribute. It can be used to add a t... Read moreSupported by:
-
Draw a box around all elements to debug your CSS and page structure
Simple, yet powerful, * { outline: 1px solid red; } is a useful debugging trick that helps understan... Read moreSupported by:
-
Find DOM elements from the console
$ and $$ are 2 functions you can use in the console to find elements in the page. They are essential... Read moreSupported by:
-
Persist console messages across page navigations and reloads
By default, the messages displayed in the console get removed as soon as you refresh the page (or na... Read moreSupported by:
-
Simulate color vision deficiencies
People who visit your web pages may have different types of color vision deficiencies that, if you i... Read moreSupported by:
-
Get the selected element in the console
If you selected an element in the Elements panel (in Chrome, Safari, Polypane or Edge) or the Inspec... Read moreSupported by:
-
See quick accessibility information on hover
In Edge, Polypane and Chrome, whenever you use the element selector and hover over elements in the p... Read moreSupported by:
-
Highlight all the elements that a CSS rule matches
When you want to know which elements a given CSS rule will apply to, in addition to the currently se... Read moreSupported by: