devtools.panels

メモ: この 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

開発ツールテーマが変更された時に発火する

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Firefox for Android
Safari on iOS
panels
Button
ElementsPanel
ElementsPanel.createSidebarPane
ElementsPanel.onSelectionChanged
ExtensionPanel
ExtensionPanel.createStatusBarButton
ExtensionPanel.onHidden
ExtensionPanel.onSearch
ExtensionPanel.onShown
SourcesPanel
SourcesPanel.createSidebarPane
SourcesPanel.onSelectionChanged
create
create.iconPath
create.pagePath
create.title
elements
onThemeChanged
openResource
openResource.columnNumber
openResource.lineNumber
openResource.url
setOpenResourceHandler
sources
themeName

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
See implementation notes.
Uses a non-standard name.
Has more compatibility info.

Example extensions

メモ: この API は Chromium の chrome.devtools.panels API に基づいています。Microsoft Edge での実装状況は Microsoft Corporation から提供されたものであり、ここでは Creative Commons Attribution 3.0 United States License に従っています。