Web 组件和 Web 组件库的开发人员工具
Web 组件和 Web 组件库的开发人员工具
Web Component DevTools 面向所有使用 Web 组件的开发人员。提供的工具创建了一个新的 Chrome Devtools 面板，允许快速查看当前页面上的自定义元素，并允许修改所述组件的属性和属性。
Web 组件开发工具利用自定义元素清单 (https://github.com/webcomponents/custom-elements-manifest) 来分析 Web 组件。
特征：
Web Component DevTools 直接从浏览器的 UI 向开发人员提供高级功能，例如：
- 列出页面上的自定义元素以及页面内可访问的 iframe
- 过滤列表中的自定义元素
- 检查和修改自定义元素的属性
- 检查和修改自定义元素的属性（甚至对象和数组）
- 观察派发的事件
- 调用自定义元素的函数，并记录返回值
- 查看页面Web组件的源代码
- 通过控制台直接与Web组件交互
为什么？
在开发 Web 组件的过程中，无论是使用 Lit 这样的库，还是不使用任何类型的库，有时您可能希望对组件有比常规浏览器开发工具提供的更多控制权。
例如，您可能想要：
切换元素的属性
切换元素的属性
监视何时从元素分派事件
通话功能
当您使用 Web 组件时，Shadow DOM 通常会出现，这使得找到元素的路径相当困难。即使您获得了路径，每次要修改值时也必须编写 document.querySelector("my-selector-string > element-name").setAttribute("my-attr", "foo")麻烦。
对于此用例，创建了 Web 组件 DevTools：为了使开发人员能够通过单击按钮直接从 devtools 窗口轻松修改其元素的属性、属性及其状态。
问题：
使用 DevTools 时遇到的任何问题都应提交到 GitHub 存储库 (https://github.com/Matsuuu/web-component-devtools/issues)。
Web Component DevTools插件谷歌浏览器安装教程
第一步：下载Web Component DevTools安装扩展
第二步：下载下来的扩展解压到你想放的文件夹里
比如我解压到extend文件夹
打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；
再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”
点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。
第三步：把crx后缀改为zip，再进行解压
如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：
找到文件夹顶部，点击查看
点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可
这样你就能看到解压好的扩展名：.crx
解压的扩展名为.crx
把.crx改为：zip
然后再用解压工具再解压一遍，即可得到扩展的全部文件
然后再谷歌浏览器插件页面选择：加载已解压的扩展程序
这样就安装成功了
友情提醒：
其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！
