“通过棱镜”检查发光或聚合物网络组件。通过 Chrome DevTools 即时查看和修改组件属性。
Lit Prism — DevTools 的 Web 组件属性检查器
Chrome DevTools 扩展程序将专用侧边栏面板添加到 Elements 选项卡，用于实时检查和编辑 Lit 和 Polymer Web 组件属性。
──────────────────────────────────────────
特征
──────────────────────────────────────────
实时财产面板
查看所选自定义元素的所有反应属性，每秒自动更新。当值未更改时，工具栏中的脉冲刷新指示器会变成绿色，而当检测到更改时，工具栏中的脉冲刷新指示器会变成红色，因此您始终知道组件的状态何时发生变化。
内联编辑
单击任何原始值即可就地编辑它。新值会立即提交回元素，因此您可以测试状态更改而无需触摸源代码。
更换闪光灯
自上次刷新以来值发生变化的行会短暂地以蓝色突出显示，使实时状态更改一目了然。
属性过滤器
实时搜索输入会隐藏其键与键入的术语不匹配的属性 - 对于具有许多反应性属性的组件非常有用。
属性固定
将各个属性固定到面板顶部的持久部分。无论活动过滤器如何，固定行始终可见，并在每次刷新时更新。
上下文菜单
右键单击任何属性行以进行快速操作：
• 复制值
• 复制路径
• 固定到顶部
• 全部展开/全部折叠
• 全部复制为 JSON
全部复制为 JSON
单击 {} 工具栏按钮即可将完整属性快照复制到剪贴板。
构造函数头
组件的类名称和自定义元素标记名称显示在面板顶部，因此您始终知道正在检查的内容。
跳转至源代码
→ src 按钮尝试使用三层策略直接在 DevTools Sources 面板中打开组件的源文件：
1. //#脚本上的sourceURL注释
2. URL命名约定（资源URL中的标签名或kebab类名）
3. 并行内容扫描所有加载的 JS 文件 — 涵盖未缩小的 (class ClassName {) 和缩小的 Lit 输出
扩展状态保护
打开的树节点会在自动刷新时被记住，因此属性树在值更新时保持稳定。
智能排序
属性按 $ 前缀 → 普通键 → _ 前缀 → __ 前缀排序，将公共反应状态保持在顶部，将内部/私有字段保持在底部。
方法分组
组件方法收集在 _FUNCTIONS 键下，因此它们不会污染属性列表。
循环参考处理
基于 WeakSet 的循环检测器仅将精确的反向引用标记为 [Circular]，从而保留所有非循环分支的完整深度。 20 级的[太深]上限可以防止 DOM 节点引用或深层嵌套树引起的内存不足错误。
装载指示器
当选择不同的元素时，会立即出现脉冲状的“正在加载...”消息，因此面板永远不会默默地显示过时的数据。
──────────────────────────────────────────
支持的框架
──────────────────────────────────────────
• 点亮 v1、v2、v3
• 聚合物 v2、v3
• 其他自定义元素——列出了自己的和原型的可枚举属性
──────────────────────────────────────────
如何使用
──────────────────────────────────────────
1. 打开 DevTools 并切换到 Elements 面板。
2. 选择 Lit Prism 侧栏选项卡。
3. 单击元素树中的任意自定义元素 — 其属性立即显示。
4. 使用过滤器输入按名称缩小属性范围。
5. 单击任意原始值以进行内联编辑。
6. 右键单击一行以执行其他操作（复制、固定、展开）。
7. 使用扩展弹出窗口打开或关闭自动刷新。
──────────────────────────────────────────
权限
──────────────────────────────────────────
存储 — 通过 chrome.storage.sync 保留您的自动刷新切换首选项。
主机权限 (<all_urls>) — 跳转到源内容扫描所需，该扫描会获取加载的 JS 资源以定位组件类定义。
──────────────────────────────────────────
隐私
──────────────────────────────────────────
Lit Prism 不收集、传输或存储任何用户数据。所有检查都在浏览器的 DevTools 会话中本地进行。此扩展或其任何未来版本不会向任何外部服务器发出遥测、分析或网络请求。
──────────────────────────────────────────
变更日志亮点
──────────────────────────────────────────
v1.3 — 主要 UI 重写：具有每行 DOM 更新的自定义渲染引擎（无完全重新渲染）、内联编辑、上下文菜单、属性固定、更改 Flash 动画、跳转到源、属性过滤器、构造函数头、展开状态保存、自定义排序顺序、刷新指示器、加载指示器、改进的循环引用处理。
v1.2 — 通过 elementProperties 添加了 Lit v2/v3 支持；方法现在分组在 _FUNCTIONS 下；自动刷新间隔设置为 1 秒。
v1.1 - 改进的字符串化策略：非循环属性的全深度，仅在检测到循环引用时按属性回退；修复了无条件深度限制 stringify 导致的高 CPU 使用率；现在明确显示未定义的值。
v1.0 — 初始版本：元素面板侧边栏、带切换的自动刷新、Lit v1 支持、Polymer 静态属性支持。
──────────────────────────────────────────
开源和许可
──────────────────────────────────────────
麻省理工学院许可。欢迎贡献。
