https://github.com/recidvst/layout-debugger

Chrome extension for highlighting DOM elements for better debugging/layout issues.
https://github.com/recidvst/layout-debugger

chrome chrome-extension javascript layout layout-debugger

Last synced: about 1 month ago
JSON representation

Chrome extension for highlighting DOM elements for better debugging/layout issues.

• Host: GitHub
• URL: https://github.com/recidvst/layout-debugger
• Owner: Recidvst
• License: mit
• Created: 2016-08-29T17:04:29.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2022-04-18T15:23:51.000Z (about 4 years ago)
• Last Synced: 2025-03-16T22:37:30.261Z (about 1 year ago)
• Topics: chrome, chrome-extension, javascript, layout, layout-debugger
• Language: JavaScript
• Homepage: https://chrome.google.com/webstore/detail/element-highlighter/gkamnoiedmidgolhlihkamjpfccohilb
• Size: 1.24 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Layout Debugger (element-highlighter)

Chrome extension for highlighting DOM elements, designed to assist with better debugging of layout issues. Specifically:

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

```scss

display: block; => blue;

display: inline; => purple;

overflowing the viewport => red!

```

etc..

Get it here: https://chrome.google.com/webstore/detail/element-highlighter/gkamnoiedmidgolhlihkamjpfccohilb