O que é Layout Debugger?

Layout Debugger é uma extensão do Chrome desenvolvida por cdsnowden, e sua principal característica é "Chrome extension for highlighting DOM elements to better debug layout issues".

Capturas de Tela da Extensão

Baixar o arquivo CRX da Extensão Layout Debugger

Baixe arquivos de extensão Layout Debugger no formato crx, instale manualmente as extensões do Chrome no navegador ou compartilhe os arquivos crx com amigos para instalar facilmente as extensões do Chrome.

Instruções de Uso da Extensão

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

Informações Básicas da Extensão

Nome	Layout Debugger
ID	gkamnoiedmidgolhlihkamjpfccohilb
URL Oficial	https://chromewebstore.google.com/detail/layout-debugger/gkamnoiedmidgolhlihkamjpfccohilb
Descrição	Chrome extension for highlighting DOM elements to better debug layout issues
Tamanho do Arquivo	251 KB
Contagem de Instalações	897
Versão Atual	1.7
Última Atualização	2022-04-19
Data de Publicação	2017-07-31
Classificação	4.00/5 Total de 3 Avaliações
Desenvolvedor	cdsnowden
Email	[email protected]
Tipo de Pagamento	free
Site da Extensão	https://github.com/Recidvst/Layout-Debugger
URL da Página de Ajuda	https://github.com/Recidvst/Layout-Debugger#support
Idiomas Suportados	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" ] }