Debugging layout with DevTools

Debugging layout with browser DevTools – the workflows that save hours when something is misaligned, overflowing, or the wrong size for no obvious reason. The tools are similar in Chrome, Edge, and Firefox; names vary slightly.

Inspect and the box model

Right-click an element to Inspect. The Styles panel shows applied rules; the Layout or Computed panel shows the box model: content, padding, border, margin. Unexpected width often traces to:

• width: 100% plus padding without box-sizing: border-box
• A flex item that cannot shrink (min-width: auto)
• Fixed width on a child forcing overflow

Computed tab lists the winning value for any property. When Styles shows a rule crossed out, something else won the cascade – check specificity and layers.

Highlighting issues

Chrome DevTools Elements panel can show:

• Flex and Grid overlays (badge icons on display: flex or grid nodes)
• Scroll overflow highlights
• Ad badges for margin/padding visualization when hovering

Toggle ‘Show rulers’ or the dimension tooltip while hovering to see exact sizes. A 400px container with 420px content jumps out immediately.

Flexbox inspector

On a flex container, open the Flexbox overlay. It shows main and cross axes, gap, and per-item flex grow/shrink/basis. When an item refuses to shrink, look for:

/* DevTools computed flex values might show */
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
min-width: auto; /* often the culprit */

Firefox’s Flexbox inspector is particularly good for visualizing flex lines and item sizing. Worth opening the same page in Firefox when stuck.

Grid inspector

Grid overlays display line numbers, track sizes, and area names. Essential when items span unexpected cells or implicit rows collapse to zero height.

.debug-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  outline: 2px dashed red; /* temporary - see container bounds */
}

Temporary outlines on suspects (outline not border – no layout shift) help trace which ancestor is constraining width.

Finding overflow

Horizontal scroll on mobile often means something is wider than the viewport. In Chrome, run in the console:

/* Paste in DevTools console - finds wide elements */
document.querySelectorAll('*').forEach(el => {
  if (el.scrollWidth > document.documentElement.clientWidth) {
    console.log(el, el.scrollWidth);
  }
});

Then inspect the logged nodes. Common offenders: images without max-inline-size: 100%, pre/code blocks, fixed-width embeds.

Sticky and stacking context

For broken position: sticky, walk up the DOM in Elements and check Computed for overflow on ancestors. For z-index wars, look for new stacking contexts: transform, opacity below 1, filter, isolation: isolate.

Forcing pseudo-states

Styles panel to toggle element state (:hover, :focus, :focus-visible, :active). Test focus rings and button states without tabbing repeatedly. :focus-visible emulation is available in Chrome and Firefox.

Responsive mode and container queries

Device toolbar resizes the viewport. For container queries, remember the query responds to the container, not the viewport – resize the container or use the Container Queries panel in Chrome (select the query container node).

Editing live and persisting

Edits in DevTools are temporary. Use ‘Copy rule’ or workspace mapping if you want changes to write back to files (Chrome Local Overrides or VS Code live link setups). Otherwise, copy the fix into your source CSS manually once you find it.

A debugging routine

1. Reproduce at a specific viewport width
2. Inspect the broken element – computed size and box model
3. Walk up ancestors for width constraints, overflow, flex/grid
4. Toggle flex/grid overlay on relevant containers
5. Apply a minimal fix in source; avoid padding tweaks at random

The next two tutorials are mini projects: a responsive marketing page and a dashboard shell, putting these ideas into practice.