Item logo image for Outline All Elements

Outline All Elements

Featured
5.0(

1 rating

)
ExtensionDeveloper Tools272 users
Item media 1 (screenshot) for Outline All Elements

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. Source Code: https://github.com/MohannadNaj/outline-all-elements 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.

5 out of 51 rating

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

Details

  • Version
    1.1
  • Updated
    May 13, 2025
  • Offered by
    MohannadNaj
  • Size
    33.79KiB
  • 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 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(5)

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

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

4.0(3)

See through the DOM to visually debug CSS positioning.

Outliner CSS

5.0(12)

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.

Css Layout Hack

4.0(4)

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

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

Outline HTML Elements

5.0(5)

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

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

4.0(3)

See through the DOM to visually debug CSS positioning.

Outliner CSS

5.0(12)

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.

Css Layout Hack

4.0(4)

You can see website layers with different colors easily

Google apps