Firefox DevTools Tips

When you select an element in DevTools (in the Elements or Inspector tool), you see the CSS rules th... Read more

Cookies are small files that websites save on your computer when you visit them. Websites often use... Read more

Objects appear in many places in DevTools. Most commonly in the Console tool, but also in various pa... Read more

The user interface of DevTools is built with HTML, CSS, and JavaScript. This means you can inspect a... Read more

Here is the scenario: you know there's a specific style that applies to an HTML element in your web... Read more

Have you noticed how the Console tool is sometimes displayed in a top-level tab (just like all other... Read more

Let's say you want to list all of the elements on a page that are absolutely positioned. Or maybe yo... Read more

If the page you are working on contains an iframe which you want to inspect and debug, you can actua... Read more

Taking screenshots of all or parts of web pages is super useful (scroll down to the See Also part at... Read more

The console.table method is great for displaying tabular data in the console, but what if the object... Read more

You can speed up or slow down a video on a website by using the playbackRate property of the video e... Read more

If you work on a webpage that's supposed to be printed, you probably want to test your print CSS sty... Read more

"What font is that?" or "Why is this font used?" are probably questions you've a... Read more

By default, the Network tool displays the name of each requested resource. For example, if a webpage... Read more

To know how much data your website transfers between the server and the client to display images, or... Read more

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

In CSS, you can use the prefers-color-scheme media feature (docs) to detect if the user prefers usin... Read more

Edge (starting with 110), Firefox and Polypane all have a very nice JSON viewer tool that makes it e... Read more

Sometimes scrollbars appear on a web page in places we don't want them to. And when this happens, it... Read more

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

There is a great mode in all major browser developer tools that makes it really easy to test your we... Read more

Debugging JavaScript can quickly get out of hand when you have a lot of code and many functions that... Read more

There's a lot of tools in DevTools already, probably more than you use. But in some cases, you may n... Read more

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

Imagine you evaluate a long expression like $$('*').map(el => Object.values(el.attributes).map(at... Read more

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

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

A lot of websites these days get covered with overlays and crammed with lots of ads and other things... Read more

Sometimes we need to uniquely identify an element that lacks an identifier, so that it can be refere... Read more

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

You can simulate various different devices from DevTools, to get an idea of how your webpage might r... Read more

DevTools is confusing! There's so much functionality packed in such a small UI. Did you know that Ch... Read more

Amelia Bellamy-Royds shared a really cool tip to spell-check a webpage's content from DevTools: Ope... Read more

CSS cascade layers is a CSS feature that allows web developers to define their CSS styles in multipl... Read more

Zee shared a great tip on Twitter if you are working with React and have the React DevTools extensio... Read more

Sometimes I need a blank canvas to prototype an idea with HTML and CSS. Something outside of the web... Read more

In Debug popups that appear on hover using JS we described how to pause the debugger to inspect popu... Read more

You probably know about console.log() already, it's a great way to print variables and objects to th... Read more

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

Browser vendors depend on your feedback to build the right tools for you. Without hearing from you... Read more

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

Low color vision is very common, and your choice of text and background colors can negatively impact... Read more

You know how you can paste a CSS property name or value in the Styles (or Rules) panel? Well, you ca... Read more

Emulating different devices in the browser is incredibly useful. It gets tricky when you are on a de... Read more

When you're trying to debug something and event listeners on the page keep interfering with what you... Read more

DevTools is so full of features these days that we hardly ever use View-Source anymore. But it turns... Read more

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

If you're feeling adventurous and want to write longer pieces of code in the Console to execute more... Read more

If you want to download all of the images on a webpage in one go, you can use the following few line... Read more

When you're investigating a bug where the backend you connect to doesn't respond with the right thin... Read more

If the inspected web page is long with a lot of elements, and its DOM tree is big and complex, it's... Read more

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

Using the console of DevTools you can to log some information to debug your JavaScript. The common w... Read more

Moving panels around the user interface can be very useful to make DevTools more unique to you and a... Read more

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

If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these st... Read more

Do you find the UI of DevTools too small to comfortably work with? Because this UI is made of HTML a... Read more

When playing with styling or layout code in DevTools, it's useful to be able to change widths, margi... Read more

If you spent time changing CSS in DevTools, either in the Rules panel (in Firefox), or in the Source... Read more

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

If you want to use a DOM node from the page in the console: Right-click the node in the Elements (o... Read more

Using the console to log some information is a very common way to debug your JavaScript. But you can... Read more

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

If you want to know what JavaScript code removes, adds, or modifies a DOM element in the page, you c... Read more

Colors in CSS can be expressed in a number of different formats: keyword (e.g. blue), RGB, HSL, hexa... Read more

Chrome, Firefox and Safari all have a light and dark theme for their DevTools. On top of these two t... Read more

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

When creating or modifying a design prototype for the web, you may want to quickly edit content in t... Read more

While you may develop your website on a fast network connection at home or at work, your users may n... Read more

You can easily copy an element's XPath expression from DevTools. This is useful if you need this exp... Read more

Font CSS properties such as font-size, line-height or letter-spacing can be expressed in multiple di... Read more

If you want to learn more about what other tools exist in a browser, or what features a given tool p... Read more

If you need to move nodes or elements around in the DOM tree, to re-order things in the page, you ca... Read more

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

Being able to sample colors from the page is super useful. Firefox, Edge and Chrome all allow you to... Read more

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

The console.log output can be styled in DevTools using CSS. console.log('%c Hello World', 'color: or... Read more

With HTML, you can add alternative text to images using the alt attribute. It can be used to add a t... Read more

Simple, yet powerful, * { outline: 1px solid red; } is a useful debugging trick that helps understan... Read more

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

By default, the messages displayed in the console get removed as soon as you refresh the page (or na... Read more

People who visit your web pages may have different types of color vision deficiencies that, if you i... Read more

The console panel supports a very handy copy() function that stringifies and copies anything you pas... Read more

If you selected an element in the Elements panel (in Chrome, Safari, Polypane or Edge) or the Inspec... Read more

The Network panel lets you filter requests by status code, or mime type, and more. Click in the fil... Read more

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

When you want to know which elements a given CSS rule will apply to, in addition to the currently se... Read more

You can expand all descendants under a given DOM node in one go, to avoid having to expand each node... Read more

If you prefer to use console.log() statements rather than the JavaScript debugger because you find i... Read more