devtools.panels

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

	Desktop				Mobile
	Chrome	Edge	Firefox	Opera	Firefox for Android
`ElementsPanel.createSidebarPane`	Chrome Full support Yes	Edge No support No	Firefox Full support 57	Opera Full support Yes	Firefox Android No support No
`ElementsPanel.onSelectionChanged`	Chrome Full support Yes	Edge No support No	Firefox Full support 56	Opera Full support Yes	Firefox Android No support No
`ExtensionPanel.onHidden`	Chrome Full support Yes	Edge No support No	Firefox Full support 54	Opera Full support Yes	Firefox Android No support No
`ExtensionPanel.onSearch`	Chrome Full support Yes	Edge No support No	Firefox No support No	Opera Full support Yes	Firefox Android No support No
`ExtensionPanel.onShown`	Chrome Full support Yes	Edge No support No	Firefox Full support 54	Opera Full support Yes	Firefox Android No support No
`ExtensionSidebarPane.onHidden`	Chrome Full support Yes	Edge No support No	Firefox 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 Yes	Firefox Android No support No
`ExtensionSidebarPane.onShown`	Chrome Full support Yes	Edge No support No	Firefox 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 Yes	Firefox Android No support No
`ExtensionSidebarPane.setExpression`	Chrome 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 No	Firefox 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 Yes	Firefox Android No support No
`ExtensionSidebarPane.setObject`	Chrome Full support Yes Notes Full support Yes Notes Notes If the `jsonObject` parameter is a string, it is not displayed.	Edge No support No	Firefox 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 Yes	Firefox Android No support No
`create`	Chrome Full support Yes	Edge No support No	Firefox Full support 54	Opera Full support Yes	Firefox Android No support No
`elements`	Chrome Full support Yes	Edge No support No	Firefox Full support 56	Opera Full support Yes	Firefox Android No support No
`onThemeChanged`	Chrome No support No	Edge No support No	Firefox Full support 55	Opera No support No	Firefox Android No support No
`themeName`	Chrome Full support 54	Edge No support No	Firefox Full support 55	Opera Full support 41	Firefox 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.

// Copyright 2015 The Chromium Authors. All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are
// met:
//
//    * Redistributions of source code must retain the above copyright
// notice, this list of conditions and the following disclaimer.
//    * Redistributions in binary form must reproduce the above
// copyright notice, this list of conditions and the following disclaimer
// in the documentation and/or other materials provided with the
// distribution.
//    * Neither the name of Google Inc. nor the names of its
// contributors may be used to endorse or promote products derived from
// this software without specific prior written permission.
//
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
// "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
// LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
// A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
// OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
// SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
// LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
// DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
// THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
// (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.