# Debug CSS

> Adds outline to all elements on the page to show the culprit element which is changing desired layout hit \`Alt+Shift+C \` key to toggle the extension

Canonical page: [https://chrome-stats.com/d/pranay-joshi](https://chrome-stats.com/d/pranay-joshi)

## Overview

- **ID:** `pranay-joshi`
- **Platform:** Firefox
- **Type:** Firefox add-on
- **Status:** Available
- **Publisher:** Pranay Joshi
- **Category:** web-development,appearance
- **Daily users:** 918
- **Weekly downloads:** 8
- **Rating:** 4.79 / 5 (14 ratings)
- **Version:** 1.1resigned1
- **Last updated:** 2024-04-26
- **First published:** 2018-09-28
- **Size:** 24 KB
- **Data as of:** 2026-09-09
- **Store listing:** [Firefox Add-ons Store](https://addons.mozilla.org/firefox/addon/pranay-joshi/)

## Description

Debug CSS is a lightweight Chrome extension designed to aid web developers in identifying layout issues by outlining every element on a webpage. Using the CSS outline property, it highlights elements with different colors, making it easy to spot which element is causing layout changes. Activate or deactivate the extension via the icon or simply use the keyboard shortcut Alt+Shift+C.

The extension improves debugging efficiency by allowing developers to visually inspect element positions and hierarchy. Holding the Ctrl key while hovering reveals the element's details and style values. This tool is essential for anyone looking to streamline their front-end development workflow and resolve CSS positioning challenges promptly.

## Rankings

- #3,444 — Overall
- #2 — debug
- #9 — jquery
- #104 — shift
- #117 — element
- #183 — layout

## 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).

## Review summary

Users appreciate Debug CSS for its simplicity, usefulness in web development, and effective Ctrl shortcut to display element information. However, some users report that the Ctrl feature to see element info sometimes does not work, which affects their experience. Overall, the add-on works well and is valued for its straightforward functionality.

### Pros

- Simple to use with a convenient shortcut, no cluttered menus or buttons
- Extremely useful for web development and making websites
- The Ctrl feature to show element info is highly appreciated
- Works well and reliable

### Cons

- The Ctrl shortcut to see element info does not work for some users

## Similar extensions and apps

- [Toggle CSS outline](https://chrome-stats.com/d/toggle-css-outline) — 71 users, 5.00 / 5
- [Css Debug with Pesticide CSS](https://chrome-stats.com/d/css-debug-with-pesticide) — 6 users
- [Layout Debugger](https://chrome-stats.com/d/layout-debugger) — 2 users
- [Inspectre](https://chrome-stats.com/d/inspectre) — 8 users
- [CSS Insight](https://chrome-stats.com/d/css-insight) — 66 users
- [CSS Layout Debugger](https://chrome-stats.com/d/css-layout-debugger) — 162 users, 4.71 / 5
- [Element CSS](https://chrome-stats.com/d/element-css) — 2 users
- [Insecticide for Firefox](https://chrome-stats.com/d/insecticide-for-firefox) — 1 users
- [Css Layout Hack](https://chrome-stats.com/d/css-layout-hack) — 2 users
- [a11y.css accessibility checker](https://chrome-stats.com/d/a11ycss) — 178 users, 5.00 / 5
- [CSS Viewer](https://chrome-stats.com/d/css_viewer) — 19 users, 5.00 / 5
- [QuietCSS](https://chrome-stats.com/d/quietcss) — 1 users

---

Source: [Chrome-Stats](https://chrome-stats.com/d/pranay-joshi)