Firefox DevTools Tips

Edit an element's attributes and tag name with the keyboard GIF animation of a part of the Inspector panel in Firefox, showing how pressing Enter on a focused element goes into edit mode and how Tab allows to navigate from field to field

GIF animation of a part of the Inspector panel in Firefox, showing how pressing Enter on a focused element goes into edit mode and how Tab allows to navigate from field to field

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

Categories:

Supported by:

Create your own simulated devices GIF animation of the device mode in Firefox, showing how to customize the list of devices, including adding custom devices

GIF animation of the device mode in Firefox, showing how to customize the list of devices, including adding custom devices

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

Categories:

testing

Supported by:

Discover all the tools The list of most tools in Edge DevTools, just to illustrate how many there are

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

Categories:

help

Supported by:

Use document.designMode to spell check your webpage

https://twitter.com/AmeliasBrain/status/1521146127327801345... Read more

Categories:

Supported by:

Visualize and debug CSS cascade layers Screenshot of Firefox, with a demo page that uses layers and devtools opened, showing the Rules panel with 2 @layer rules

Screenshot of Firefox, with a demo page that uses layers and devtools opened, showing the Rules panel with 2 @layer rules

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

Categories:

css

Supported by:

Quickly reference nodes, expressions, and react components in the console

https://twitter.com/ChatterboxDev/status/1506299424712142864 Also learn more about getting the selec... Read more

Categories:

Supported by:

Start your HTML and CSS prototypes in the browser directly Screenshot of Edge , with a tab opened on the HTML data-url, and DevTools opened showing the Elements and Sources panels with local changes made

Screenshot of Edge , with a tab opened on the HTML data-url, and DevTools opened showing the Elements and Sources panels with local changes made

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

Categories:

Supported by:

Debug popups that appear on hover using the debugger statement

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

Categories:

debug

Supported by:

console.log() is great, but do you know console.table()? console.group()? console.assert()?

https://twitter.com/nghuuphuoc/status/1505892172700299268... Read more

Categories:

console

Supported by:

Debug unwanted scrollbars Screenshot of Firefox DevTools, with the Inspector panel showing the Scroll badge on an element

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

Categories:

css

Supported by:

firefox

Debug CSS grid areas Screenshot of Firefox, with a highlighted grid in the page showing the area names, and devtools below it with the "display area names" option checked

Screenshot of Firefox, with a highlighted grid in the page showing the area names, and devtools below it with the "display area names" option checked

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

Categories:

css

Supported by:

Send feedback, ask for features and report bugs A feedback illustration showing a stick figure with a speech bubble

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

Categories:

help

Supported by:

Manipulate complex JSON files using DevTools Screenshot of VSCode with some JSON data and DevTools next to it with the snippets panel containing JS code to manipulate the JSON

Screenshot of VSCode with some JSON data and DevTools next to it with the snippets panel containing JS code to manipulate the JSON

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

Categories:

javascript

Supported by:

Detect low color contrast issues Screenshot of the CSS Overview panel in Chrome, showing the color contrast issues section

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

Categories:

accessibility

Supported by:

Paste multiple CSS declarations at once GIF animation showing how pasting several declarations in a CSS rule in DevTools creates them all

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

Categories:

css

Supported by:

Use full browser window for device emulation Screencast showing device emulation andhow to undock the Developer Tools into an own window

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

Categories:

Supported by:

Remove or disable event listeners Screenshot of the Firefox event popup in the Inspector panel, showing the checkbox to toggle events

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

Categories:

javascript

Supported by:

Find HTML parsing errors Screenshot of the View-Source page in Firefox, with a stray em closing tag highlighted in red, with a tooltip

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

Categories:

html

Supported by:

firefox

Select elements with pointer-events:none by holding Shift Gif animation showing how a pointer-events:none element normally can't be selected, except when Shift is pressed

Gif animation showing how a pointer-events:none element normally can't be selected, except when Shift is pressed

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

Categories:

Supported by:

Write code on multiple lines in the Console Screenshot showing the button to switch the Firefox console to the multi-line mode

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

Categories:

console

Supported by:

Download all images from the page Screenshot of the Snippets panel in Edge, with the JS code from above, and the download panel open showing all images have been downloaded

