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 |
| 官方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 |
| 电子邮箱 | [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": [
" | |
