Help us make DevTools Tips better! Fill out this survey to tell us more about your DevTools habits and frustrations.
-
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