Chrome 中的 Web 组件 DevTools 与 OffiDocs

描述：

使用 OffiDocs Chromium 在线运行 Chrome 在线网络商店扩展 Web Component DevTools。

Web 组件和 Web 组件库的开发人员工具 Web 组件 DevTools 面向所有使用 Web 组件的开发人员。

提供的工具创建了一个新的 Chrome Devtools 面板，允许快速查看当前页面上的自定义元素，并允许修改所述组件的属性和属性。

Web Component DevTools 利用自定义元素清单 (https://github.com/CustomElementsManifest)。

com/webcomponents/custom-elements-manifest）来分析 Web 组件。

功能：Web Component DevTools 直接从浏览器的 UI 向开发人员提供高级功能，例如： - 列出页面上的自定义元素以及页面内可访问的 iframe - 过滤列表上的自定义元素 - 检查和修改自定义元素 - 检查和修改自定义元素的属性（甚至对象和数组） - 观察调度的事件 - 调用自定义元素的函数，并记录返回值 - 在页面上查看 Web 组件的源代码 - 直接与 Web 组件交互通过控制台 为什么？ 在开发 Web 组件的过程中，无论是使用 Lit 这样的库，还是不使用任何类型的库，有时您可能希望对组件有比常规浏览器开发工具提供的更多控制权。

例如，您可能想要： 切换元素的属性 切换元素的属性 监视从元素分派事件的时间 调用函数 当您使用 Web 组件时，Shadow DOM 通常会出现，这使得它相当困难找到元素的路径。

即使你得到了路径，也必须写文档。

querySelector("我的选择器字符串 > 元素名称").

每次要修改一个值时 setAttribute("my-attr", "foo") 是相当麻烦的。

对于此用例，创建了 Web 组件 DevTools：为了使开发人员能够通过单击按钮直接从 devtools 窗口轻松修改其元素的属性、属性及其状态。

问题：使用 DevTools 时遇到的任何问题都应提交到 GitHub 存储库 (https://github.com/DevTools/DevTools)。

com/Matsuuu/web-component-devtools/issues）。

附加信息：

- 由 Matsuuu 提供
- 平均评分：5 星（很喜欢）
-开发人员 此邮件地址受spam bots保护。 您必须启用JavaScript才能查看。

Web Component DevTools Web 扩展与 OffiDocs Chromium 在线集成