Welcome! Just like you, I spend a lot of time in DevTools, navigating between different browsers, especially when tackling cross-browser issues. However, not all features in one browser’s DevTools are the same or supported in another browser’s DevTools. That being said, there are several lesser-known DevTools features that are actually interoperable, and I’m excited to share them with you.

Throughout this article, I will refer to all Chromium-based browsers, such as Chrome, Edge, and Opera, as “Chromium” for brevity. These browsers share many features and capabilities, hence my shorthand reference.

Let’s dive into some of these useful DevTools features:

  1. Search nodes in the DOM tree: When the DOM tree becomes a tangled web of nested nodes, finding the specific one you need can be challenging. However, you can easily search the DOM tree using Cmd + F (macOS) or Ctrl + F (Windows). You can even search using CSS selectors (e.g., .red) or XPath (e.g., //div/h1).
  2. Access nodes from the console: DevTools provides various ways to access DOM nodes directly from the console. For instance, you can use $0 to access the currently selected node in the DOM tree. In Chromium browsers, you can access historic selections using $1, $2, $3, and so on. Furthermore, you can copy the node path as a JavaScript expression, allowing you to access the node in the console.
  3. Visualize elements with badges: DevTools can visually highlight elements that match specific properties by displaying badges next to them. In Safari, you can toggle badge visibility using the badge button in the Elements panel toolbar. Firefox also supports various badges, such as scroll badges indicating scrollable elements. In Chromium browsers, you can access a container listing all available badges and toggle specific overlays.
  4. Taking screenshots: Taking screenshots from DevTools has become more accessible across all browsers. Simply right-click on the desired DOM node and select the screenshot option (the labeling differs among browsers). You can also take full-page screenshots by applying the same steps to the html node, noting that Safari retains background color transparency, while Chromium and Firefox capture it as white.

Those were just a few highlights. If you’re interested in exploring more lesser-known features supported by Chromium, Firefox, and Safari, I recommend checking out the following resources:

  • DevTools Tips (Patrick Brosset): A curated collection of helpful cross-browser DevTools tips and tricks.
  • Dev Tips (Umar Hansa): Subscribe to receive DevTools tips directly in your inbox!
  • Can I DevTools?: A resource similar to Caniuse, but focused on DevTools.

I hope you find these features and resources beneficial in your web development journey. Feel free to explore and experiment with them. If you have any questions or would like to share your own favorite lesser-known features, don’t hesitate to reach out.

Happy coding.