Co je VisualDOM?

VisualDOM je rozšíření Chrome vyvinuté cmderobertis, a jeho hlavní funkcí je „Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.“.

Snímky obrazovky rozšíření

Stáhnout soubor CRX rozšíření VisualDOM

Stáhněte si soubory rozšíření VisualDOM ve formátu crx, ručně nainstalujte rozšíření Chrome do prohlížeče nebo sdílejte soubory crx s přáteli, abyste jednoduše nainstalovali rozšíření Chrome.

Pokyny pro Použití Rozšíření

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

Základní Informace o Rozšíření

Název	VisualDOM
ID	aanodhkbohbafcokdhkedojclmfgpmgf
Oficiální URL	https://chromewebstore.google.com/detail/visualdom/aanodhkbohbafcokdhkedojclmfgpmgf
Popis	Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
Velikost souboru	92.7 KB
Počet instalací	31
Aktuální Verze	0.0.1
Poslední Aktualizace	2022-08-03
Datum Vydání	2022-08-03
Vývojář	cmderobertis
E-mail	[email protected]
Typ Platby	free
Podporované Jazyky	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" } }