{"id":377264,"date":"2023-03-22T13:22:42","date_gmt":"2023-03-22T20:22:42","guid":{"rendered":"https:\/\/css-tricks.com\/?p=377264"},"modified":"2023-03-22T13:24:49","modified_gmt":"2023-03-22T20:24:49","slug":"some-cross-browser-devtools-features-you-might-not-know","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/some-cross-browser-devtools-features-you-might-not-know\/","title":{"rendered":"Some Cross-Browser DevTools Features You Might Not Know"},"content":{"rendered":"\n

I spend a lot of time in DevTools, and I\u2019m sure you do too. Sometimes I even bounce between them, especially when I\u2019m debugging cross-browser issues. DevTools is a lot like browsers themselves \u2014 not all of the features in one browser\u2019s DevTools will be the same or supported in another browser\u2019s DevTools.<\/p>\n\n\n\n

But there are quite a few DevTools features that are interoperable, even some lesser-known ones that I\u2019m about to share with you.<\/p>\n\n\n\n

For the sake of brevity, I use \u201cChromium\u201d 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.<\/p>\n\n\n\n\n\n\n

Search nodes in the DOM tree<\/h3>\n\n\n

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\u2019re looking for, but you can quickly search the DOM tree using Cmd<\/code> + F<\/code> (macOS) or Ctrl<\/code> + F<\/code> (Windows).<\/p>\n\n\n\n

Additionally, you can also search using a valid CSS selector, like .red<\/code>, or using an XPath, like \/\/div\/h1<\/code>.<\/p>\n\n\n\n

\"DevTools
Searching text in Chrome DevTools (left), selectors in Firefox DevTools (center), and XPath in Safari DevTools (right)<\/figcaption><\/figure>\n\n\n\n

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<\/strong> (F1<\/code>) \u2192 Preferences<\/strong> \u2192 Global<\/strong> \u2192 Search as you type<\/strong> \u2192 Disable<\/strong>.<\/p>\n\n\n\n

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 \u201cScroll into view\u201d.<\/p>\n\n\n\n

\"Showing<\/figure>\n\n\n

Access nodes from the console<\/h3>\n\n\n

DevTools provides many different ways to access a DOM node directly from the console.<\/p>\n\n\n\n

For example, you can use $0<\/code> 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<\/code>, $2<\/code>, $3<\/code>, etc.<\/p>\n\n\n\n

\"Currently<\/figure>\n\n\n\n

Another thing that Chromium browsers allow you to do is copy the node path as a JavaScript expression in the form of document.querySelector<\/code> by right-clicking on the node, and selecting Copy<\/strong> \u2192 Copy JS path<\/strong>, which can then be used to access the node in the console.<\/p>\n\n\n\n

\n