CRX id
fdkdknepjdabfaihhdljlbbcjiahmkkd
fdkdknepjdabfaihhdljlbbcjiahmkkd
Description from extension meta
Inspect web layout instantly! Visualize element spacing & structure. Outlines webpage elements. For developers & designers.
Image from store
Description from store
Tired of guessing element boundaries and spacing? Border Patrol is a powerful visual debugging tool that instantly reveals the structure and box model of any webpage!
This essential browser extension is designed for web developers, designers, and QA testers who need to quickly understand web page layouts, identify spacing issues, and debug CSS.
Key Features:
Outline Elements: Instantly outline every HTML element on the page with clear, color-coded borders.
Visualize Box Model: See the core CSS box model properties: margins, borders, and padding. Understand element spacing visually.
Inspector Mode: Hover over elements to see their tag name, dimensions (width x height), and computed styles (border, margin, padding) in an on-page overlay.
Customize Outlines: Adjust the border Size and Style (solid, dashed, dotted, double) using the intuitive popup menu.
Keyboard Shortcut: Toggle Border Patrol on or off instantly with the default Alt+Shift+B (this shortcut is fully customizable in your Chrome extension settings).
Why Use Border Patrol?
Debug CSS Faster: Quickly pinpoint layout issues, unexpected spacing, and misaligned elements visually.
Understand Page Structure: Get an instant, clear view of the DOM structure and how elements are nested.
Simplify Collaboration: Clearly communicate layout issues by visually demonstrating element boundaries and spacing.
Easy Inspection: Inspect key box model properties directly on the page without needing to open developer tools for every element.
Simplify your workflow and debug CSS layouts faster and more intuitively. Install Border Patrol today and gain instant visual insight into your web page layouts!