Outliner CSS

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

What is Outliner CSS?

Outliner CSS is a Chrome extension designed to simplify debugging layout and structure issues in website design. It allows developers to insert outlines in multiple colors to all website elements and provides the option to toggle background color opacity, highlighting depth and providing an intuitive sense of the website layout.

Download

Extension stats

By: tarah

View on Chrome Web Store

Users: 10,000+

Rating: 5.00 (11)

Version: 1.0.1 (Last updated: 2017-10-10)

Creation date: 2017-10-10

Risk impact: Very low risk impact

Risk likelihood: Very low risk likelihood

Manifest version: 2

Permissions:

activeTab
storage

Size: 13.32K

Ranking

# 9709 ▼ 35

Other rankings

#763 in Developer Tools ▼ 1 #57 in layout keyword 19 ▼ 3 #182 in debug keyword 15 ▼ 2

Other platforms

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

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.

User reviews

These summaries are automatically generated weekly using AI based on recent user reviews. Chrome Web Store does not verify user reviews, so some user reviews may be inaccurate, spammy, or outdated.

Pros