Are you tired of digging through complex CSS and hovering endlessly in DevTools just to figure out element boundaries, margins, and padding? Border Patrol is the free and open-source Chrome extension built to solve that frustration!
It's a powerful visual debugging tool that instantly reveals the structure and box model of any webpage. Perfect for web developers, designers, and QA testers, it makes understanding layouts, identifying spacing issues, and debugging CSS problems faster and more intuitive than ever before.
- 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 (
widthxheight), and computed border, margin, and padding styles. - Customizable Appearance: Tailor the outlines to your preference by easily adjusting their size (from
1pxto3px) and style (solid, dashed, dotted, double) via the extension's intuitive popup menu. - Screenshot Capture: Easily capture and download screenshots of the current page with your outlined elements, perfect for documentation, bug reports, or sharing layout feedback with your team.
| Border Mode | Inspector Mode |
|---|---|
 |
 |
- Navigate to any webpage you want to inspect or debug.
- Click the Border Patrol extension icon in your browser toolbar (Pro tip: pin the extension so you can access it faster).
- Toggle Borders: Click the "Toggle Borders" switch in the popup or use the keyboard shortcut to instantly outline all elements on the current page.
- Adjust outline size and style using the controls under Border Settings.
- Toggle Inspector Mode: Use the "Toggle Inspector Mode" switch in the popup to activate the element information overlay. Hover over elements to see their details.
Toggle Border Patrol ON or OFF instantly with a customizable keyboard shortcut.
- Toggle Border Outlines:
Alt+Shift+B(Default)
You can customize this shortcut in your Chrome browser by navigating to chrome://extensions/shortcuts.
Border Patrol is an open-source project that thrives on community contributions, embracing transparency and collaboration. We welcome and value contributions, whether it's a new feature idea, bug fix, or code improvement, to continually enhance the project.
Please see the CONTRIBUTING file for more detailed guidelines on contributing.
For bug reports, feature requests, or general feedback, please open an issue on the Border Patrol GitHub Issues page.
Border Patrol is released under the Apache-2.0 License 📄.