Screenshot of the Snippets panel in Edge, with the JS code from above, and the download panel open showing all images have been downloaded

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

Categories:

productivity

Supported by:

Edit and resend faulty network requests to debug them Screenshot of Chrome's copy as cURL feature and the corresponding command in the terminal

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

Categories:

network

Supported by:

Visualize the effect of CSS transforms GIF animation showing how the CSS transform highlighter appears on the page when hovering over a transform CSS property in the Rules panel

GIF animation showing how the CSS transform highlighter appears on the page when hovering over a transform CSS property in the Rules panel

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

Categories:

Supported by:

firefox

Scroll an element into view GIF animation showing how the page is scrolled to reveal the selected element

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

Categories:

html

Supported by:

Take a screenshot of a single node GIF animation showing taking a node screenshot in Firefox

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

Categories:

Supported by:

Automatically logging name and value in console.log() Screencast showing the different ways the variables are logged with and without curly braces

Screencast showing the different ways the variables are logged with and without curly braces

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

Categories:

Supported by:

Move panels to re-arrange them GIF animation in Edge DevTools showing the move to top/bottom menus

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

Categories:

personalization

Supported by:

Format console messages Screenshot of a formatted console message in Edge

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

Categories:

console

Supported by:

Simulate pseudo CSS classes Screenshot of the :hov panel to simulate various pseudo-classes

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

Categories:

Supported by:

Zoom the DevTools UI to your liking Gif demo showing the UI of Chrome DevTools being zoomed in and out

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

Categories:

Supported by:

Easily change CSS number values from the keyboard in increments of 0.1, 1, 10, 100 GIF animation of the Styles panel in Edge showing how numbers can be changed in various increments

GIF animation of the Styles panel in Edge showing how numbers can be changed in various increments

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

Categories:

css

Supported by:

Find and export CSS changes Screenshot of the Changes panel in Firefox showing a diff-like view of all the CSS changes

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

Categories:

Supported by:

Evaluate XPath to find elements in the page Screenshot of the Inspector panel in Firefox showing the search field with an XPath expression

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

Categories:

Supported by:

Store a node as a variable to use it in the console screenshot of firefox's "use in console" context menu option in the Inspector, and also showing the Console with a couple of tempN variables

screenshot of firefox's "use in console" context menu option in the Inspector, and also showing the Console with a couple of tempN variables

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

Categories:

Supported by:

Console.log() for the web with logpoints Screenshots of the way to set a logpoint in the sources tool

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

Categories:

Supported by:

Debug popups that appear on hover using JS GIF showing how to pause the debugger with F8 while a tooltip is visible to then style it in the Inspector panel of Firefox

GIF showing how to pause the debugger with F8 while a tooltip is visible to then style it in the Inspector panel of Firefox

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

Categories:

debug

Supported by:

Pause script execution when the DOM changes Screenshot of the Elements panel in Edge showing the "Break on" contextual menu on the selected node

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

Categories:

Supported by:

Convert color formats Gif animation of the rules panel in Firefox, showing the color conversion

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

Categories:

css

Supported by:

Change the color theme of DevTools Screenshot of the settings panel in Edge showing the Theme drop-down

Chrome, Firefox and Safari all have a light and dark theme for their DevTools. Edge not only has tho... Read more

Categories:

personalization

Supported by:

See formatted JSON responses Screenshot of the JSON viewer in Firefox

Firefox comes with a very nice JSON viewer that makes it easy to review responses from your server d... Read more

Categories:

network

Supported by:

firefox

Block resources to test your site without CSS or JavaScript Screenshot of the Network panel in Edge showing the contextual menu with the "block request url" item

Screenshot of the Network panel in Edge showing the contextual menu with the "block request url" item

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

Categories:

Supported by:

Prototype content changes with designMode Animated GIF of editable web page with designMode on

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

Categories:

Supported by:

Throttle the network speed to test your website on slower connections Screenshot of the Network panel in Edge showing the network throttling drop-down

Screenshot of the Network panel in Edge showing the network throttling drop-down

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

Categories:

Supported by:

