Some Cross-Browser DevTools Features You Might Not Know
Tags: article, crossbrowser, devtools
Published: 2023-08-21 21:02:20

---
title: Some Cross-Browser DevTools Features You Might Not Know
published: true
date: 2023-03-22 20:22:42 UTC
tags: Article,crossbrowser,DevTools
canonical_url: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/
---

I spend a lot of time in DevTools, and I’m sure you do too. Sometimes I even bounce between them, especially when I’m debugging cross-browser issues. DevTools is a lot like browsers themselves — not all of the features in one browser’s DevTools will be the same or supported in another browser’s DevTools.

But there are quite a few DevTools features that are interoperable, even some lesser-known ones that I’m about to share with you.

For the sake of brevity, I use “Chromium” to refer to all Chromium-based browsers, like Chrome, Edge, and Opera, in the article. Many of the DevTools in them offer the exact same features and capabilities as one another, so this is just my shorthand for referring to all of them at once.

### Search nodes in the DOM tree

Sometimes the DOM tree is full of nodes nested in nodes that are nested in other nodes, and so on. That makes it pretty tough to find the exact one you’re looking for, but you can quickly search the DOM tree using `Cmd` + `F` (macOS) or `Ctrl` + `F` (Windows).

Additionally, you can also search using a valid CSS selector, like `.red`, or using an XPath, like `//div/h1`.

![DevTools screenshots of all three browsers.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674209097213_image-1.png?resize=2378%2C1048&ssl=1)
_Searching text in Chrome DevTools (left), selectors in Firefox DevTools (center), and XPath in Safari DevTools (right)_

In Chromium browsers, the focus automatically jumps to the node that matches the search criteria as you type, which could be annoying if you are working with longer search queries or a large DOM tree. Fortunately, you can disable this behavior by heading to **Settings** (`F1`) → **Preferences** → **Global** → **Search as you type** → **Disable**.

After you have located the node in the DOM tree, you can scroll the page to bring the node within the viewport by right-clicking on the nod, and selecting “Scroll into view”.

![Showing a highlighted node on a webpage with a contextual menu open to scroll into view](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1675742347357_image.png?resize=1786%2C1118&ssl=1)

### Access nodes from the console

DevTools provides many different ways to access a DOM node directly from the console.

For example, you can use `$0` to access the currently selected node in the DOM tree. Chromium browsers take this one step further by allowing you to access nodes selected in the reverse chronological order of historic selection using, `$1`, `$2`, `$3`, etc.

![Currently selected node accessed from the Console in Edge DevTools](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674396487537_image-3.png?resize=1682%2C1028&ssl=1)

Another thing that Chromium browsers allow you to do is copy the node path as a JavaScript expression in the form of `document.querySelector` by right-clicking on the node, and selecting **Copy** → **Copy JS path** , which can then be used to access the node in the console.

<iframe title="VideoPress Video Player" aria-label="VideoPress Video Player" width="500" height="305" src="https://videopress.com/embed/jwsHG7QN?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=1" frameborder="0" allowfullscreen data-resize-to-parent="true" allow="clipboard-write"></iframe><script src="https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142"></script>

Here’s another way to access a DOM node directly from the console: as a temporary variable. This option is available by right-clicking on the node and selecting an option. That option is labeled differently in each browser’s DevTools:

- **Chromium** : Right click → “Store as global variable”
- **Firefox** : Right click → “Use in Console”
- **Safari** : Right click → “Log Element”

![Screenshot of DevTools contextual menus in all three browsers.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674633378298_Myproject-1.png?resize=2560%2C1440&ssl=1)
_Access a node as a temporary variable in the console, as shown in Chrome (left), Firefox (center), and Safari (right)_

### Visualize elements with badges

DevTools can help visualize elements that match certain properties by displaying a badge next to the node. Badges are clickable, and different browsers offer a variety of different badges.

In **Safari** , there is a badge button in the Elements panel toolbar which can be used to toggle the visibility of specific badges. For example, if a node has a `display: grid` or `display: inline-grid` CSS declaration applied to it, a `grid` badge is displayed next to it. Clicking on the badge will highlight grid areas, track sizes, line numbers, and more, on the page.

![A grid overlay visualized on top of a three-by-three grid.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674708049378_Screenshot2023-01-26at10.05.40.png?resize=1738%2C1082&ssl=1)
_Grid overlay with badges in Safari DevTools_

