UD5工具箱
使用教程与操作指南
第一步：打开工具并注入脚本
在浏览器中打开本工具页面后，首先需要在顶部的 URL 输入框中输入目标网页的地址，或者直接在当前页面中使用注入功能。工具会提供一个 JavaScript 代码片段，你只需要将其粘贴到目标页面的浏览器开发者工具控制台中执行即可。注入的脚本会自动拦截 customElements.define() 方法，开始记录后续所有被注册的自定义元素。同时，脚本还会遍历当前已存在的 DOM 树，找出之前已经注册的元素。注入完成后，控制台会输出提示信息，确认监听器已成功启动。
第二步：触发页面扫描
注入脚本后，点击工具界面上的"扫描页面"按钮。工具会立即执行一次完整的 DOM 树遍历，从文档根节点开始，逐层深入所有子节点。对于每个发现的元素，工具会检查其标签名是否符合自定义元素的命名规范（即包含连字符），然后在已注册列表中查找该标签名，从而判断其注册状态。扫描过程通常在毫秒级完成，即使对于包含数千个 DOM 节点的复杂页面也不会有明显的延迟。扫描结果会实时更新到界面上的统计面板和详细信息表格中。
第三步：开启实时监听
如果你需要调试动态渲染的页面（例如使用 React、Vue 或 Angular 等框架构建的单页应用），可以点击"实时监听"按钮来启用 MutationObserver。启用后，每当页面中新增、移除或修改 DOM 节点时，工具都会自动触发重新扫描并更新结果。你可以通过页面的交互操作（如切换路由、展开折叠面板、加载更多内容等）来观察自定义元素的变化情况。实时监听会显著增加控制台的日志输出，建议在不需要时及时关闭。
第四步：解读扫描结果
扫描结果分为两部分：统计概览和详细表格。统计概览显示四个关键数字：已注册标签数（表示通过 customElements.define() 正式注册的自定义元素数量）、未注册标签数（页面中存在但未被注册的可能自定义元素数量）、实例总数（所有自定义元素的 DOM 实例总数）以及 Shadow DOM 内的元素数量（封装在 Shadow Root 内部的自定义元素数量）。详细表格则列出了每个元素的完整信息，包括注册状态、构造函数、继承关系、实例数和监听属性。
第五步：使用过滤和搜索
当页面中存在大量自定义元素时，可以使用过滤功能来缩小查看范围。勾选"仅显示已注册"可以隐藏所有未注册的元素，聚焦于正式定义的组件。在搜索框中输入关键词可以按标签名进行模糊搜索，例如输入 "my-" 可以只显示以 "my-" 开头的自定义元素。过滤和搜索会即时生效，结果数量会实时更新。
第六步：导出分析报告
确认扫描结果后，点击"导出 JSON"按钮即可下载完整的分析报告。报告以 JSON 格式组织，包含所有扫描数据的结构化表示。你可以将这份报告用于团队内部的技术评审、代码审计或者作为自动化测试的输入数据。建议在每次重大版本发布前都执行一次扫描并保存报告，以便追踪组件注册状态的变化趋势。