このAPI は Chrome devtools APIs に基づいていますが、Firefoxでは実装されていない多くの機能があり、よってここに文書化されていません。現在欠けている機能を見るには、 Limitations of the devtools APIs を見てください。

devtools.panels API によって開発ツール拡張機能では開発ツールウィンドウ内のユーザーインターフェイスの定義ができます。

開発ツールウィンドウにはいくつもの個別のツールがあります - JavaScript デバッガー、ネットワークモニター、などが。最上位のタブの行でユーザーは色々なツールを切り替えられます。ツールのUIをホストするこのウィンドウは「パネル」と呼ばれます。

devtools.panels API にて開発ツールウィンドウ内の新規パネルを作成できます。

すべての devtools API と同様に、この API はmanifest.json devtools_page キー内に定義されたドキュメントや、拡張機能が作成するその他の開発ツールドキュメント(例えばパネル自身のドキュメント)の中だけでコードを利用できます。これ以上は 開発ツールを拡張するを見てください。

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
開発ツールテーマが変更された時に発火する

ブラウザ実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxOperaAndroid 版 Firefox
ElementsPanel.createSidebarPaneChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 57Opera 完全対応 ありFirefox Android 未対応 なし
ElementsPanel.onSelectionChangedChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 56Opera 完全対応 ありFirefox Android 未対応 なし
ExtensionPanel.onHiddenChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 54Opera 完全対応 ありFirefox Android 未対応 なし
ExtensionPanel.onSearchChrome 完全対応 ありEdge 未対応 なしFirefox 未対応 なしOpera 完全対応 ありFirefox Android 未対応 なし
ExtensionPanel.onShownChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 54Opera 完全対応 ありFirefox Android 未対応 なし
ExtensionSidebarPane.onHiddenChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 57
補足
完全対応 57
補足
補足 This event is only fired when the user switches between sidebar panes, not when the user switches between devtools panels. See bug 1412317.
Opera 完全対応 ありFirefox Android 未対応 なし
ExtensionSidebarPane.onShownChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 57
補足
完全対応 57
補足
補足 This event is only fired when the user switches between sidebar panes, not when the user switches between devtools panels. See bug 1412317.
Opera 完全対応 ありFirefox Android 未対応 なし
ExtensionSidebarPane.setExpressionChrome 完全対応 あり
補足
完全対応 あり
補足
補足 The expression must evaluate to a JavaScript object or a DOM node, or nothing is shown in the sidebar.
Edge 未対応 なしFirefox 完全対応 57
補足
完全対応 57
補足
補足 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 完全対応 ありFirefox Android 未対応 なし
ExtensionSidebarPane.setObjectChrome 完全対応 あり
補足
完全対応 あり
補足
補足 If the jsonObject parameter is a string, it is not displayed.
Edge 未対応 なしFirefox 完全対応 57
補足
完全対応 57
補足
補足 If the jsonObject is a string, then rootTitle must also be given, or jsonObject will not be displayed. See bug 1412310.
Opera 完全対応 ありFirefox Android 未対応 なし
createChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 54Opera 完全対応 ありFirefox Android 未対応 なし
elementsChrome 完全対応 ありEdge 未対応 なしFirefox 完全対応 56Opera 完全対応 ありFirefox Android 未対応 なし
onThemeChangedChrome 未対応 なしEdge 未対応 なしFirefox 完全対応 55Opera 未対応 なしFirefox Android 未対応 なし
themeNameChrome 完全対応 54Edge 未対応 なしFirefox 完全対応 55Opera 完全対応 41Firefox Android 未対応 なし

凡例

完全対応  
完全対応
未対応  
未対応
実装ノートを参照してください。
実装ノートを参照してください。

謝辞

この API は Chromium の chrome.devtools.panels API に基づいています。

Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。

 

ドキュメントのタグと貢献者

このページの貢献者: Uemmra3
最終更新者: Uemmra3,