VisualDOMとは何ですか？

VisualDOMはcmderobertisによって開発されたChromeの拡張機能で、その主な機能は「Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.」です。

拡張機能のスクリーンショット

VisualDOM拡張機能のCRXファイルをダウンロード

VisualDOM拡張子のファイルをcrx形式でダウンロードし、ブラウザにChrome拡張機能を手動でインストールするか、crxファイルを友達と共有して簡単にChrome拡張機能をインストールします。

拡張機能の使用方法

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

拡張機能の基本情報

名前	VisualDOM
ID	aanodhkbohbafcokdhkedojclmfgpmgf
公式URL	https://chromewebstore.google.com/detail/visualdom/aanodhkbohbafcokdhkedojclmfgpmgf
説明	Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
ファイルサイズ	92.7 KB
インストール数	31
現在のバージョン	0.0.1
最終更新日	2022-08-03
公開日	2022-08-03
開発者	cmderobertis
Eメール	[email protected]
支払い方法	free
対応言語	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" } }