DevTools: Faster searching in DevTools with CSS selectors

Introduction

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 card.

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'.