Outline All Elements
Item logo image for Outline All Elements

Outline All Elements

Featured
Item media 1 screenshot

Overview

Add CSS Outline property to all elements on the page for debugging CSS Layout.

A Chrome Extension for adding CSS Outline property (with different colors) to all elements on the page. Mainly this is useful for debugging CSS Layout and discovering potential issues. Notes: - Click the extension icon for activating/deactivating. - The outline colors are randomized based on it's order on the page. - The colors are randomized by assigning different cumulative Hue degree and a fixed Saturation (99%) and Light (50%). - On deactivating, the extension will restore the old outline value if it was there, and remove the style HTML attribute if it wasn't there before activating. Source Code: https://github.com/MohannadNaj/outline-all-elements

0 out of 5No ratings

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

Details

  • Version
    1.0
  • Updated
    January 9, 2020
  • Offered by
    MohannadNaj
  • Size
    31.23KiB
  • Languages
    English
  • Developer
    Email
    mohannadnaj@me.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 not provided any information about the collection or usage of your data.

Support

Related

Show CSS Outline Style

5.0(4)

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

DOM Highlighter

5.0(4)

Highlight DOM elements

DOM Outliner

0.0(0)

Outline elements within a webpage. Activate the extension and watch as DOM elements are highlighted with different colors.

DOM X-Ray

5.0(1)

See through the DOM to visually debug CSS positioning.

Outliner CSS

5.0(8)

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

Outliner

5.0(3)

This extension outlines all the DOM elements on a page

Looksee

5.0(3)

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

MageTools: DevTools Reimagined

4.3(9)

A faster, easier alternative to DevTools. Find styles, check attributes, and live-edit UIs.

Css Layout Hack

5.0(3)

You can see website layers with different colors easily

Layout Debugger

4.0(3)

Chrome extension for highlighting DOM elements to better debug layout issues

Inspector on acids

5.0(4)

Inspect the page, choose what you need to inspect

Div Highlighter

3.3(7)

tool to highlight divs!

Show CSS Outline Style

5.0(4)

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

DOM Highlighter

5.0(4)

Highlight DOM elements

DOM Outliner

0.0(0)

Outline elements within a webpage. Activate the extension and watch as DOM elements are highlighted with different colors.

DOM X-Ray

5.0(1)

See through the DOM to visually debug CSS positioning.

Outliner CSS

5.0(8)

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

Outliner

5.0(3)

This extension outlines all the DOM elements on a page

Looksee

5.0(3)

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

MageTools: DevTools Reimagined

4.3(9)

A faster, easier alternative to DevTools. Find styles, check attributes, and live-edit UIs.

Google apps