Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
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:
-
Check if a website uses third-party cookies
Cookies are small files that websites save on your computer when you visit them. Websites often use... Read moreSupported by:
-
Customize the way objects look in DevTools
Objects appear in many places in DevTools. Most commonly in the Console tool, but also in various pa... Read moreSupported by:
-
Inspect DevTools with DevTools
The user interface of DevTools is built with HTML, CSS, and JavaScript. This means you can inspect a... Read moreSupported by:
-
Find the CSS rule that causes a specific style to apply
Here is the scenario: you know there's a specific style that applies to an HTML element in your web... Read moreSupported by:
-
Understand when the Console opens in the main panel and in the drawer
Have you noticed how the Console tool is sometimes displayed in a top-level tab (just like all other... Read moreSupported by:
-
Know which of the font in a font-family was actually used
The CSS font-family property let's you define a comma-separated list of fonts that the browser engin... Read moreCategories:Supported 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:
-
Inspect and debug iframes
If the page you are working on contains an iframe which you want to inspect and debug, you can actua... Read moreSupported by:
-
Take high-resolution screenshots of web pages
Taking screenshots of all or parts of web pages is super useful (scroll down to the See Also part at... 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:
-
Speed up or slow down a video
You can speed up or slow down a video on a website by using the playbackRate property of the video e... 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:
-
Measure arbitrary distances in the page
Do you need to find out the dimensions of any element or area in the page? Or perhaps the distance b... 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:
-
See network request paths instead of names in the Network tool
By default, the Network tool displays the name of each requested resource. For example, if a webpage... Read moreSupported by:
-
See the size of the transferred data for images, scripts, or other resources
To know how much data your website transfers between the server and the client to display images, or... Read moreSupported by:
-
Disable abusive debugger statements that prevent inspecting websites
Some websites make it impossible to use DevTools by adding debugger statements in their code. The st... 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:
-
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:
-
List all supported console functions
You've probably already used console.log() in your code to print debugging values to the Console too... Read moreSupported by:
-
Understand flexbox item sizing
Flexbox is a great way to easily distribute elements and empty space in a row or a column, and creat... Read moreCategories:Supported 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:
-
Ignore JavaScript code to ease debugging
Debugging JavaScript can quickly get out of hand when you have a lot of code and many functions that... 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:
-
Use DevTools in another language
If you want to use DevTools in another language than English, you can do it across all major browser... 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:
-
Find inactive CSS styles
Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can... Read moreSupported by:
-
Inspect CSS animations
Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions,... Read moreSupported by:
-
Remove annoying page overlays and other elements
A lot of websites these days get covered with overlays and crammed with lots of ads and other things... Read moreSupported by:
-
Copy CSS selector of an element
Sometimes we need to uniquely identify an element that lacks an identifier, so that it can be refere... Read moreSupported by:
-
Jump from a label `for` attribute to the linked input (and more)
In Firefox, you can jump from an element that references the ID attribute of an other element, to th... Read moreCategories:Supported by:
-
Edit an element's attributes and tag name with the keyboard
Using the keyboard can be faster than using a mouse in certain cases (and for some people). One such... 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:
-
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:
-
Quickly reference React components in the console
Zee shared a great tip on Twitter if you are working with React and have the React DevTools extensio... Read moreSupported by:
-
Start your HTML and CSS prototypes in the browser directly
Sometimes I need a blank canvas to prototype an idea with HTML and CSS. Something outside of the web... Read moreSupported by:
-
Debug popups that appear on hover using the debugger statement
In Debug popups that appear on hover using JS we described how to pause the debugger to inspect popu... 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:
-
Debug CSS grid areas
A really useful way to position elements on a CSS grid is using the grid-template-areas property. Wi... 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:
-
Manipulate complex JSON files using DevTools
I often work with large amount of data that I need to go through and gather interesting information... 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:
-
Paste multiple CSS declarations at once
You know how you can paste a CSS property name or value in the Styles (or Rules) panel? Well, you ca... 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:
-
Remove or disable event listeners
When you're trying to debug something and event listeners on the page keep interfering with what you... 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:
-
Download all images from the page
If you want to download all of the images on a webpage in one go, you can use the following few line... Read moreSupported by:
-
Edit and resend faulty network requests to debug them
When you're investigating a bug where the backend you connect to doesn't respond with the right thin... Read moreSupported by:
-
Visualize the effect of CSS transforms
CSS transforms can sometimes be hard to wrap your head around, especially when chaining multiple tra... Read moreCategories:Supported by:
-
Scroll an element into view
If the inspected web page is long with a lot of elements, and its DOM tree is big and complex, it's... 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:
-
Move panels to re-arrange them
Moving panels around the user interface can be very useful to make DevTools more unique to you and a... Read moreSupported by:
-
Format console messages
You can use special formatters in the console.log function to format logs just the way you want. Us... Read moreSupported by:
-
Simulate pseudo CSS classes
If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these st... Read moreSupported by:
-
Zoom the DevTools UI to your liking
Do you find the UI of DevTools too small to comfortably work with? Because this UI is made of HTML a... 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:
-
Find and export CSS changes
If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Source... Read moreSupported by:
-
Evaluate XPath to find elements in the page
DevTools supports 2 ways to evaluate XPath expressions to help you locate elements in the page. All... Read moreSupported by:
-
Store a node as a variable to use it in the console
If you want to use a DOM node from the page in the console: Right-click the node in the Elements (o... Read moreSupported by:
-
Console.log() for the web with logpoints
Using the console to log some information is a very common way to debug your JavaScript. But you can... Read moreSupported by:
-
Debug popups that appear on hover using JS
Have you ever been frustrated because you couldn't style a popup or tooltip that appeared on hover?... Read moreSupported by:
-
Pause script execution when the DOM changes
If you want to know what JavaScript code removes, adds, or modifies a DOM element in the page, you c... Read moreSupported by:
-
Convert color formats
Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexa... Read moreSupported by:
-
Change the color theme of DevTools
Chrome, Firefox and Safari all have a light and dark theme for their DevTools. On top of these two t... Read moreSupported by:
-
Block resources to test your site without CSS or JavaScript
The various resources loaded by your site aren't always guaranteed to reach your users when they vis... 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:
-
Edit CSS absolute and relative positions by dragging points in the page
Firefox features a position editor that lets you move elements in the page by drag and drop. This wo... Read moreCategories:Supported by:
-
Copy an element's XPath expression
You can easily copy an element's XPath expression from DevTools. This is useful if you need this exp... Read moreSupported by:
-
Convert font property units
Font CSS properties such as font-size, line-height or letter-spacing can be expressed in multiple di... 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:
-
Drag and drop nodes in the DOM tree
If you need to move nodes or elements around in the DOM tree, to re-order things in the page, you ca... Read moreSupported by:
-
Event listeners are suppressed when paused
This is not really a tip, but rather an interesting thing to be aware of when debugging JavaScript.... 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:
-
Apply CSS styles to console messages
The console.log output can be styled in DevTools using CSS. console.log('%c Hello World', 'color: or... 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:
-
Edit clip-path and shape-outside CSS properties by dragging points in the page
The clip-path property is a great way to change the final shape of an element and give it the shape... Read moreCategories:Supported by:
-
Copy an object from the console
The console panel supports a very handy copy() function that stringifies and copies anything you pas... 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:
-
Find your web component's custom element code
In Firefox, when inspecting elements (in the Inspector panel), you can click on the custom badge to... Read moreCategories:Supported by:
-
Filter requests in the Network panel by status code, mime type and more
The Network panel lets you filter requests by status code, or mime type, and more. Click in the fil... Read moreSupported by:
-
Unminify JavaScript code to easily read and debug it
Sometimes, the JavaScript code that runs on a website is minified and really hard to read. This is c... 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:
-
Expand DOM nodes recursively
You can expand all descendants under a given DOM node in one go, to avoid having to expand each node... Read moreSupported by:
-
Edit CSS filters
The filter property in CSS lets you change the way a particular element gets rendered. Firefox provi... Read moreCategories:Supported by:
-
Use the debugger statement to pause script execution
If you prefer to use console.log() statements rather than the JavaScript debugger because you find i... Read moreSupported by: