Border Patrol – CSS Debugger & Element Outliner

About

Tired of guessing element boundaries and spacing? Border Patrol is the ultimate visual debugging tool that instantly reveals the structure and box model of any webpage!

Inspect web layouts instantly! Visualize element spacing and structure with automatic CSS Box Model outlines. Border Patrol instantly highlights margins, borders, and padding, helping developers debug layout issues faster.

Key Features:
- Instant Visual Outlining: Apply color-coded outlines to every HTML element on a page with a single click or shortcut. See nested structures and element boundaries at a glance.
- Visualize the Box Model: Clearly visualize element boundaries, margins, and padding, helping you understand element spacing and dimensions.
- Detailed Element Inspector: Activate Inspector Mode and simply hover over any element on the page to view a real-time overlay displaying its tag name, precise dimensions (width x height), and computed border, margin, and padding styles.
- Measurement Mode: Click any two elements to instantly measure the pixel distance between them. Selected elements are highlighted with a color-coded overlay, and a dashed connector line with the distance in px is drawn between them. Press Escape to reset.
- Ruler Mode: Toggle a pixel ruler along the top and left edges of the page. Rulers display page coordinates (updated as you scroll), with tick marks every 50 px and labels every 200 px. A blush-colored crosshair line on each ruler tracks your mouse position in real time.
- Customizable Appearance: Tailor the outlines to your preference by easily adjusting their size (from 1px to 3px) and style (solid, dashed, dotted, double) via the extension's intuitive popup menu.
- Screenshot Capture: Capture screenshots of the page with Border Mode outlines applied. Choose between two modes: Visible & Full Page.
- Right-Click Context Menu: Quickly toggle any mode directly from the browser's right-click context menu — no need to open the popup.
- Dark Mode: Save your eyes by switching between Light and Dark mode in the popup menu.
- Language Support: Currently supports translations for Spanish, French, and German. More to come...

Why Border Patrol?
- Accelerate Debugging: Pinpoint layout issues, unexpected spacing, and misaligned elements faster than ever before.
- Master Page Structure: Gain immediate, clear insight into the DOM hierarchy and element nesting.
- Streamline Collaboration: Enhance communication of layout problems by visually demonstrating element boundaries and spacing to your team.
- Intuitive Inspection: Get critical box model properties directly on the page, reducing the need to constantly switch to browser developer tools.

Perfect for developers, designers, and QA testers.

Understand HTML structure at a glance, reveal element boundaries, and identify spacing problems without opening DevTools.