171 DevTools Tips
-
Test your PWA protocol handlers
Progressive Web Apps (PWA) can register themselves to handle URIs with pre-defined or custom protocols (such as mailto, geo, or web+foo). This is a great capability that makes it possible for installe... 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 easy to view JSON responses from your server directly in the browser window. You don't even need to o... Read moreSupported by:
-
Emulate idle detection states
The Idle Detection API is useful for web developers to detect when the user isn't interacting with their device. This can be useful for chat applications, for example, to mark the user as away. Note:... 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's not always very straightforward to fix the problem. Which container is responsible for the scroll... Read moreSupported by:
-
Find the most expensive CSS selectors
When it comes to performance, we often spend time improving our JavaScript code. But CSS has a role to play too. CSS selectors, in particular, can sometimes be slow to match to the DOM of the page. Be... 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 tool in DevTools. But the console namespace actually has many other functions too! To list them all, op... Read moreSupported by:
-
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, and an information tooltip follows your mouse around and gives you information about the hovered ele... 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 create interesting layouts. It only takes a couple of CSS properties to create nice layouts that automati... Read moreCategories:Supported by:
-
Customize keyboard shortcuts
DevTools comes with tons of keyboard shortcuts. Some are well known (like F12 to open DevTools), but there are many others which you might not be familiar with, and which could make your life easier.... Read moreSupported by:
-
Re-use scripts as snippets
The Console is great to write short JavaScript expressions that read from the document or manipulate it. But it's also a terrible editor. You can actually use a full editor in Edge, Chrome, and Safari... Read moreSupported by:
-
Simulate different devices and screen sizes
All browser DevTools have a built-in mode that you can use to test a webpage under different screen sizes and device capabilities. As a web developer, it is very important to realize that your website... 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 call each other. What's even worse is when a lot of this code isn't even yours. This can happen whe... Read moreSupported by:
-
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 whether that fixes the bug. Usually, this involves the following steps: Pause at a breakpoint, or an... 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 need very specific tools that aren't available by default. Thankfully, DevTools can be extended with... 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 browsers. In Firefox, DevTools will always match the language of the browser, so if you downloaded Firefox... Read moreSupported by:
-
Access results from recent Console evaluations
Imagine you evaluate a long expression like $$('*').map(el => Object.values(el.attributes).map(attr => {return {name: attr.name, value: attr.value}})) which extracts the attributes from all of t... Read moreSupported by:
-
Simulate a different latitude/longitude geolocation
If your website has features that depend on the geographic location of your users, you can test these features by simulating different geolocations right from DevTools! Chrome and Edge DevTools have a... 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 be frustrating. Indeed, there are many cases where a CSS declaration has no effect on an element. On... 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. This is very handy. To learn more, check Get the selected element in the console. On top of this, in Ed... Read moreSupported by:
-
Inspect CSS animations
Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions, and Web animations. These tools not only help you debug animations, but also let you modify the vari... 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 that make it hard to just read the content of the page. To get rid of an annoying overlay, or any o... 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 referenced in JavaScript and other places. All the major browsers have an option to build a unique CSS sel... Read moreSupported by:
-
Copy an element's JavaScript path
JavaScript often needs references to DOM nodes on the page. Getting a reference is sometimes easy with document.getElementById() or similar. Other times however, a more complicated CSS selector needs... 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 that other element, by Cmd+clicking (or Ctrl+clicking) the attribute. Here is a common example for whe... 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 one to keep in mind. It's not straightforward to use and takes a few steps, but makes it very nice to... Read moreSupported by: