DevTools Tips: How to inspect CSS container queries

CSS container queries is the new CSS feature that web developers are excited about. It may trigger a revolution in web design—from page-based responsive design to container-based responsive design.

Chrome DevTools is here to help you adopt new layout design patterns and stay on top of the latest trends. With the support of this CSS feature, you can now inspect and debug your container queries in DevTools.

The video above gives you an overview of container queries, their syntax, and how to inspect them in DevTools.

You can now discover container elements and their descendants with the corresponding badge that toggles a dotted-line overlay.

Inspect @container rules applied to descendants when containers satisfy query conditions.

To learn more about the support of container queries in DevTools, see Inspect and debug CSS container queries.