Debugging Legacy HTML/CSS: Instantly Highlight Overflow Culprits

The Problem

Horizontal scrolling on mobile viewports destroys UI integrity. A single misconfigured div tag or broken breakpoint pushing past the viewport width ruptures the entire layout. Hunting down the exact DOM element manually using the inspector tool burns operational time.

The Solution

Force the browser to identify the leak for you. Open the browser console and drop in this exact snippet:

document.querySelectorAll('*').forEach(el => {
  if (el.offsetWidth > document.documentElement.offsetWidth) {
    console.log('Found it:', el);
    el.style.outline = '2px solid red';
  }
});

How to Use It

1. Open Chrome/Firefox Developer Tools on the broken page.
2. Ensure the viewport is set to the mobile resolution experiencing the leak.
3. Paste the code into the Console and execute.
4. The console logs the exact DOM node, and the UI immediately paints a 2px red border around the culprit.

Why It Matters

Speed and precision. Stop guessing which nested container is ignoring max-width: 100%. This script executes a programmatic sweep of the DOM and instantly flags the vulnerability so the CSS can be patched immediately.