DevTools Tips

By default, the Network tool displays the name of each requested resource.

To make sure your webpage loads and appears fast for your users, load only the CSS and JS code that your page requires to appear correctly.

For a super smooth user experience on your website or app, it's better if the browser manages to render your page at a high framerate.

Your development machine is very likely much more powerful than the devices your users have (which are probably low-end mobile devices).

To know how much data your website transfers between the server and the client to display images, or scripts, or anything else: Open the Network tool.

Using the about:inspect special page you can see your website's logs in Chrome or Edge running on iPhone!

Some websites make it impossible to use DevTools by adding debugger statements in their code.

In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers using a light or a dark theme in their operating system.

In Polypane you can right-click any form on the page and select Autofill form to add dummy values to all input elements.

When a page loads, and all of its global objects are ready, but before the JavaScript code of the page actually kicks-in, is a great time to inject debugging code.

Web vitals are a set of metrics that help you determine how well-built your page is.

Instead of simulating devices one by one and switching between them, Polypane supports testing on multiple simulated devices and viewports at the same time.

While working on a page locally and you're not using a hot reloading dev server, you need to reload the browser yourself to see the change.

Scrollbars can sometimes appear on a webpage unexpectedly.

The Idle Detection API is useful for web developers to detect when the user isn't interacting with their device.

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.

Progressive Web Apps (PWA) can register themselves to handle URIs with pre-defined or custom protocols (such as mailto, geo, or web+foo).

When it comes to improving web rendering performance, we often spend time working on JavaScript code.

You've probably already used console.log() in your code to print debugging values to the Console tool in DevTools.

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 element.

DevTools comes with tons of keyboard shortcuts.

Flexbox is a great way to easily distribute elements and empty space in a row or a column, and create interesting layouts.

The Console is great to write short JavaScript expressions that read from the document or manipulate it.

All browser DevTools have a built-in mode that you can use to test a webpage under different screen sizes and device capabilities.

Sometimes, when debugging JavaScript code in DevTools, you may want to test a quick change and see whether that fixes the bug.

Debugging JavaScript can quickly get out of hand when you have a lot of code and many functions that call each other.

There's a lot of tools in DevTools already, probably more than you use.

If you want to use DevTools in another language than English, you can do it across all major browsers.

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 the DOM elements on the page.

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!

Sometimes we write CSS code that's entirely valid but has absolutely no effect at all, and this can be frustrating.

If you type $0 in the Console tool, in any browser, the currently selected DOM node is returned.

Modern browser DevTools provide a handy tool to inspect and modify CSS animations, CSS transitions, and Web animations.

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 uniquely identify an element that lacks an identifier, so that you can reference the element in JavaScript and other places, use DevTools' ability to copy unique CSS selectors.

JavaScript often needs references to DOM nodes on the page.

In HTML, it's possible for certain attributes to reference other elements by their IDs.

There are multiple ways to detect and fix color contrast issues with DevTools, but here is a nice one to keep in mind.

Here is a nice tip to quickly empty your cache and refresh the page, in order to test new code changes: In Chrome, or Edge, open DevTools (F12).

Sometimes, either by accident or on purpose, HTML elements end up outside of the visible browser viewport.

Using the keyboard can be faster than using a mouse in certain cases (and for some people).

You can simulate various different devices from DevTools, to get an idea of how your webpage might render on those devices (note that this is only a simulation, the tool only changes the screen dimensions, touch event handling, and user agent string, but…

DevTools is confusing!

You can extract all the styles of an element in one go by using the Copy styles feature.

Amelia Bellamy-Royds shared a really cool tip to spell-check a webpage's content from DevTools: Open DevTools, and go to the Console tool.

Cascade layers is a CSS feature that allows web developers to define their CSS styles in multiple layers and control the order in which these layers apply.

Edge has a very useful Issues panel that can automatically list a lot of different issues with your site.

You probably know about console.log() already, it's a great way to print variables and objects to the console while the code is running, to debug it.

In Debug popups that appear on hover using JS we described how to pause the debugger to inspect popups that appear on hover and disappear as soon as the cursor moves away.

With DevTools you can detect low color contrast issues which is great.