devtools

Enables extensions to interact with the browser's Developer Tools. You use this API to create Developer Tools pages, interact with the window that is being inspected, inspect the page network usage.

To use this API, you must specify the devtools_page manifest key. The use of this manifest key triggers an install-time permission warning about devtools. To avoid an install-time permission warning, mark the feature as optional by listing the "devtools" permission in the optional_permissions manifest key.

Note: The "devtools" optional permission is only supported by Firefox and not Chrome (Chromium issue 1143015).

Properties

devtools.inspectedWindow: Interact with the window that Developer tools are attached to (inspected window). This includes obtaining the tab ID for the inspected page, evaluate the code in the context of the inspected window, reload the page, or obtain the list of resources within the page.
devtools.network: Obtain information about network requests associated with the window that the Developer Tools are attached to (the inspected window).
devtools.panels: Create User Interface panels that will be displayed inside User Agent Developer Tools.

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Firefox for Android
Safari on iOS
devtools
inspectedWindow
inspectedWindow.Resource
Resource.getContent
Resource.setContent
Resource.url
inspectedWindow.eval
eval.$0
eval.expression
eval.inspect
eval.options
options.contextSecurityOrigin
options.frameURL
options.scriptExecutionContext
options.useContentScriptContext
inspectedWindow.getResources
inspectedWindow.onResourceAdded
inspectedWindow.onResourceContentCommitted
inspectedWindow.reload
inspectedWindow.tabId
network
network.getHAR
network.onNavigated
network.onRequestFinished
panels
panels.Button
panels.ElementsPanel
ElementsPanel.createSidebarPane
ElementsPanel.onSelectionChanged
panels.ExtensionPanel
ExtensionPanel.createStatusBarButton
ExtensionPanel.onHidden
ExtensionPanel.onSearch
ExtensionPanel.onShown
panels.SourcesPanel
SourcesPanel.createSidebarPane
SourcesPanel.onSelectionChanged
panels.create
create.iconPath
create.pagePath
create.title
panels.elements
panels.onThemeChanged
panels.openResource
openResource.columnNumber
openResource.lineNumber
openResource.url
panels.setOpenResourceHandler
panels.sources
panels.themeName

Note: This API is based on Chromium's chrome.devtools API.

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Firefox for Android	Safari on iOS
`devtools`
`inspectedWindow`
`inspectedWindow.Resource`
`Resource.getContent`
`Resource.setContent`
`Resource.url`
`inspectedWindow.eval`
`eval.$0`
`eval.expression`
`eval.inspect`
`eval.options`
`options.contextSecurityOrigin`
`options.frameURL`
`options.scriptExecutionContext`
`options.useContentScriptContext`
`inspectedWindow.getResources`
`inspectedWindow.onResourceAdded`
`inspectedWindow.onResourceContentCommitted`
`inspectedWindow.reload`
`inspectedWindow.tabId`
`network`
`network.getHAR`
`network.onNavigated`
`network.onRequestFinished`
`panels`
`panels.Button`
`panels.ElementsPanel`
`ElementsPanel.createSidebarPane`
`ElementsPanel.onSelectionChanged`
`panels.ExtensionPanel`
`ExtensionPanel.createStatusBarButton`
`ExtensionPanel.onHidden`
`ExtensionPanel.onSearch`
`ExtensionPanel.onShown`
`panels.SourcesPanel`
`SourcesPanel.createSidebarPane`
`SourcesPanel.onSelectionChanged`
`panels.create`
`create.iconPath`
`create.pagePath`
`create.title`
`panels.elements`
`panels.onThemeChanged`
`panels.openResource`
`openResource.columnNumber`
`openResource.lineNumber`
`openResource.url`
`panels.setOpenResourceHandler`
`panels.sources`
`panels.themeName`