Layout Debugger

Chrome extension for highlighting DOM elements to better debug layout issues

Layout Debugger: Chrome Extension for Efficient Website Debugging

'Layout Debugger' is a Chrome extension created to assist developers with debugging. It easily highlights DOM elements, differentiating block from inline elements, and identifying overflowing objects on a webpage. It adds a unique colour outline for each visible DOM element and provides a red visual prompt for overflowing divs, aiding in the efficient and comprehensive resolution of layout issues.
Install from Chrome Web Store

Extension stats

By: cdsnowden
Users: 884
-9
Rating: 4.00
(3)
Version: 1.7 (Last updated: 2022-04-19)
Creation date: 2017-07-31
Risk impact: Low risk impact
Risk likelihood:
Manifest version: 2
Permissions:
  • activeTab
Size: 257.02K

Other platforms

Not available on Android
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

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

User reviews

This extension only works on a few websites. Wouldn't recommend to others!
by Zen Imtiaz, 2021-10-23

Awesome! Just what I needed. Recommend!!
by Stas Klevtsov, 2017-06-16
View all user reviews

Extension safety

Risk impact

Layout Debugger requires very minimum permissions.

Risk likelihood

Layout Debugger has earned a good reputation and can be trusted.

Upgrade to see risk analysis details

Promo images

Layout Debugger small promo image
Small promo image

Similar extensions

Here are some Chrome extensions that are similar to Layout Debugger: