Some Cross-Browser DevTools Features You Might Not Know | CSS-Tricks
[ad_1]
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)
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.
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)
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)
The badges that are currently supported in Firefox’s DevTools are listed in the Firefox source docs. 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)
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)
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) orCtrl
+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)
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.
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.
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:
[ad_2]
Source link