DevTools Tips

Sometimes pausing execution when a line of JavaScript is executed is too much, sometimes you only want to know that the line was executed at all, not pause there.

Some users make use of assistive technology, like screen readers (e.g.

The various resources loaded by your site aren't always guaranteed to reach your users when they visit your site.

When creating or modifying a design prototype for the web, you may want to quickly edit content in the browser without having to find the relevant code.

Have you ever wanted to know what caused a specific DOM node or element to be created in the page?

While you may develop your website on a fast network connection at home or at work, your users may not be able to use it with an equally fast connection.

Firefox features a position editor that lets you move elements in the page by drag and drop.

You can easily copy an element's XPath expression from DevTools.

Font CSS properties such as font-size, line-height or letter-spacing can be expressed in multiple different length units (like many other CSS properties).

If you want to learn more about what other tools exist in a browser, or what features a given tool provides, you can find reference documentation from all the major browsers here: Firefox Developer Tools Edge Developer Tools Chrome Developer Tools Safari…

If you need to move nodes or elements around in the DOM tree, to re-order things in the page, you can do it by drag and dropping nodes around in the Elements (or Inspector) panel.

Being able to sample colors from the page is super useful.

This is not really a tip, but rather an interesting thing to be aware of when debugging JavaScript.

Users who do not or can't use a mouse or trackpad can use the tab key to navigate through focusable elements on the page.

With HTML, you can add alternative text to images using the alt attribute.

The console.log output can be styled in DevTools using CSS. console.log('%c Hello World', 'color: orange; font-size: 2em;');

Simple, yet powerful, * { outline: 1px solid red; } is a useful debugging trick that helps understanding the page structure, finding overflow bugs or understand why elements are being pushed away for no apparent reason.

By default, the messages displayed in the console get removed as soon as you refresh the page (or navigate to a new page).

$ and $$ are 2 functions you can use in the console to find elements in the page.

In CSS, several different properties use angle unit values, such as the rotate() function of a transform or the linear-gradient orientation of a background-image, and more.

People who visit your web pages may have different types of color vision deficiencies that, if you incorrectly use colors for meaning, may affect their experience.

The console panel supports a very handy copy() function that stringifies and copies anything you pass to it as an argument, so you can then paste it somewhere else.

The clip-path property is a great way to change the final shape of an element and give it the shape that you want.

In Firefox, when inspecting elements (in the Inspector panel), you can click on the custom badge to go straight to the custom element's JavaScript source code.

If you selected an element in the Elements panel (in Chrome, Safari, Polypane or Edge) or the Inspector panel (in Firefox), you can refer to it in the console using $0.

In Edge, Polypane and Chrome, whenever you use the element selector and hover over elements in the page, a tooltip appears with, among other things, some accessibility information about the hovered element.

Chrome and Edge both have a visual editor useful for tweaking flexbox and grid alignment properties.

The Network panel lets you filter requests by status code, or mime type, and more.

When logging performance.timing events to the console, they appear in alphabetical order since they are properties of the PerformanceTiming object.

If you prefer to use console.log() statements rather than the JavaScript debugger because you find it difficult to set breakpoints in DevTools (or you can't), then you can use the debugger statement in JavaScript.

The filter property in CSS lets you change the way a particular element gets rendered.

You can expand all descendants under a given DOM node in one go, to avoid having to expand each node one by one, which may take a while.

When you want to know which elements a given CSS rule will apply to, in addition to the currently selected element, you can: In Firefox: In the Style Editor panel: hover over any rule selector for some time.

Sometimes, the JavaScript code that runs on a website is minified and really hard to read.