VisualDOM

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

Was ist VisualDOM?

VisualDOM ist eine Chrome-Erweiterung, die von cmderobertis entwickelt wurde, und ihr Hauptmerkmal ist "Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.".

Erweiterungsscreenshots

screenshot

VisualDOM-Erweiterungs-CRX-Datei herunterladen

Laden Sie VisualDOM-Erweiterungsdateien im crx-Format herunter, installieren Sie Chrome-Erweiterungen manuell im Browser oder teilen Sie die crx-Dateien mit Freunden, um Chrome-Erweiterungen einfach zu installieren.

Anleitung zur Verwendung der Erweiterung

                        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                    

Grundlegende Informationen zur Erweiterung

Name VisualDOM VisualDOM
ID aanodhkbohbafcokdhkedojclmfgpmgf
Offizielle URL https://chromewebstore.google.com/detail/visualdom/aanodhkbohbafcokdhkedojclmfgpmgf
Beschreibung Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
Dateigröße 92.7 KB
Installationsanzahl 31
Aktuelle Version 0.0.1
Letztes Update 2022-08-03
Veröffentlichungsdatum 2022-08-03
Entwickler cmderobertis
E-Mail [email protected]
Zahlungsart free
Unterstützte Sprachen 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"
    }
}