Item logo image for Outliner CSS

Outliner CSS

Featured
4.5(

17 ratings

)
Item media 1 (screenshot) for Outliner CSS
Item media 2 (screenshot) for Outliner CSS

Overview

Outline every element to instantly debug layout and spacing - depth tinting, hover inspector, one-click selector copy.

Outliner CSS: Your Perfect Debugging Tool Outline every element to instantly debug layout and spacing, depth tinting, per-site memory, one-click selector copy. Key Features: - One-click outlines in five colours - Depth tinting to visualise nesting - Hover to inspect, click to copy the selector - Alt+Shift+O toggles the current page - Your colour preferences sync, nothing about the sites you visit is ever stored - No trackers, no external requests What's new in 3.1 - Depth tinting fixed (silently broken in 3.0) - DOM structure mode rebuilt: dashed context outlines, solid hover highlight, click-to-copy selectors - New: keyboard shortcut and synced colour preferences - Redesigned popup with automatic dark mode - No site-access permissions and no stored site records: acts only when you invoke it, remembers only your colours Lightweight by design: one injected stylesheet-style sweep, no trackers, no analytics, no external requests.

Details

  • Version
    3.2
  • Updated
    July 29, 2026
  • Offered by
    tarah
  • Size
    18.67KiB
  • Languages
    English (United States)
  • Developer
    Email
    devtoolhelp@gmail.com
  • Non-trader
    This developer has not identified itself as a trader. For consumers in the European Union, please note that consumer rights do not apply to contracts between you and this developer.

Privacy

Manage extensions and learn how they're being used in your organization
The developer has disclosed that it will not collect or use your data.

This developer declares that your data is

  • Not being sold to third parties, outside of the approved use cases
  • Not being used or transferred for purposes that are unrelated to the item's core functionality
  • Not being used or transferred to determine creditworthiness or for lending purposes

Support

Related

Outline HTML Elements

5.0

Outline HTML elements with a colorful border without affecting the layout to inspect website structure.

CSS Brio

5.0

CSS Brio is a fast CSS Animation viewer and CSS code provider for Designers.

JSON Viewer Pro

4.5

A powerful JSON viewer and formatter that offers advanced features for developers and data analysts to visualise and analyse JSON

Dimensions Inspect | Gridman

4.1

Swiss army knife for front-end developers

DOM X-Ray

4.2

See through the DOM to visually debug CSS positioning.

Debug CSS

4.5

When enabled adds outline to all elements on the page, Hold Ctrl and hover to get more detail

Pesticide

3.4

A CSS debugging tool that inserts outlines onto all elements to help with debugging layout issues

Hoverify: All-in-one extension for web developers

4.1

All-in-one browser extension that helps you inspect, edit, test, debug, capture, and optimize websites faster.

Inspect CSS

4.8

The easiest way to inspect and edit CSS

Css Layout Hack

4.0

You can see website layers with different colors easily

Amino: Live CSS Editor

3.9

Customize any website with your own CSS and see your changes instantly with Amino!

Live editor for CSS, Less & Sass - Magic CSS

4.6

Live preview of CSS/Less/Sass code changes. Auto-save file, autocomplete, Less/Sass to CSS, beautify, CSS reloader, lint, ...

Outline HTML Elements

5.0

Outline HTML elements with a colorful border without affecting the layout to inspect website structure.

CSS Brio

5.0

CSS Brio is a fast CSS Animation viewer and CSS code provider for Designers.

JSON Viewer Pro

4.5

A powerful JSON viewer and formatter that offers advanced features for developers and data analysts to visualise and analyse JSON

Dimensions Inspect | Gridman

4.1

Swiss army knife for front-end developers

DOM X-Ray

4.2

See through the DOM to visually debug CSS positioning.

Debug CSS

4.5

When enabled adds outline to all elements on the page, Hold Ctrl and hover to get more detail

Pesticide

3.4

A CSS debugging tool that inserts outlines onto all elements to help with debugging layout issues

Hoverify: All-in-one extension for web developers

4.1

All-in-one browser extension that helps you inspect, edit, test, debug, capture, and optimize websites faster.

Google apps