Cos'è VisualDOM?

VisualDOM è un'estensione di Chrome sviluppata da cmderobertis, e la sua funzione principale è "Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.".

Screenshot dell'Estensione

Scarica il file CRX dell'estensione VisualDOM

Scarica i file di estensione VisualDOM in formato crx, installa manualmente le estensioni di Chrome nel browser o condividi i file crx con gli amici per installare facilmente le estensioni di Chrome.

Istruzioni per l'Uso dell'Estensione

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

Informazioni di Base sull'Estensione

Nome	VisualDOM
ID	aanodhkbohbafcokdhkedojclmfgpmgf
URL Ufficiale	https://chromewebstore.google.com/detail/visualdom/aanodhkbohbafcokdhkedojclmfgpmgf
Descrizione	Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
Dimensione del File	92.7 KB
Conteggio Installazioni	31
Versione Corrente	0.0.1
Ultimo Aggiornamento	2022-08-03
Data di Pubblicazione	2022-08-03
Sviluppatore	cmderobertis
Email	[email protected]
Tipo di Pagamento	free
Lingue Supportate	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" } }