devtools.panels

备注:尽管这些 API 基于 Chrome devtools API,但 Firefox 中仍有许多特性尚未实现,因此这里未记录。要查看当前缺少哪些特性,请参阅 devtools API 的局限性

devtools.panels API 允许 devtools 扩展在 devtools 窗口内定义其用户界面。

devtools 窗口托管了多个独立的工具——JavaScript 调试器、网络监视器等。顶部的一排标签让用户可以在不同的工具之间切换。每个工具用户界面的窗口称为“面板”。

使用 devtools.panels API,你可以在开发者工具窗口中创建新的面板。

像所有 devtools API 一样,只有在 devtools_page manifest.json 键定义的文档中运行的代码,或扩展创建的其他开发者工具文档(如扩展创建的面板托管的文档)才能使用这个 API。有关更多信息,请参见扩展开发者工具

类型

devtools.panels.ElementsPanel

表示浏览器开发者工具中的 HTML/CSS 检查器。

devtools.panels.ExtensionPanel

表示由扩展创建的开发者工具面板。

devtools.panels.ExtensionSidebarPane

表示扩展添加到浏览器开发者工具中 HTML/CSS 检查器的窗格。

属性

devtools.panels.elements

ElementsPanel 对象的引用。

devtools.panels.themeName

当前开发者工具主题的名称。

函数

devtools.panels.create()

创建一个新的开发者工具面板。

事件

devtools.panels.onThemeChanged

当开发者工具主题更改时触发。

示例扩展

浏览器兼容性

BCD tables only load in the browser

备注:此 API 基于 Chromium 的 chrome.devtools.panels API。