DevTools Tips

Sometimes I need a blank canvas to prototype an idea with HTML and CSS.

Zee shared a great tip on Twitter if you are working with React and have the React DevTools extension installed.

The Command menu in Edge and Chrome is a great way to do many of the things you can do in DevTools without having to navigate the UI.

A really useful way to position elements on a CSS grid is using the grid-template-areas property.

Most browsers are now able to instantly go back to previously visited pages without having to wait for them to load.

Operating systems offer an accessibility feature where the colors shown on the screen are converted to offer higher contrast.

I often work with large amount of data that I need to go through and gather interesting information from.

Browser vendors depend on your feedback to build the right tools for you.

Low color vision is very common, and your choice of text and background colors can negatively impact people's experience of your website.

You know how you can paste a CSS property name or value in the Styles (or Rules) panel?

If you want to know which element has the focus on the web page at any time, you can use a live expression in the Console tool.

Emulating different devices in the browser is incredibly useful.

Sometimes, you need to repeatedly test the same user scenario on a website.

When you're trying to debug something and event listeners on the page keep interfering with what you're doing, it can be frustrating.

DevTools is so full of features these days that we hardly ever use View-Source anymore.

When selecting elements from the page they normally get highlighted on hover and selected on click.

Note: This Microsoft Edge-specific feature is being removed starting with Edge 133.

All browser DevTools have a few built-in functions in the console to do things like get the current element, or copy a string.

If you want to download all of the images on a webpage in one go, you can use the following few lines of JavaScript code to do it: $$('img').forEach(async (img) => { try { const src = img.src; // Fetch the image as a blob.

If you're feeling adventurous and want to write longer pieces of code in the Console to execute more complex things, it can quickly become difficult.

When you're investigating a bug where the backend you connect to doesn't respond with the right things it's useful to tweak the requests and try again quickly.

How do certain CSS properties apply to the page isn't always an easy question to answer.

CSS transforms can sometimes be hard to wrap your head around, especially when chaining multiple transformations.

Do you use a CSS-in-JS framework?

If the inspected web page is long with a lot of elements, and its DOM tree is big and complex, it's easy to get lost, not knowing where the selected element is in the page.

Using the console of DevTools you can to log some information to debug your JavaScript.

In Firefox, Chrome, Polypane and Edge DevTools, you can screenshot a single node from the page.

Taking a photo of a mobile device or tablet is daunting as you have to deal with fingerprints, glare and focus issues.

Moving panels around the user interface can be very useful to make DevTools more unique to you and adapted to your needs.

You can use special formatters in the console.log function to format logs just the way you want.

If you use :hover, :active, or other pseudo-classes in your CSS code, it can be tedious to test them.

DevTools supports 2 ways to evaluate XPath expressions to help you locate elements in the page.

There is a command menu in Edge and Chrome that allows you to quickly access many different features of DevTools without having to navigate the UI.

If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Sources or Styles panels (in Chrome or Edge), and you don't remember all of the changes you made, you can find and extract them easily from: In Firefox or Safari:

Edge has a feature called the DevTools Tooltips that gives you help about the different tools right inside of DevTools.

When playing with styling or layout code in DevTools, it's useful to be able to change widths, margins, and other CSS number values quickly.

Using the Console of DevTools to log information that changes a lot is a bad idea.

See your page in 3 dimensions to quickly find out how deeply nested it is, fix z-index stacking issues, and performance issues.

Do you find the UI of DevTools too small to comfortably work with?

If you want to use a DOM node from the page in the console: Right-click the node in the Elements (or Inspector in Firefox).

Have you ever been frustrated because you couldn't style a popup or tooltip that appeared on hover?

Using the console to log some information is a very common way to debug your JavaScript.

You can use the monitorEvents global function in the Console panel to log all of the events dispatched on a particular element.

If you don't remember the CSS syntax for the box-shadow property (and who does!)

If you want to hide scripts and other resources loaded by browser extensions in the Network panel, use the -scheme:chrome-extension pattern in the filter input box.

CSS custom properties (also called variables) are very useful to avoid repeating values in CSS, like colors for example.

If you want to know what JavaScript code removes, adds, or modifies a DOM element in the page, you can use DOM breakpoints in DevTools.

Chrome, Firefox and Safari all have a light and dark theme for their DevTools.

Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexadecimal, and others.

The periodic background sync API, available to PWAs is a great way to fetch new content while the user isn't on the site, and while they have access to the network, to make sure they have the latest content when they come back to the app.