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

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

示例扩展

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Firefox for Android
Safari on iOS
panels
Button
ElementsPanel
ElementsPanel.createSidebarPane
ElementsPanel.onSelectionChanged
ExtensionPanel
ExtensionPanel.createStatusBarButton
ExtensionPanel.onHidden
ExtensionPanel.onSearch
ExtensionPanel.onShown
SourcesPanel
SourcesPanel.createSidebarPane
SourcesPanel.onSelectionChanged
create
create.iconPath
create.pagePath
create.title
elements
onThemeChanged
openResource
openResource.columnNumber
openResource.lineNumber
openResource.url
setOpenResourceHandler
sources
themeName

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

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