Apa itu VisualDOM?

VisualDOM adalah ekstensi Chrome yang dikembangkan oleh cmderobertis, dan fitur utamanya adalah "Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.".

Screenshot Ekstensi

Unduh Berkas CRX Ekstensi VisualDOM

Unduh file ekstensi VisualDOM dalam format crx, pasang ekstensi Chrome secara manual di peramban, atau bagikan file crx dengan teman untuk menginstal ekstensi Chrome dengan mudah.

Petunjuk Penggunaan Ekstensi

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

Informasi Dasar Ekstensi

Nama	VisualDOM
ID	aanodhkbohbafcokdhkedojclmfgpmgf
URL Resmi	https://chromewebstore.google.com/detail/visualdom/aanodhkbohbafcokdhkedojclmfgpmgf
Deskripsi	Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
Ukuran File	92.7 KB
Jumlah Instalasi	31
Versi Saat Ini	0.0.1
Terakhir Diperbarui	2022-08-03
Tanggal Publikasi	2022-08-03
Pengembang	cmderobertis
Email	[email protected]
Tipe Pembayaran	free
Bahasa yang Didukung	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" } }