Outliner CSS
Item logo image for Outliner CSS

Outliner CSS

Featured
5.0(

8 ratings

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

5 out of 58 ratings

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

Review's profile picture

Arfin ZabedOct 15, 2022

This is really helpful. Recommend for developers.

Review's profile picture

Lakshmikanth AyyadevaraJun 14, 2021

Very well structured extension, but I need one feature where clicking on the extension icon it should change its color indicating that the extension is on, clicking on it again should remove the CSS outlines, great work keep it up

3 out of 3 people found this helpful
Review's profile picture

Alessandro de OliveiraMay 10, 2021

It does very well its purpose. I recommend!

Details

  • Version
    1.0.1
  • Updated
    October 10, 2017
  • Offered by
    tarah
  • Size
    13.01KiB
  • Languages
    English (United States)
  • 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 not provided any information about the collection or usage of your data.

Support

Related

Gridman - front-end toolkit

3.6(54)

Swiss army knife for front-end developers

Looksee

5.0(3)

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

JSON Viewer Pro

4.8(116)

A completely free extension to visualise JSON response in awesome Tree and Chart view with great user experience and options. ✅…

HTML Visual Validation

4.3(7)

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

CSS Debugger

5.0(1)

A lightweight extension for Google chrome that shows the outline of all CSS elements on the page.

DOM X-Ray

5.0(1)

See through the DOM to visually debug CSS positioning.

Debug CSS

4.7(31)

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

Pesticide for Chrome

4.7(66)

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

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(38)

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

Gridman - front-end toolkit

3.6(54)

Swiss army knife for front-end developers

Looksee

5.0(3)

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

JSON Viewer Pro

4.8(116)

A completely free extension to visualise JSON response in awesome Tree and Chart view with great user experience and options. ✅…

HTML Visual Validation

4.3(7)

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

CSS Debugger

5.0(1)

A lightweight extension for Google chrome that shows the outline of all CSS elements on the page.

DOM X-Ray

5.0(1)

See through the DOM to visually debug CSS positioning.

Debug CSS

4.7(31)

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

Pesticide for Chrome

4.7(66)

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

Google apps