¿Qué es Layout Debugger?

Layout Debugger es una extensión de Chrome desarrollada por cdsnowden, y su función principal es "Chrome extension for highlighting DOM elements to better debug layout issues".

Capturas de Pantalla de la Extensión

Descargar Archivo CRX de la Extensión Layout Debugger

Descarga archivos de extensión Layout Debugger en formato crx, instala manualmente las extensiones de Chrome en el navegador o comparte los archivos crx con amigos para instalar fácilmente las extensiones de Chrome.

Instrucciones de Uso de la Extensión

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

Información Básica de la Extensión

Nombre	Layout Debugger
ID	gkamnoiedmidgolhlihkamjpfccohilb
URL Oficial	https://chromewebstore.google.com/detail/layout-debugger/gkamnoiedmidgolhlihkamjpfccohilb
Descripción	Chrome extension for highlighting DOM elements to better debug layout issues
Tamaño del Archivo	251 KB
Cantidad de Instalaciones	897
Versión Actual	1.7
Última Actualización	2022-04-19
Fecha de Publicación	2017-07-31
Calificación	4.00/5 Total de 3 Calificaciones
Desarrollador	cdsnowden
Correo electrónico	[email protected]
Tipo de Pago	free
Sitio Web de la Extensión	https://github.com/Recidvst/Layout-Debugger
URL de la Página de Ayuda	https://github.com/Recidvst/Layout-Debugger#support
Idiomas Soportados	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" ] }