Edit CSS absolute and relative positions by dragging points in the page Gif demo of the geometry editor in firefox, toggling it from the Layout panel, and then dragging top and left points to move the element in the page

Gif demo of the geometry editor in firefox, toggling it from the Layout panel, and then dragging top and left points to move the element in the page

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

Categories:

Supported by:

firefox

Copy an element's XPath expression Screenshot of the Elements panel in Edge showing the copy xpath option in the contextual menu

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

Categories:

Supported by:

Convert font property units Screenshot of the fonts panel in Firefox, showing the unit conversion drop-down

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

Categories:

css

Supported by:

Find DevTools reference documentation Screenshot of the 4 documentation websites listed above

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

Categories:

help

Supported by:

Drag and drop nodes in the DOM tree Gif animation showing a node being dragged by the mouse in the DOM tree view of the Elements panel in Edge

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

Categories:

html

Supported by:

Event listeners are suppressed when paused Screenshot of a page in edge with the DevTools Sources paused at a location, and the on-page overlay preventing access to the page

Screenshot of a page in edge with the DevTools Sources paused at a location, and the on-page overlay preventing access to the page

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

Categories:

javascript

Supported by:

Sample colors from the page Gif animation of the eyedropper tool being started from the firefox main menu

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

Categories:

productivity

Supported by:

Visualize the tabbing order on the page Screenshot of the tabbing order highlighter in Firefox, showing numbered boxes around focusable elements

Screenshot of the tabbing order highlighter in Firefox, showing numbered boxes around focusable elements

Firefox has a dedicated accessibility inspector panel that, among other things, lets you visualize t... Read more

Categories:

Supported by:

firefox

Apply CSS styles to console messages Screenshot of a styled console message in Edge

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

Categories:

Supported by:

Find all images without alternative text The output of the console.table command from above shown in the Firefox DevTools console

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

Categories:

Supported by:

Draw a box around all elements to debug your CSS and page structure Gif animation showing how adding the rule in the styles pane if chrome devtools outlines all elements in the page

Gif animation showing how adding the rule in the styles pane if chrome devtools outlines all elements in the page

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

Categories:

Supported by:

Find DOM elements from the console Firefox's console panel, showing 3 different examples of using the $ and $$ built-in console functions

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

Categories:

Supported by:

Persist console messages across page navigations and reloads Screenshot of Edge devtools' console showing the settings panel at the top, with the "perserve log" box checked

Screenshot of Edge devtools' console showing the settings panel at the top, with the "perserve log" box checked

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

Categories:

console

Supported by:

Simulate color vision deficiencies Screenshot of the color vision simulation drop-down in Firefox

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

Categories:

accessibility

Supported by:

Edit clip-path and shape-outside CSS properties by dragging points in the page Gif demo of the shape editor in firefox, clicking on the Rules panel icon, and then moving points around in the page

Gif demo of the shape editor in firefox, clicking on the Rules panel icon, and then moving points around in the page

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

Categories:

Supported by:

firefox

Copy an object from the console Screenshot of Chrome devtools' console with a line of code using the copy() function

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

Categories:

Supported by:

Get the selected element in the console screenshot of safari's console showing how the $0 shortcut returns the selected elemet

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

Categories:

Supported by:

Find your web component's custom element code Gif animation showing the custom button in Firefox's inspector and that clicking on it goes to the debugger

Gif animation showing the custom button in Firefox's inspector and that clicking on it goes to the debugger

In Firefox, when inspecting elements (in the Inspector panel), you can click on the custom badge to... Read more

Categories:

Supported by:

firefox

Filter requests in the Network panel by status code, mime type and more Screenshot of the Network panel in Edge showing the filter input field

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

Categories:

network

Supported by:

Switch DevTools to another language Screenshot of the settings panel in Edge showing a checkbox to match devtools with the browser language

If you want to use DevTools in another language than English, you can do it in Edge and Firefox. In... Read more

Categories:

personalization

Supported by:

Unminify JavaScript code to easily read and debug it Screenshot of the Sources panel in Chrome, showing the pretty-print button

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

Categories:

Supported by:

Highlight all the elements that a CSS rule matches GIF animation showing how hovering over selectors in chrome highlights the matching elements in the page