Border Patrol – CSS Debugger & Element Outliner

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 Element Outlines: Visualize every HTML element on the page with clear, color-coded borders, instantly revealing their structure.
- Comprehensive Box Model View: See margins, borders, and padding for any element directly on the page, making layout and spacing issues immediately apparent.
- Interactive Inspector Mode: Hover over elements to display an on-page overlay with their tag name, precise dimensions (width x height), and computed box model styles.
- Customizable Outlines: Fine-tune border appearance with intuitive controls for Size and Style (solid, dashed, dotted, double) directly from the popup menu.
- Screenshot Capture: Easily snap and download screenshots of the current page, complete with your active outlines, perfect for documentation, bug reports, or team feedback.
- Quick Toggle Shortcut: Activate or deactivate Border Patrol instantly with a customizable keyboard shortcut (default: Alt+Shift+B).
- Dark Mode Support: Seamlessly switch the extension's popup UI between light and dark themes for comfortable viewing in any environment.

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.