Layout Debugger
Item logo image for Layout Debugger

Layout Debugger

Featured
4.0(

3 ratings

)
Item media 1 screenshot
Item media 2 screenshot

Overview

Chrome extension for highlighting DOM elements to better debug layout issues

- Identifying too-wide overflowing objects. - Distinguishing block from inline elements. - Helping to keep track of element alignment. Adds a distinct colour outline to each visible DOM element, as well as providing a visual prompt for overflowing divs. display: block; => blue; display: inline; => purple; overflowing the viewport => red! etc..

4 out of 53 ratings

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

Review's profile picture

Zen ImtiazOct 23, 2021

This extension only works on a few websites. Wouldn't recommend to others!

1 person found this review to be unhelpful
Review's profile picture

Stas KlevtsovJun 16, 2017

Awesome! Just what I needed. Recommend!!

1 out of 2 people found this helpful

Details

  • Version
    1.7
  • Updated
    April 19, 2022
  • Offered by
    cdsnowden
  • Size
    251KiB
  • Languages
    English (UK)
  • Developer
    Email
    cdsnowden@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.

HTML Visual Validation

4.3(7)

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

Outliner

5.0(3)

This extension outlines all the DOM elements on a page

DOM Highlighter

5.0(4)

Highlight DOM elements

Outliner CSS

5.0(8)

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

Debug CSS

4.7(31)

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

Layout Debugger

3.0(1)

Easily remove bugs from your layouts.

DevTools Classes & Atributes panel

5.0(4)

Toggle classes and attributes

Div Highlighter

3.3(7)

tool to highlight divs!

HTML Hierarchy Visualizer

5.0(8)

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

Div Density

4.2(6)

This extension shows the density of elements on your page

simple-debug.css

4.7(14)

Debug your layouts with one line of CSS and a single click.

Looksee

5.0(3)

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

HTML Visual Validation

4.3(7)

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

Outliner

5.0(3)

This extension outlines all the DOM elements on a page

DOM Highlighter

5.0(4)

Highlight DOM elements

Outliner CSS

5.0(8)

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

Debug CSS

4.7(31)

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

Layout Debugger

3.0(1)

Easily remove bugs from your layouts.

DevTools Classes & Atributes panel

5.0(4)

Toggle classes and attributes

Google apps