VisualDOM
Visual representation of the Document Object Model, displayed in browser. Rendered diagram reduces confusion during web development.
什麼是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 |
| 官方網址 | 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 |
| 電子郵箱 | [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": [
" | |
