Lit Prism

通过“棱镜”检查 Lit 或 Polymer Web 组件。在 Chrome 开发者工具中即时查看和修改组件属性。 Lit Prism — 开发者工具中的 Web 组件属性检查器 这是一款 Chrome 开发者工具扩展程序，可在“元素”标签页中添加专用侧边栏面板，实时检查和编辑 Lit 与 Polymer Web 组件的属性。 ──────────────────────────────────────── 功能 ──────────────────────────────────────── 实时属性面板 查看所选自定义元素的所有响应式属性，属性每秒自动更新。工具栏中的脉动刷新指示器在值未变化时显示绿色，检测到变化时显示红色，让您随时了解组件状态是否发生变化。 内联编辑 点击任意原始类型的值即可直接编辑。新值会立即写回元素，无需修改源代码即可测试状态变化。 变化闪显 自上次刷新以来值发生变化的行会短暂显示蓝色高亮，让实时状态变化一目了然。 属性筛选 实时搜索框会隐藏键名与输入内容不匹配的属性，适用于包含大量响应式属性的组件。 属性置顶 将单个属性固定到面板顶部的持久区域。置顶行始终可见，不受当前筛选条件影响，并在每次刷新时更新。 右键菜单 右键点击任意属性行可使用快捷操作： • 复制值 • 复制路径 • 置顶 • 全部展开／全部折叠 • 将全部内容复制为 JSON 将全部内容复制为 JSON 点击工具栏中的 {} 按钮，即可将完整的属性快照复制到剪贴板。 构造函数标题 面板顶部显示组件的类名和自定义元素标签名，让您始终知道正在检查什么。 跳转至源代码 → src 按钮使用三级策略，尝试直接在开发者工具的“源代码”面板中打开组件源文件： 1. 脚本中的 //# sourceURL 注释 2. URL 命名约定（资源 URL 中的标签名或短横线分隔的类名） 3. 并行扫描所有已加载 JS 文件的内容，涵盖未压缩代码（class ClassName {）和压缩后的 Lit 输出 保留展开状态 自动刷新时会记住已展开的树节点，因此下方的值更新时，属性树仍保持稳定。 智能排序 属性按 $ 前缀 → 普通键 → _ 前缀 → __ 前缀排序，将公共响应式状态放在顶部，内部／私有字段放在底部。 方法分组 组件方法统一收集在 _FUNCTIONS 键下，避免混入属性列表。 循环引用处理 基于 WeakSet 的循环检测器只将确切的回溯引用标记为 [Circular]，保留所有非循环分支的完整深度。20 层深度上限会显示 [Too deep]，防止 DOM 节点引用或深层嵌套树导致内存耗尽。 加载指示器 选择其他元素时，立即显示脉动的“Loading…”消息，避免面板悄然显示过期数据。 ──────────────────────────────────────── 支持的框架 ──────────────────────────────────────── • Lit v1、v2、v3 • Polymer v2、v3 • 其他自定义元素：列出自身和原型上的可枚举属性 ──────────────────────────────────────── 使用方法 ──────────────────────────────────────── 1. 打开开发者工具并切换到“元素”面板。 2. 选择 Lit Prism 侧边栏标签页。 3. 在元素树中点击任意自定义元素，其属性会立即显示。 4. 使用筛选输入框按名称缩小属性范围。 5. 点击任意原始类型的值进行内联编辑。 6. 右键点击某一行以使用其他操作（复制、置顶、展开）。 7. 使用扩展程序弹出窗口开启或关闭自动刷新。 ──────────────────────────────────────── 权限 ──────────────────────────────────────── storage — 通过 chrome.storage.sync 保存您的自动刷新开关偏好。 主机权限（<all_urls>）— 跳转至源代码的内容扫描需要此权限，以获取已加载的 JS 资源并定位组件类定义。 ──────────────────────────────────────── 隐私 ──────────────────────────────────────── Lit Prism 不会收集、传输或存储任何用户数据。所有检查均在您浏览器的开发者工具会话中本地完成。本扩展程序及其任何未来版本均不会向任何外部服务器发送遥测、分析数据或网络请求。 ──────────────────────────────────────── 更新日志摘要 ──────────────────────────────────────── v1.3 — 大幅重写界面：采用自定义渲染引擎逐行更新 DOM（不进行完整重新渲染），新增内联编辑、右键菜单、属性置顶、变化闪显动画、跳转至源代码、属性筛选、构造函数标题、展开状态保留、自定义排序、刷新指示器和加载指示器，并改进循环引用处理。 v1.2 — 通过 elementProperties 增加对 Lit v2/v3 的支持；方法现在归入 _FUNCTIONS；自动刷新间隔设为 1 秒。 v1.1 — 改进字符串化策略：对非循环属性保留完整深度，仅在检测到循环引用时对对应属性使用回退方案；修复无条件限制深度的字符串化导致 CPU 占用过高的问题；现在明确显示 undefined 值。 v1.0 — 首次发布：元素面板侧边栏、可切换的自动刷新、Lit v1 支持及 Polymer 静态属性支持。 ──────────────────────────────────────── 开源与许可证 ──────────────────────────────────────── 采用 MIT 许可证。欢迎贡献。