除了 Microsoft Edge DevTools 中提供的工具外,还可以通过安装 Microsoft Edge 扩展来添加新工具,或者为特定用例生成自己的扩展。 Microsoft Edge 扩展通常使用新的按钮和面板扩展 Microsoft Edge 用户界面,但也可以通过 在活动栏中添加新的工具选项卡,在 Microsoft Edge 中扩展 DevTools。
查找扩展 DevTools 的扩展
Microsoft Edge 加载项中的开发人员工具类别包含通常扩展 DevTools 的扩展。
没有办法知道扩展是否扩展了 DevTools 活动栏,而不运行它或查看其源代码,但Microsoft Edge 加载项中的开发人员工具类别是一个好看的地方。
在 DevTools 中安装扩展
若要安装扩展 DevTools 的 Microsoft Edge 扩展,请执行以下作:
转到Microsoft Edge 加载项(如开发人员工具类别),并转到要安装的扩展。
例如,转到 React 开发人员工具扩展,这是用于以下步骤的示例:
单击“ 获取 ”按钮。 将打开安装对话框,“将扩展名称>添加到 <Microsoft Edge?
单击“ 添加扩展 ”按钮。 一个对话框指示扩展已安装,“扩展 (
) 按钮现在列出了该扩展。打开新的选项卡或窗口,然后转到包含与 DevTools 扩展相关的内容的页面。 例如,使用 TodoMVC React示例页,或转到实时Microsoft Edge 演示存储库页,例如演示待办事项。
打开 DevTools,例如按 F12。 对于此React扩展,将在活动栏中打开两个新选项卡:组件和探查器:
如果 活动栏上未显示新选项卡,请扩大 DevTools,或单击“ 更多工具 (
) 按钮,然后选择该工具:
创建 DevTools 扩展
可以创建自己的 DevTools 扩展,以在 DevTools 活动栏中添加新选项卡,并与检查的页面进行交互。
请参阅 创建 DevTools 扩展。