The badges that are currently supported in **Firefox** ’s DevTools are listed in the Firefox [source docs](https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_html/index.html#html-tree). For example, a `scroll` badge indicates a scrollable element. Clicking on the badge highlights the element causing the overflow with an `overflow` badge next to it.

![Overflow badge in Firefox DevTools located in the HTML panel](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/overflow_badge.png?resize=852%2C379&ssl=1)

In **Chromium** browsers, you can right-click on any node and select **“Badge settings…”** to open a container that lists all of the available badges. For example, elements with `scroll-snap-type` will have a `scroll-snap` badge next to it, which on click, will toggle the `scroll-snap` overlay on that element.

![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/tbuxzdUk.png?resize=1738%2C1082&ssl=1)

### Taking screenshots

We’ve been able to take screenshots from some DevTools for a while now, but it’s now available in all of them and includes new ways to take full-page shots.

The process starts by right-clicking on the DOM node you want to capture. Then select the option to capture the node, which is labeled differently depending on which DevTools you’re using.

![Screenshot of DevTools in all three browsers.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721274966_Myproject-1.png?resize=2560%2C1700&ssl=1)
_Chrome (left), Safari (middle), and Firefox (right)_

Repeat the same steps on the `html` node to take a full-page screenshot. When you do, though, it’s worth noting that Safari retains the transparency of the element’s background color — Chromium and Firefox will capture it as a white background.

![Two screenshots of the same element, one with a background and one without.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674721838803_Screenshot2023-01-26at14.00.01.png?resize=1506%2C1082&ssl=1)
_Comparing screenshots in Safari (left) and Chromium (right)_

There’s another option! You can take a “responsive” screenshot of the page, which allows you to capture the page at a specific viewport width. As you might expect, each browser has different ways to get there.

- **Chromium** : `Cmd` + `Shift` + `M` (macOS) or `Ctrl` + `Shift` + `M` (Windows). Or click the “Devices” icon next to the “Inspect” icon.
- **Firefox** : Tools → Browser Tools → “Responsive Design Mode”
- **Safari** : Develop → “Enter Responsive Design Mode”

![Enter responsive mode options in DevTools for all three browsers.](https://i0.wp.com/css-tricks.com/wp-content/uploads/2023/02/s_7E25E76B5C1A2A0120D43B477F8F8B0FA75578B215D36F3A918DC29D997AA0F4_1674755907874_screenshot.png?resize=2550%2C1700&ssl=1)
_Launching responsive design mode in Safari (left), Firefox (right), and Chromium (bottom)_

### Chrome tip: Inspect the top layer

Chrome lets you visualize and inspect top-layer elements, like a dialog, alert, or modal. When an element is added to the `#top-layer`, it gets a `top-layer` badge next to it, which on click, jumps you to the top-layer container located just after the `</html>` tag.

The order of the elements in the `top-layer` container follows the stacking order, which means the last one is on the top. Click the `reveal` badge to jump back to the node.

<iframe title="VideoPress Video Player" aria-label="VideoPress Video Player" width="500" height="315" src="https://videopress.com/embed/jljQbj3P?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=1" frameborder="0" allowfullscreen data-resize-to-parent="true" allow="clipboard-write"></iframe><script src="https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142"></script>

### Firefox tip: Jump to ID

Firefox links the element referencing the ID attribute to its target element in the same DOM and highlights it with an underline. Use `CMD` + `Click` (macOS) or `CTRL` + `Click` (Windows) )to jump to the target element with the identifier.

<iframe title="VideoPress Video Player" aria-label="VideoPress Video Player" width="500" height="315" src="https://videopress.com/embed/qWuqfQTh?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=1" frameborder="0" allowfullscreen data-resize-to-parent="true" allow="clipboard-write"></iframe><script src="https://v0.wordpress.com/js/next/videopress-iframe.js?m=1674852142"></script>

### Wrapping up

Quite a few things, right? It’s awesome that there are some incredibly useful DevTools features that are supported in Chromium, Firefox, and Safari alike. Are there any other lesser-known features supported by all three that you like?

There are a few resources I keep close by to stay on top of what’s new. I thought I’d share them with here:

- [DevTools Tips](https://devtoolstips.org/) (Patrick Brosset): A curated collection of helpful cross-browser DevTools tips and tricks.
- [Dev Tips](https://umaar.com/dev-tips/) (Umar Hansa): DevTools tips sent to your inbox!
- [Can I DevTools?](https://www.canidev.tools/): The [Can](https://caniuse.com)[iuse](https://caniuse.com) for DevTools.

* * *

<small><a rel="nofollow" href="https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/">Some Cross-Browser DevTools Features You Might Not Know</a> originally published on <a rel="nofollow" href="https://css-tricks.com">CSS-Tricks</a>, which is part of the <a href="https://try.digitalocean.com/css-tricks/?utm_medium=rss&amp;utm_source=css-tricks.com&amp;utm_campaign=family_&amp;utm_content=">DigitalOcean</a> family. You should <a href="https://css-tricks.com/newsletters/">get the newsletter</a>.</small>