Web 组件开发工具位于 Chrome 使用 OffiDocs
Ad
商品描述
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 组件 DevTools web extension 与 OffiDocs 集成 Chromium 在线