UD5工具箱
核心功能特性
全面页面扫描
一键扫描当前页面中所有的 DOM 元素，自动识别自定义元素。工具会使用 querySelectorAll('*') 遍历整个 DOM 树，包括常规 DOM 和 Shadow DOM 内部的所有元素。通过检测标签名中是否包含连字符（hyphen），结合已注册的自定义元素列表，准确区分已注册和未注册的自定义元素。扫描过程高效且不影响页面原有状态。
实时监听变化
利用 MutationObserver API 实时监听页面 DOM 的变化。当有新的自定义元素被创建、插入或移除时，注册表会自动更新。这一功能对于调试单页应用（SPA）中动态渲染的组件尤为重要。开发者无需反复手动点击扫描按钮，工具会在后台持续监控并实时反映最新的组件状态。监听器还支持配置观察的子节点类型和属性变化。
导出JSON报告
扫描完成后，可以将完整的分析结果导出为格式化的 JSON 文件。导出内容包含所有已注册和未注册的自定义元素详细信息、统计数据（已注册总数、未注册总数、实例总数、Shadow DOM 内元素数）以及扫描时间戳。导出的 JSON 文件可以直接用于 CI/CD 流水线中的自动化检查，也可以作为项目文档的一部分进行存档。
统计概览面板
提供四个核心统计指标的实时展示：已注册标签数量、未注册标签数量、实例总数以及 Shadow DOM 内的元素数量。这些统计数据帮助开发者快速了解页面中 Web Components 的整体情况。例如，如果未注册标签数量较多，可能意味着某些组件库未正确加载或存在拼写错误。Shadow DOM 内的元素计数则有助于评估组件封装的复杂度。
智能过滤功能
支持按注册状态进行过滤，可以选择只显示已注册的元素或只显示未注册的元素。还可以通过标签名搜索框进行模糊匹配，快速定位到目标组件。过滤功能与实时监听协同工作，即使在动态变化的页面中也能保持准确的过滤结果。这大大提升了大型项目中查找特定组件的效率。
详细信息表格
以结构化表格展示每个自定义元素的完整信息，包括：标签名称、注册状态（已注册/未注册）、构造函数名称、继承自哪个基类（如 HTMLElement、HTMLButtonElement 等）、页面中的实例数量以及该元素通过 observedAttributes 监听的属性列表。表格支持排序和搜索，方便开发者按需查看特定字段的详细数据。