将鼠标悬停在网页上的元素上时，以视觉方式突出显示 DOM 父/子。
DOM 结构可视化工具 - 即时查看 DOM 树
是否曾努力理解元素如何嵌套在网页上？
DOM 结构可视化工具使其变得毫不费力。只需将鼠标悬停在任何元素上，扩展程序就会立即突出显示其父元素、直接子元素和元素本身，所有元素都具有独特的颜色编码轮廓和信息标签。
────────────────────────────────────────────────────────────────────────────────────────────────────
✨ 主要特点
• 🖱️ 悬停可视化 — 将光标移到任何元素上即可立即查看其在 DOM 层次结构中的位置。无需点击，无需检查，无需开发工具。
• 🎨 颜色编码突出显示 — 悬停元素、父元素和子元素都有自己独特的颜色，使嵌套一目了然。
• 🏷️ 智能标签 — 浮动标签显示每个元素的标签名称、ID、类别和维度。根据需要打开或关闭它们。
• ⬆️⬇️ 父子控制— 选择是否突出显示父元素、子元素或两者。将父级深度调整为 1 到 5 级。
• 🎨 4 种配色方案 — 从默认、霓虹色、高对比度或完全自定义颜色中进行选择。自定义主题允许您使用十六进制代码、RGB 值或颜色选择器来选择精确的颜色。
• ⚙️ 完整设置页面 — 通过齿轮图标或浏览器的扩展选项访问高级设置。包括实时预览，以便您可以实时查看您的颜色选择。
• 🌍 50 多种语言 — 完全本地化的界面支持 50 多种语言，包括英语、西班牙语、法语、德语、日语、中文、阿拉伯语、印地语等。
• ⚡ 性能第一——使用requestAnimationFrame、事件限制和最少的DOM 操作。即使在复杂的页面上也能顺利运行。
• 🔒 100% 私有——零数据收集。没有分析，没有跟踪，没有网络请求。一切都在您的浏览器本地运行。自己验证一下——源代码完全开放。
────────────────────────────────────────────────────────────────────────────────────────────────────
🎯 非常适合
• Web 开发人员调试布局和结构问题
• 学习 HTML 和 CSS 的学生
• 设计人员检查页面的构建方式
• QA 测试人员验证 DOM 结构
• 任何对网站如何构建感到好奇的人
────────────────────────────────────────────────────────────────────────────────────────────────────
🛡️ 隐私与信任
DOM Structure Visualizer 在 MIT 许可证下完全开源。它仅请求所需的最低权限（activeTab 和存储）。它的网络请求永远为零。您的浏览数据永远不会离开您的设备。
阅读我们的完整隐私政策：https://e8013585.github.io/dom-struct-visualizer-privacy-policy/
────────────────────────────────────────────────────────────────────────────────────────────────────
📖 如何使用
1. 单击工具栏中的扩展图标
2. 打开可视化工具
3. 将鼠标悬停在页面上的任何元素上
4. 立即查看突出显示的 DOM 层次结构
5. 根据您的喜好调整设置
────────────────────────────────────────────────────────────────────────────────────────────────────
💻 开源
此扩展是免费、开源且由社区驱动的。欢迎在 GitHub 上做出贡献、错误报告和功能请求：
https://github.com/e8013585/dom-struct-visualizer
────────────────────────────────────────────────────────────────────────────────────────────────────
如果您发现 DOM Structure Visualizer 有用，请考虑留下评分 ⭐ — 它可以帮助其他人发现该扩展。谢谢你！
