¿Qué es VisualDOM?

VisualDOM es una extensión de Chrome desarrollada por cmderobertis, y su función principal es "Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.".

Capturas de Pantalla de la Extensión

Descargar Archivo CRX de la Extensión VisualDOM

Descarga archivos de extensión VisualDOM en formato crx, instala manualmente las extensiones de Chrome en el navegador o comparte los archivos crx con amigos para instalar fácilmente las extensiones de Chrome.

Instrucciones de Uso de la Extensión

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

Información Básica de la Extensión

Nombre	VisualDOM
ID	aanodhkbohbafcokdhkedojclmfgpmgf
URL Oficial	https://chromewebstore.google.com/detail/visualdom/aanodhkbohbafcokdhkedojclmfgpmgf
Descripción	Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
Tamaño del Archivo	92.7 KB
Cantidad de Instalaciones	31
Versión Actual	0.0.1
Última Actualización	2022-08-03
Fecha de Publicación	2022-08-03
Desarrollador	cmderobertis
Correo electrónico	[email protected]
Tipo de Pago	free
Idiomas Soportados	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" } }