https://github.com/craigsavage/border-patrol
A visual CSS debugging tool for rapid layout inspection. Border Patrol is a browser extension that instantly outlines webpage elements, enabling developers, designers, and QA testers to visualize layouts, margins, padding, and troubleshoot CSS issues with speed and precision. Reveal the box model!
https://github.com/craigsavage/border-patrol
box-model browser-extension chrome-extension css debugging developer-tools devtools dom frontend html layout web-development
Last synced: 3 months ago
JSON representation
A visual CSS debugging tool for rapid layout inspection. Border Patrol is a browser extension that instantly outlines webpage elements, enabling developers, designers, and QA testers to visualize layouts, margins, padding, and troubleshoot CSS issues with speed and precision. Reveal the box model!
- Host: GitHub
- URL: https://github.com/craigsavage/border-patrol
- Owner: craigsavage
- License: apache-2.0
- Created: 2025-03-09T05:36:09.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2026-03-08T04:48:12.000Z (3 months ago)
- Last Synced: 2026-03-08T08:55:14.778Z (3 months ago)
- Topics: box-model, browser-extension, chrome-extension, css, debugging, developer-tools, devtools, dom, frontend, html, layout, web-development
- Language: TypeScript
- Homepage: https://craigsavage.github.io/border-patrol/
- Size: 1.73 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 24
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Border Patrol – CSS Debugger & Element Outliner
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.
## ✨ 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.
- **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:** 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.
- **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...
### 📸 Screenshots / Demo
| Border Mode | Inspector Mode |
| :-----------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------: |
|  |  |
### How to Use
1. Navigate to any webpage you want to inspect or debug.
2. Click the Border Patrol extension icon in your browser toolbar (_**Pro tip**: pin the extension so you can access it faster_), use a keyboard shortcut, or **right-click anywhere on the page** and select an option from the **Border Patrol** context menu.
3. **Border Mode**: Toggle the "Toggle Border Mode" switch to apply colorful outlines to all elements on the page. Use the "Border Settings" controls to adjust the outline size and style to your liking.
- Adjust outline **size** and **style** using the controls under **Border Settings**.
4. **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.
5. **Toggle Measurement Mode:** Use the "Toggle Measurement Mode" switch in the popup to measure the distance between any two elements.
- Hover over an element to preview it with a blue highlight.
- Click to select it as the **first** element (green highlight + "1st" badge).
- Click a second element to select it (green highlight + "2nd" badge) — a dashed line and distance in `px` appear between them.
- Press `Escape` or click again to reset the selection.
### Right-Click Context Menu
Right-click anywhere on a page to access the **Border Patrol** sub-menu and instantly toggle any mode without opening the popup:
- **Toggle Border Mode**
- **Toggle Inspector Mode**
- **Toggle Measurement Mode**
### Keyboard Shortcuts
Toggle Border Patrol ON or OFF instantly with a customizable keyboard shortcut.
- Toggle Border Mode: `Alt` + `Shift` + `B` (Default)
- Toggle Inspector Mode: `Alt` + `Shift` + `I` (Default)
- Toggle Measurement Mode: `Alt` + `Shift` + `M` (Default)
You can customize these shortcuts in your Chrome browser by navigating to `chrome://extensions/shortcuts`.
### Contributing
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](CONTRIBUTING.md) file for more detailed guidelines on contributing. Pull requests should target the `main` branch.
### Feedback and Support 💬
For bug reports, feature requests, or general feedback, please open an issue on the [Border Patrol GitHub Issues page](https://github.com/craigsavage/border-patrol/issues).
### License
Border Patrol is released under the [Apache-2.0 License](https://github.com/craigsavage/border-patrol/blob/main/LICENSE) 📄.