Item logo image for Outliner CSS

Outliner CSS

Featured
5.0(

12 ratings

)
ExtensionDeveloper Tools10,000 users
Item media 1 screenshot

Overview

A totally awesome structure and layout debugger that inserts CSS outlines to all elements.

After years of adding debug styles into projects to help debug structure and layout issues I spent an afternoon making the Outliner CSS chrome extension. Outliner CSS is added to the current page on all elements with the option to switch between RGB colors and toggle background color opacity to highlight depth. Now supports saved preferences per tab & additional color options.

5 out of 512 ratings

Google doesn't verify reviews. Learn more about results and reviews.

Details

  • Version
    3.0
  • Updated
    January 20, 2025
  • Offered by
    tarah
  • Size
    17.31KiB
  • 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

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

Looksee

5.0(3)

Add borders or shaders to your webpage on the fly. No need to write debug markup to fix layout components.

CSS Peeper

4.6(365)

Extract CSS and build beautiful styleguides.

HTML Visual Validation

4.4(8)

HTML Visual Validation gives you information about the html elements, live, on page.

Dimensions Inspect | Gridman

4.0(87)

Swiss army knife for front-end developers

DOM X-Ray

5.0(2)

See through the DOM to visually debug CSS positioning.

Debug CSS

4.7(35)

Adds outline to all elements on the page to show the culprit element which is changing desired layout

Pesticide for Chrome

4.7(97)

This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.

Outliner

5.0(3)

This extension outlines all the DOM elements on a page

Show CSS Outline Style

5.0(4)

ページ上にある全ての要素のOutlineを表示します。

HTML Hierarchy Visualizer

5.0(8)

This extension is a tool that helps visualize the layout of HTML elements on a webpage

Div Highlighter

3.3(7)

tool to highlight divs!

HTML Tree Generator

4.3(40)

Html is really a tree of elements, css is what defines the layout. This extension displays any page as a tree.

Looksee

5.0(3)

Add borders or shaders to your webpage on the fly. No need to write debug markup to fix layout components.

CSS Peeper

4.6(365)

Extract CSS and build beautiful styleguides.

HTML Visual Validation

4.4(8)

HTML Visual Validation gives you information about the html elements, live, on page.

Dimensions Inspect | Gridman

4.0(87)

Swiss army knife for front-end developers

DOM X-Ray

5.0(2)

See through the DOM to visually debug CSS positioning.

Debug CSS

4.7(35)

Adds outline to all elements on the page to show the culprit element which is changing desired layout

Pesticide for Chrome

4.7(97)

This extension inserts the Pesticide CSS into the current page, outlining each element to better see placement on the page.

Outliner

5.0(3)

This extension outlines all the DOM elements on a page

Google apps