Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
Replay a XHR request
When you're debugging an XHR request to a backend service that doesn't respond with the right things... Read moreCategories: Supported 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 more -
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 more -
Display the current framerate of your webpage
For a super smooth user experience on your website or app, it's better if the browser manages to ren... Read more -
Detect unused CSS and JavaScript code
To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that... Read more -
Throttle your CPU
Your development machine is very likely much more powerful than the devices your users have (which a... Read more -
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 more -
View console logs from non-Safari browsers on an iPhone
Using the about:inspect special page you can see your website's logs in Chrome or Edge running on iP... Read more -
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 more -
Emulate color schemes
In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers usin... Read more -
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: -
Manipulate global objects on page load, before other scripts run
When a page loads, and all of its global objects are ready, but before the JavaScript code of the pa... 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: -
Test your PWA protocol handlers
Progressive Web Apps (PWA) can register themselves to handle URIs with pre-defined or custom protoco... Read more -
See formatted JSON responses
Edge (starting with 110), Firefox and Polypane all have a very nice JSON viewer tool that makes it e... Read more -
Emulate idle detection states
The Idle Detection API is useful for web developers to detect when the user isn't interacting with t... Read moreCategories: Supported 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 more -
Find the most expensive CSS selectors
When it comes to performance, we often spend time improving our JavaScript code. But CSS has a role... Read moreCategories: Supported 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 more -
Hide or pin the information tooltip while inspecting page elements
When selecting elements from the page using the inspect tool, the hovered elements get highlighted,... Read more -
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: -
Customize keyboard shortcuts
DevTools comes with tons of keyboard shortcuts. Some are well known (like F12 to open DevTools), but... Read more -
Re-use scripts as snippets
The Console is great to write short JavaScript expressions that read from the document or manipulate... Read more -
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 more -
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 more -
Edit JavaScript functions while debugging to test a quick fix
Sometimes, when debugging JavaScript code in DevTools, you may want to test a quick change and see w... Read more -
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 more -
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 more -
Access results from recent Console evaluations
Imagine you evaluate a long expression like $$('*').map(el => Object.values(el.attributes).map(at... Read more -
Simulate a different latitude/longitude geolocation
If your website has features that depend on the geographic location of your users, you can test thes... Read more -
Find inactive CSS styles
Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can... Read more -
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 more -
Inspect CSS animations
Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions,... Read more -
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 more -
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 more -
Copy an element's JavaScript path
JavaScript often needs references to DOM nodes on the page. Getting a reference is sometimes easy wi... Read more -
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: -
Fix color contrast issues using the element tooltip
There are multiple ways to detect and fix color contrast issues with DevTools, but here is a nice on... Read more -
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 more -
Quickly spot out-of-viewport elements
Sometimes, either by accident or on purpose, HTML elements end up outside of the visible browser vie... 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 more -
Create your own simulated devices
You can simulate various different devices from DevTools, to get an idea of how your webpage might r... Read more -
Discover all the tools
DevTools is confusing! There's so much functionality packed in such a small UI. Did you know that Ch... Read more -
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 more -
Use document.designMode to spell check your webpage
https://twitter.com/AmeliasBrain/status/1521146127327801345... Read more
-
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 more -
Automatically get issues your site has with performance, accessibility, security, compatibility, and others.
Edge has a very useful Issues panel that can automatically list a lot of different issues with your... Read moreCategories: Supported by: -
Take a screenshot of part of a webpage from the command menu
The Command menu in Edge and Chrome is great. Here is one more thing it can do: https://twitter.com/... Read more
-
Quickly reference nodes, expressions, and react components in the console
https://twitter.com/ChatterboxDev/status/1506299424712142864 Also learn more about getting the selec... Read more
-
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 more -
Fix low color contrast issues
With DevTools you can detect low color contrast issues which is great. But DevTools in Chrome, Polyp... Read more -
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 more
-
console.log() is great, but do you know console.table()? console.group()? console.assert()?
https://twitter.com/nghuuphuoc/status/1505892172700299268... Read more
-
Debug CSS grid areas
A really useful way to position elements on a CSS grid is using the grid-template-areas property. Wi... Read more -
Emulate forced-color mode
Operating systems offer an accessibility feature where the colors shown on the screen are converted... Read more -
Check if your site can be instantly reloaded from bfcache
Most browsers are now able to instantly go back to previously visited pages without having to wait f... Read more -
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 more -
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 more -
Detect low color contrast issues
Low color vision is very common, and your choice of text and background colors can negatively impact... Read more -
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 more -
Detect the element with focus at any time
If you want to know which element has the focus on the web page at any time, you can use a live expr... Read more -
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 more -
Record and replay user flows
Have you ever had to test the same user scenario again and again while working on a fix or performan... Read moreCategories: Supported 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 more -
Find HTML parsing errors
DevTools is so full of features these days that we hardly ever use View-Source anymore. But it turns... Read more -
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 more -
Query object instances and holders from the console
All browser DevTools have a few built-in functions in the console to do things like get the current... Read moreCategories: Supported by: -
Get detached DOM elements to investigate memory leaks
Memory leaks can quickly become a big problem for long-running applications, and a common source of... Read moreCategories: Supported 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 more -
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 more -
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 more -
Highlight the effect of individual CSS properties on hover
How do certain CSS properties apply to the page isn't always an easy question to answer. While some... Read more -
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: -
Copy a CSS rule as CSS-in-JS format
Do you use a CSS-in-JS framework? If so, you know how frustrating it can be to copy CSS from DevTool... Read more -
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 more -
Take screenshots of your site in a device frame
Taking a photo of a mobile device or tablet is daunting as you have to deal with fingerprints, glare... Read more -
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 more -
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 more -
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 more -
Format console messages
You can use special formatters in the console.log function to format logs just the way you want. Us... Read more -
Simulate pseudo CSS classes
If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these st... Read more -
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 more -
See the page in 3D
See your page in 3 dimensions to quickly find out how deeply nested it is, fix z-index stacking issu... Read more -
Cut down on console noise using live expressions
Using the Console of DevTools to log information that changes a lot is a bad idea. First of all, you... Read more -
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 more -
Get contextual DevTools help
Edge has a feature called the DevTools Tooltips that gives you help about the different tools right... Read moreCategories: Supported 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 more -
Use commands to do things faster
There is a command menu in Edge and Chrome that allows you to quickly access many different features... Read more -
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 more -
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 more -
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 more -
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 more -
Monitor all events dispatched on an element
You can use the monitorEvents global function in the Console panel to log all of the events dispatch... Read more -
Edit CSS shadow visually
If you don't remember the CSS syntax for the box-shadow property (and who does!), then Chrome and Ed... Read more -
Hide resources loaded by extensions in the Network panel
If you want to hide scripts and other resources loaded by browser extensions in the Network panel, u... Read more -
Jump from a CSS variable usage to where it is defined
CSS custom properties (also called variables) are very useful to avoid repeating values in CSS, like... Read more -
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 more -
Convert color formats
Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexa... Read more -
Change the color theme of DevTools
Chrome, Firefox and Safari all have a light and dark theme for their DevTools. Edge not only has tho... Read more -
Force PWA periodic background syncs
The periodic background sync API, available to PWAs is a great way to fetch new content while the us... Read more -
Play a sound when a line of JavaScript is executed
Sometimes pausing execution when a line of JavaScript is executed is too much, sometimes you only wa... Read moreCategories: Supported by: -
Visualize the screen reader order for elements within the page
Edge has an accessibility tab within the elements panel that, among other things, lets you visualize... Read more -
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 more -
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 more -
Capture node creation stack traces
Have you ever wanted to know what caused a specific DOM node or element to be created in the page? W... Read more -
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 more -
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 more -
Convert font property units
Font CSS properties such as font-size, line-height or letter-spacing can be expressed in multiple di... Read more -
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 more -
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 more -
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 more -
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 more -
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 more -
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 more -
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 more -
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 more -
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 more -
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 more -
Simulate color vision deficiencies
People who visit your web pages may have different types of color vision deficiencies that, if you i... Read more -
Edit CSS angles
In CSS, several different properties use angle unit values, such as the rotate() function of a trans... Read more -
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 more -
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 more -
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: -
Tweak css grid and flexbox alignment properties
Chrome and Edge both have a visual editor useful for tweaking flexbox and grid alignment properties.... Read more -
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 more -
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 more -
View performance markers in order
When logging performance.timing events to the console, they appear in alphabetical order since they... Read more -
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 more -
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 more -
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 more -
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 more