Qu'est-ce que Layout Debugger ?

Layout Debugger est une extension Chrome développée par cdsnowden, et sa fonction principale est "Chrome extension for highlighting DOM elements to better debug layout issues".

Captures d'Écran de l'Extension

Télécharger le fichier CRX de l'extension Layout Debugger

Téléchargez les fichiers d'extension Layout Debugger au format crx, installez manuellement les extensions Chrome dans le navigateur ou partagez les fichiers crx avec des amis pour installer facilement les extensions Chrome.

Instructions d'Utilisation de l'Extension

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

Informations de Base sur l'Extension

Nom	Layout Debugger
ID	gkamnoiedmidgolhlihkamjpfccohilb
URL Officiel	https://chromewebstore.google.com/detail/layout-debugger/gkamnoiedmidgolhlihkamjpfccohilb
Description	Chrome extension for highlighting DOM elements to better debug layout issues
Taille du Fichier	251 KB
Nombre d'Installations	897
Version Actuelle	1.7
Dernière Mise à Jour	2022-04-19
Date de Publication	2017-07-31
Évaluation	4.00/5 Total 3 Évaluations
Développeur	cdsnowden
Email	[email protected]
Type de Paiement	free
Site Web de l'Extension	https://github.com/Recidvst/Layout-Debugger
URL de la Page d'Aide	https://github.com/Recidvst/Layout-Debugger#support
Langues Prises en Charge	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" ] }