# CSS Layout Debugger

> When activated, CSS Layout Debugger applies dynamic backgrounds and outlines to elements on the page in order to assist in layout debugging.

Canonical page: [https://chrome-stats.com/d/css-layout-debugger](https://chrome-stats.com/d/css-layout-debugger)

## Overview

- **ID:** `css-layout-debugger`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** CSS Layout Debugger
- **Category:** web-development
- **Daily users:** 162
- **Weekly downloads:** 2
- **Rating:** 4.71 / 5 (7 ratings)
- **Version:** 1.0.0
- **Last updated:** 2019-09-10
- **First published:** 2019-09-09
- **Size:** 9.66 KB
- **Data as of:** 2026-09-08
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/css-layout-debugger/)
- **Website:** [https://github.com/vpicone/css-layout-debugger](https://github.com/vpicone/css-layout-debugger)

## Description

The **CSS Layout Debugger** Chrome extension enhances your web development workflow by visually highlighting the layout structure of a webpage. When activated, it applies dynamic backgrounds and outlines to individual elements, enabling developers to quickly identify spacing, alignment, and layout issues. Inspired by a popular CSS tip from Gajus Kuizinas, this tool simplifies the debugging process for complex CSS layouts.

Ideal for front-end developers and designers, the extension aids in spotting padding, margin, and box model inconsistencies without manually inspecting each element's CSS. It streamlines layout troubleshooting to optimize web page design and improve user experience effectively.

## Rankings

- #9,099 — Overall
- #7 — layout
- #18 — debug
- #236 — hack

## Permissions and access

### Permissions

- `activeTab`

## Safety

- **Risk impact:** Very low risk impact
- **Risk likelihood:** Low risk likelihood

### Analysis details

- This extension has low user count. Unpopular extensions may not be stable or safe.

> Some risk analysis details are omitted from this free response. [Upgrade to view the full analysis](https://chrome-stats.com/pricing).

## Similar extensions and apps

- [CSS Debug Overlay Plus](https://chrome-stats.com/d/css-debug-overlay-plus) — 1 users
- [Layout Debugger](https://chrome-stats.com/d/layout-debugger) — 2 users
- [Devil Debugger](https://chrome-stats.com/d/devil-debugger) — 3 users, 5.00 / 5
- [Css Debug with Pesticide CSS](https://chrome-stats.com/d/css-debug-with-pesticide) — 6 users
- [Css Layout Hack](https://chrome-stats.com/d/css-layout-hack) — 2 users
- [Inspectre](https://chrome-stats.com/d/inspectre) — 8 users
- [CSS Viewer](https://chrome-stats.com/d/inspectcssviewer) — 2 users
- [Debug CSS](https://chrome-stats.com/d/pranay-joshi) — 921 users, 4.79 / 5
- [CSS Live Tester](https://chrome-stats.com/d/css-live-tester) — 1 users
- [CSS Insight](https://chrome-stats.com/d/css-insight) — 65 users
- [Page Element Highlighter](https://chrome-stats.com/d/pageelementhighlighter)
- [Debugmode](https://chrome-stats.com/d/debugmode) — 3 users

---

Source: [Chrome-Stats](https://chrome-stats.com/d/css-layout-debugger)