Qu'est-ce que VisualDOM ?

VisualDOM est une extension Chrome développée par cmderobertis, et sa fonction principale est "Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.".

Captures d'Écran de l'Extension

Télécharger le fichier CRX de l'extension VisualDOM

Téléchargez les fichiers d'extension VisualDOM au format crx, installez manuellement les extensions Chrome dans le navigateur ou partagez les fichiers crx avec des amis pour installer facilement les extensions Chrome.

Instructions d'Utilisation de l'Extension

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

Informations de Base sur l'Extension

Nom	VisualDOM
ID	aanodhkbohbafcokdhkedojclmfgpmgf
URL Officiel	https://chromewebstore.google.com/detail/visualdom/aanodhkbohbafcokdhkedojclmfgpmgf
Description	Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
Taille du Fichier	92.7 KB
Nombre d'Installations	31
Version Actuelle	0.0.1
Dernière Mise à Jour	2022-08-03
Date de Publication	2022-08-03
Développeur	cmderobertis
Email	[email protected]
Type de Paiement	free
Langues Prises en Charge	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" } }