DevTools: Faster searching in DevTools with CSS selectorsLast updated: 16th March 2023
In the Elements panel, you can quickly find DOM elements by their CSS Selector. For example:
a[href]- finds all anchors with a href attribute.
li a- finds all anchors which are descendants of list items.
To use this feature
To search for DOM elements by their CSS selectors, use the shortcut: Cmd + F or Ctrl + F.
This means you can search for
.card h3 to cycle through all
h3 elements which are descendants of elements with a class of
Customise the experience
You can customise the 'search as you type' experience.
- When 'search as you type' is on, the rapid searching can be a little distracting, however it's a slightly faster workflow.
- When 'search as you type' is off, you explicitly hit Enter to begin searching.
To customise this experience in DevTools, go to Settings > Preferences > Global > Check or uncheck 'search as you type'.