What is Layout Debugger?

Layout Debugger is a Chrome extension developed by cdsnowden, and its main feature is "Chrome extension for highlighting DOM elements to better debug layout issues".

Extension Screenshots

Download Layout Debugger Extension CRX File

Download Layout Debugger extension files in crx format, manually install Chrome extensions in the browser, or share the crx files with friends to easily install Chrome extensions.

Extension Usage Instructions

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

Extension Basic Information

Name	Layout Debugger
ID	gkamnoiedmidgolhlihkamjpfccohilb
Official URL	https://chromewebstore.google.com/detail/layout-debugger/gkamnoiedmidgolhlihkamjpfccohilb
Description	Chrome extension for highlighting DOM elements to better debug layout issues
File Size	251 KB
Installation Count	897
Current Version	1.7
Last Updated	2022-04-19
Publish Date	2017-07-31
Rating	4.00/5 Total 3 Ratings
Developer	cdsnowden
Email	[email protected]
Payment Type	free
Extension Website	https://github.com/Recidvst/Layout-Debugger
Help Page URL	https://github.com/Recidvst/Layout-Debugger#support
Supported Languages	en-GB
manifest.json
{ "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx", "manifest_version": 2, "name": "Layout Debugger", "short_name": "Layout Debugger", "description": "Chrome extension for highlighting DOM elements to better debug layout issues", "version": "1.7", "author": "Chris Snowden", "icons": { "19": "images\/icon19dark.png", "38": "images\/icon38dark.png", "128": "images\/icon128dark.png" }, "browser_action": { "default_icon": { "19": "images\/icon19dark.png", "38": "images\/icon38dark.png" }, "default_title": "Toggle highlighter" }, "background": { "scripts": [ "background.js" ], "persistent": false }, "content_scripts": [ { "matches": [ "" ], "js": [ "highlight.js" ] } ], "permissions": [ "activeTab" ], "web_accessible_resources": [ "*.png", "highlight.js" ] }