How to Inspect and Debug CSS Container Queries in Google Chrome DevTools

Modern responsive web design has evolved beyond viewport-based media queries. While traditional @media queries adapt page layouts according to the overall viewport width or device screen dimensions, component-driven development frequently requires individual components to adapt dynamically based on the width of their direct parent container. CSS Container Queries (@container) solve this modular challenge, allowing cards, navigation bars, and data tables to alter their internal layout regardless of where they are placed in a template.

However, diagnosing why a container query fails to trigger, inspecting applied container contexts, or verifying container-relative length units (such as cqw, cqh, and cqi) requires dedicated tooling. Google Chrome DevTools features built-in container query inspection, badges, and real-time DOM overlays designed specifically to streamline responsive component debugging.

Understanding Container Query Declarations in CSS

Before inspecting container rules in DevTools, ensure that your CSS explicitly defines the containing element as a query container. A query container establishes a new containment context for child components:

.card-container {
  container-type: inline-size;
  container-name: card-wrapper;
}

@container card-wrapper (min-width: 450px) {
  .card-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 16px;
  }
}

The container-type: inline-size property instructs the browser to monitor the width (inline axis) of the parent element, while container-name assigns an optional identifier so child elements can selectively target specific ancestors.

Locating Container Badges in the Elements Tree

Chrome DevTools flags every DOM element configured as a query container with a specialised badge in the DOM tree:

1. Open Google Chrome and navigate to the webpage or local web application containing your responsive components.
2. Press F12 or right-click any element on the page and select Inspect.
3. Select the Elements panel.
4. Locate the parent container element in the HTML tree hierarchy.
5. Observe the small pill-shaped @container badge displayed immediately to the right of the closing tag or element name.

Clicking the @container badge toggles a visual dotted outline overlay directly on the page, displaying the physical boundary, padding box, and current calculated pixel dimensions of the container.

Inspecting Applied Container Queries in the Styles Pane

To inspect active and inactive container query rules applied to child nodes:

1. Select the child element residing inside the container (for instance, .card-item) in the Elements tree.
2. Look at the Styles pane on the right-hand side.
3. Scroll through the CSS cascade until you see the section heading labelled @container <name> (query).
4. Inspect the current rule evaluation. When a container query matches the current dimensions, its CSS declarations appear with normal contrast. If the query does not match, DevTools strikes through the query block and marks the condition with a subtle grey indicator.
5. Hover your cursor over the container name within the @container heading in the Styles pane. DevTools will automatically highlight the corresponding parent container in the DOM tree and viewport.

Debugging Container Relative Units

CSS Container Queries introduce specialised length units that scale relative to the container dimensions rather than the root viewport:

• cqw: 1% of a query container’s width.
• cqh: 1% of a query container’s height.
• cqi: 1% of a query container’s inline size.
• cqb: 1% of a query container’s block size.
• cqmin: The smaller value of cqi or cqb.
• cqmax: The larger value of cqi or cqb.

To inspect the calculated pixel value of any container-relative unit in DevTools, select the child element, switch to the Computed tab in the Elements pane, search for the target property (such as font-size or padding), and review the resolved pixel equivalent calculated by the rendering engine.

Simulating Container Resize in Real Time

While the responsive device toolbar simulates device viewports, you can test container behaviour directly within Chrome DevTools:

1. Select the query container in the Elements DOM tree.
2. In the Styles pane, temporarily adjust the parent container’s inline size by adding width: 350px; or toggling existing wrapper flex constraints.
3. Observe the child component in the viewport instantly re-render its layout as container thresholds are crossed.
4. Check the Styles pane to watch the relevant @container rules dynamically activate and deactivate in real time.