VisualDOM

Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.

O que é VisualDOM?

VisualDOM é uma extensão do Chrome desenvolvida por cmderobertis, e sua principal característica é "Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.".

Capturas de Tela da Extensão

screenshot

Baixar o arquivo CRX da Extensão VisualDOM

Baixe arquivos de extensão VisualDOM 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

                        A lightweight visual representation of the Document Object Model to aid in web development, written in vanilla JavaScript and CSS. A "set-it-and-forget-it" solution to element nesting confusion.

This extension draws a diagram of the elements on their HTML page in order to easily visualize how their HTML elements are nested within one another. Tag names, classes, and IDs are shown inside each node, color-coded for convenient, meaningful identification.

How to use:

- Open your HTML file in the browser.
- Click the VisualDOM icon to enable it. Chrome may ask for certain permissions (no user data or website information is ever stored)
- Refreshing the page (or modifying your HTML while using a Live Server IDE extension) will remove the elements generated by VisualDOM, and you will need to click the icon again to generate the updated content.

Like what you see? Find me on GitHub 👉 https://github.com/cmderobertis                    

Informações Básicas da Extensão

Nome VisualDOM VisualDOM
ID aanodhkbohbafcokdhkedojclmfgpmgf
URL Oficial https://chromewebstore.google.com/detail/visualdom/aanodhkbohbafcokdhkedojclmfgpmgf
Descrição Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
Tamanho do Arquivo 92.7 KB
Contagem de Instalações 31
Versão Atual 0.0.1
Última Atualização 2022-08-03
Data de Publicação 2022-08-03
Desenvolvedor cmderobertis
Email [email protected]
Tipo de Pagamento free
Idiomas Suportados en
manifest.json
{
    "update_url": "https:\/\/clients2.google.com\/service\/update2\/crx",
    "name": "VisualDOM",
    "description": "Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.",
    "version": "0.0.1",
    "manifest_version": 3,
    "permissions": [
        "activeTab",
        "scripting"
    ],
    "background": {
        "service_worker": "background.js"
    },
    "action": {
        "default_icon": {
            "32": "assets\/icons\/vdom-square32.png",
            "64": "assets\/icons\/vdom-square64.png",
            "128": "assets\/icons\/vdom-square128.png",
            "256": "assets\/icons\/vdom-square256.png",
            "512": "assets\/icons\/vdom-square512.png"
        }
    },
    "content_scripts": [
        {
            "matches": [
                ""
            ],
            "css": [
                "vdom.css"
            ]
        }
    ],
    "icons": {
        "32": "assets\/icons\/vdom-square32.png",
        "64": "assets\/icons\/vdom-square64.png",
        "128": "assets\/icons\/vdom-square128.png",
        "256": "assets\/icons\/vdom-square256.png",
        "512": "assets\/icons\/vdom-square512.png"
    }
}