Although the APIs are based on the Chrome devtools APIs, there are still many features that are not yet implemented in Firefox, and therefore are not documented here. To see which features are currently missing please see Limitations of the devtools APIs.

The devtools.panels API lets a devtools extension define its user interface inside the devtools window.

The devtools window hosts a number of separate tools - the JavaScript Debugger, Network Monitor, and so on. A row of tabs across the top lets the user switch between the different tools. The window hosting each tool's user interface is called a "panel".

With the devtools.panels API you can create new panels in the devtools window.

Like all the devtools APIs, this API is only available to code running in the document defined in the devtools_page manifest.json key, or in other devtools documents created by the extension (such as the panel's own document). See Extending the developer tools for more.

Types

devtools.panels.ElementsPanel
Represents the HTML/CSS inspector in the browser's devtools.
devtools.panels.ExtensionPanel
Represents a devtools panel created by the extension.
devtools.panels.ExtensionSidebarPane
Represents a pane that an extension has added to the HTML/CSS inspector in the browser's devtools.

Properties

devtools.panels.elements
A reference to an ElementsPanel object.
devtools.panels.themeName
The name of the current devtools theme.

Functions

devtools.panels.create()
Creates a new devtools panel.

Events

devtools.panels.onThemeChanged
Fired when the devtools theme changes.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxOperaFirefox for Android
ElementsPanel.createSidebarPaneChrome Full support YesEdge No support NoFirefox Full support 57Opera Full support YesFirefox Android No support No
ElementsPanel.onSelectionChangedChrome Full support YesEdge No support NoFirefox Full support 56Opera Full support YesFirefox Android No support No
ExtensionPanel.onHiddenChrome Full support YesEdge No support NoFirefox Full support 54Opera Full support YesFirefox Android No support No
ExtensionPanel.onSearchChrome Full support YesEdge No support NoFirefox No support NoOpera Full support YesFirefox Android No support No
ExtensionPanel.onShownChrome Full support YesEdge No support NoFirefox Full support 54Opera Full support YesFirefox Android No support No
ExtensionSidebarPane.onHiddenChrome Full support YesEdge No support NoFirefox Full support 57
Notes
Full support 57
Notes
Notes This event is only fired when the user switches between sidebar panes, not when the user switches between devtools panels. See bug 1412317.
Opera Full support YesFirefox Android No support No
ExtensionSidebarPane.onShownChrome Full support YesEdge No support NoFirefox Full support 57
Notes
Full support 57
Notes
Notes This event is only fired when the user switches between sidebar panes, not when the user switches between devtools panels. See bug 1412317.
Opera Full support YesFirefox Android No support No
ExtensionSidebarPane.setExpressionChrome Full support Yes
Notes
Full support Yes
Notes
Notes The expression must evaluate to a JavaScript object or a DOM node, or nothing is shown in the sidebar.
Edge No support NoFirefox Full support 57
Notes
Full support 57
Notes
Notes The expression must evaluate to an object that can be serialized to JSON, or nothing is shown in the sidebar. In particular, JavaScript cyclic objects and DOM nodes are not supported. See bug 1403130.
Opera Full support YesFirefox Android No support No
ExtensionSidebarPane.setObjectChrome Full support Yes
Notes
Full support Yes
Notes
Notes If the jsonObject parameter is a string, it is not displayed.
Edge No support NoFirefox Full support 57
Notes
Full support 57
Notes
Notes If the jsonObject is a string, then rootTitle must also be given, or jsonObject will not be displayed. See bug 1412310.
Opera Full support YesFirefox Android No support No
createChrome Full support YesEdge No support NoFirefox Full support 54Opera Full support YesFirefox Android No support No
elementsChrome Full support YesEdge No support NoFirefox Full support 56Opera Full support YesFirefox Android No support No
onThemeChangedChrome No support NoEdge No support NoFirefox Full support 55Opera No support NoFirefox Android No support No
themeNameChrome Full support 54Edge No support NoFirefox Full support 55Opera Full support 41Firefox Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.

Acknowledgements

This API is based on Chromium's chrome.devtools.panels API.

Microsoft Edge compatibility data is supplied by Microsoft Corporation and is included here under the Creative Commons Attribution 3.0 United States License.

Document Tags and Contributors

Contributors to this page: wbamberg, andrewtruongmoz
Last updated by: wbamberg,