devtools.panels.ElementsPanel.createSidebarPane()

在 HTML/CSS 检查器中添加一个新的侧边栏面板。

HTML/CSS 检查器（在 Firefox 中称为 页面检查器，在 Chrome 中称为 元素面板）在其窗口的主体部分显示页面 DOM，并有一个侧边栏，该侧边栏以选项卡界面显示页面 HTML/CSS 的各种其他方面。例如，在 Firefox 中，侧边栏可以显示所选元素的 CSS 规则、其字体或其盒模型。

createSidebarPane() 函数向侧边栏添加一个新的面板。例如，下面的屏幕截图显示了一个名为“我的面板”的新面板，该面板显示了一个 JSON 对象

Image showing a new pane titled "My pane", that displays a JSON object

此函数接受一个参数，该参数是一个表示面板标题的字符串。它返回一个 Promise，该 Promise 解析为一个 ExtensionSidebarPane 对象，表示新面板。您可以使用该对象来定义面板的内容和行为。

语法

js
let creating = browser.devtools.panels.elements.createSidebarPane(
  title       // string
)

参数

title

string。面板的标题。这将出现在侧边栏顶部的选项卡行中，并且是用户识别面板的主要方式。

返回值

一个 Promise，它将使用一个 ExtensionSidebarPane 对象来完成，该对象表示新面板。

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

示例

创建一个新面板，并使用 JSON 对象填充它。您可以在扩展的 devtools 页面 加载的脚本中运行此代码。

js
function onCreated(sidebarPane) {
  sidebarPane.setObject({
    someBool: true,
    someString: "hello there",
    someObject: {
      someNumber: 42,
      someOtherString: "this is my pane's content",
    },
  });
}

browser.devtools.panels.elements.createSidebarPane("My pane").then(onCreated);

注意：此 API 基于 Chromium 的 chrome.devtools.panels API。