We're looking for a person or people to help audit MDN to find places we could speed up. Is this you or someone you know? Check out the RFP: https://mzl.la/2IHcMiE

Наши волонтёры ещё не перевели данную статью на Русский. Присоединяйтесь к нам и помогите сделать эту работу!
Вы можете также прочитать эту статью на English (US).

This feature is available since Firefox 54.

When an extension provides tools that are of use to developers, it's possible to add a UI for them to the browser's developer tools as a new panel.

Simple example showing the addition of "My panel" to the Developer Tools tabs.

Specifying a developer tools panel

A developer tools panel is added using the devtools.panels API, which in turn needs to be run from a special devtools page.

Add the devtools page by including the devtools_page key in extension's manifest.json and provide the location of the page's HTML file in the extension:

"devtools_page": "devtools-page.html"

From the devtools page, call a script that will add the devtools panel:

  <script src="devtools.js"></script>

In the script, create the devtools panel by specifying the panel's title, icon, and HTML file that provides the panel's content:

function handleShown() {
  console.log("panel is being shown");

function handleHidden() {
  console.log("panel is being hidden");

  "My Panel",           // title
  "icons/star.png",           // icon
  "devtools/panel/panel.html"          // content
).then((newPanel) => {

The extension can now run code in the inspected window using devtools.inspectedWindow.eval() or by injecting a content script via the background script by passing a message. You can find more details on how to do this in Extending the developer tools.

Developer panel design

For details on how to design your developer panel's web page to match the style of Firefox, see the Photon Design System documentation.


For details on how to create icons to use with your developer tools panel, see Iconography in the Photon Design System documentation.


The webextensions-examples repository on GitHub includes the devtools-panels example which implements a devtools panel.

Метки документа и участники

 Внесли вклад в эту страницу: rebloor, ntim, hellosct1, andrewtruongmoz
 Обновлялась последний раз: rebloor,