VisualDOM

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

Wat is VisualDOM?

VisualDOM is een Chrome-extensie ontwikkeld door cmderobertis, en de belangrijkste functie is "Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.".

Extensie Screenshots

screenshot

Download het CRX-bestand van de extensie VisualDOM

Download VisualDOM-extensiebestanden in crx-indeling, installeer Chrome-extensies handmatig in de browser of deel de crx-bestanden met vrienden om Chrome-extensies eenvoudig te installeren.

Instructies voor het Gebruik van de Extensie

                        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                    

Basisinformatie over de Extensie

Naam VisualDOM VisualDOM
ID aanodhkbohbafcokdhkedojclmfgpmgf
Officiële URL https://chromewebstore.google.com/detail/visualdom/aanodhkbohbafcokdhkedojclmfgpmgf
Beschrijving Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
Bestandsgrootte 92.7 KB
Aantal Installaties 31
Huidige Versie 0.0.1
Laatst Bijgewerkt 2022-08-03
Publicatiedatum 2022-08-03
Ontwikkelaar cmderobertis
E-mail [email protected]
Betalingswijze free
Ondersteunde Talen 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"
    }
}