Was ist Layout Debugger?

Layout Debugger ist eine Chrome-Erweiterung, die von cdsnowden entwickelt wurde, und ihr Hauptmerkmal ist "Chrome extension for highlighting DOM elements to better debug layout issues".

Erweiterungsscreenshots

Layout Debugger-Erweiterungs-CRX-Datei herunterladen

Laden Sie Layout Debugger-Erweiterungsdateien im crx-Format herunter, installieren Sie Chrome-Erweiterungen manuell im Browser oder teilen Sie die crx-Dateien mit Freunden, um Chrome-Erweiterungen einfach zu installieren.

Anleitung zur Verwendung der Erweiterung

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

Grundlegende Informationen zur Erweiterung

Name	Layout Debugger
ID	gkamnoiedmidgolhlihkamjpfccohilb
Offizielle URL	https://chromewebstore.google.com/detail/layout-debugger/gkamnoiedmidgolhlihkamjpfccohilb
Beschreibung	Chrome extension for highlighting DOM elements to better debug layout issues
Dateigröße	251 KB
Installationsanzahl	897
Aktuelle Version	1.7
Letztes Update	2022-04-19
Veröffentlichungsdatum	2017-07-31
Bewertung	4.00/5 Insgesamt 3 Bewertungen
Entwickler	cdsnowden
E-Mail	[email protected]
Zahlungsart	free
Erweiterungswebsite	https://github.com/Recidvst/Layout-Debugger
Hilfeseite URL	https://github.com/Recidvst/Layout-Debugger#support
Unterstützte Sprachen	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" ] }