{"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
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 Additionally, you can also search using a valid CSS selector, like Cmd<\/code> +
F<\/code> (macOS) or
Ctrl<\/code> +
F<\/code> (Windows).<\/p>\n\n\n\n
.red<\/code>, or using an XPath, like
\/\/div\/h1<\/code>.<\/p>\n\n\n\n