DevTools Tips: How to inspect CSS container queries
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.
@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.