path: root/files/fr/tools/devtoolsapi/index.html

---
title: DevTools API
slug: Outils/DevToolsAPI
translation_of: Tools/DevToolsAPI
---
<p>{{ToolsSidebar}}{{Obsolete_Header}}</p>

<div class="blockIndicator warning">
<p><strong>Warning:</strong>("L'API des outils de développement est en cours de développement. Si vous rencontrez des incohérences, merci de les signaler à l'équipe des outils de développement de Firefox.")</p>
</div>

<p>Bien que cette api soit toujours en développement, il existe des parties de <a href="https://developer.mozilla.org/fr/docs/Tools/Page_Inspector#Developer_API" title="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Developer_API">l'Inspecteur</a> et du <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger#Extending_Debugger_from_Addons" title="https://developer.mozilla.org/en-US/docs/Tools/Debugger#Extending_Debugger_from_Addons">Debogueur</a> qui sont d’ores et déjà utilisable.</p>



<h2 id="Introduction">Introduction</h2>

<p><span class="seoSummary">L'API des outils de développements fournit une manière d'enregistrer et d'accéder aux outils de développement dans Firefox.</span></p>

<p>En terme d'interface utilisateur, chaque outil enregistré existe dans son propre onglet (Appelé également panneau). Ces onglets sont situés dans une boîte appelée <strong>Boite à outils.</strong> Une boîte à outils peut être <em>hébergée</em> dans un navigateur (en bas ou sur le coté) ou peut être dans propre fenêtre (la boîte à outils est alors dite <em>détachée</em>). Une boîte à outils (et tous les outils qu'elle contient) est reliée à une <strong>Cible</strong> qui est l'objet que les outils sont en train de déboguer. Une cible le plus souvent une page web (un onglet), mais peut être autre chose, comme une fenêtre chrome un onglet distant.</p>

<p>En terme de code, chaque outil doit fournir un objet <strong>ToolDefinition</strong>. Une définition est un objet JS léger qui fournit différentes informations sur l'outil (par exemple son nom et son icône), ainsi qu'une méthode <em>build</em> qui sera utilisée plus tard pour lancer une instance de cet outil. L'objet global <strong> gDevTools</strong> fournit des méthodes pour enregistrer une définition d'outil et pour accéder aux instances d'outils. Une instance d'outil est appelée un <strong>ToolPanel</strong>. Le ToolPanel est construit seulement lorsque l'outil est sélectionné (non pas quand la boîte à outils est ouverte). Il n'y a aucun mayen de "fermer/détruire" un ToolPannel. La façon de fermer un ToolPanel est de fermer la boîte à outils qui le contient. Tous les objets sus-mentionnés implémentent l'interface<strong> EventEmitter</strong>.</p>

<h2 id="API">API</h2>

<h3 id="gDevTools">gDevTools</h3>

<p>The <code>gDevTools</code> API can be used to register new tools, themes and handle toolboxes for different tabs and windows. To use the <code>gDevTools</code> API from an add-on, it can be imported with following snippet</p>

<pre class="brush: js"><code>const { gDevTools } = require("resource:///modules/devtools/gDevTools.jsm");</code></pre>

<h4 id="Methods">Methods</h4>

<dl>
 <dt>
 <h5 id="registerTool(toolDefinition)"><code>registerTool(toolDefinition)</code></h5>
 </dt>
 <dd>Registers a new tool and adds a tab to each existing toolbox.</dd>
 <dd><strong>Parameters:</strong><br>
 <em><code>toolDefinition {ToolDefinition}</code></em> - An object that contains information about the tool. See {{anch("ToolDefinition")}} for details.</dd>
 <dt>
 <h5 id="unregisterTool(tool)"><code>unregisterTool(tool)</code></h5>
 </dt>
 <dd>Unregisters the given tool and removes it from all toolboxes.</dd>
 <dd><strong>Parameters:</strong><br>
 <em><code>tool {ToolDefinition|String}</code></em> - The tool definition object or the id of the tool to unregister.</dd>
 <dt>
 <h5 id="registerTheme(themeDefinition)"><code>registerTheme(themeDefinition)</code></h5>
 </dt>
 <dd>Registers a new theme.</dd>
 <dd><strong>Parameters:</strong><br>
 <em><code>themeDefinition {ThemeDefinition}</code></em> - An object that contains information about the theme.</dd>
 <dt>
 <h5 id="unregisterTheme(theme)"><code>unregisterTheme(theme)</code></h5>
 </dt>
 <dd>Unregisters the given theme.<br>
 <br>
 <strong>Parameters:</strong><br>
 <em><code>theme {ThemeDefinition|String}</code></em> - The theme definition object or the theme identifier.</dd>
 <dt>
 <h5 id="showToolbox(target_toolId_hostType_hostOptions)"><code>showToolbox(target [, toolId [, hostType [, hostOptions]]])</code></h5>
 </dt>
 <dd>Opens a toolbox for given target either by creating a new one or activating an existing one.</dd>
 <dd><strong>Parameters:</strong><br>
 <em><code>target {Target}</code></em> - The target the toolbox will debug.<br>
 <em><code>toolId {String}</code></em> - The tool that should be activated. If unspecified the previously active tool is shown.<br>
 <em><code>hostType {String}</code></em> - The position the toolbox will be placed. One of <code>bottom</code>, <code>side</code>, <code>window</code>, <code>custom</code>. See {{anch("HostType")}} for details.<br>
 <em><code>hostOptions {Object}</code></em> - An options object passed to the selected host. See {{anch("HostType")}} for details.</dd>
 <dd><strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled with the {{anch("Toolbox")}} instance once it has been initialized and the selected tool is loaded.</dd>
 <dt>
 <h5 id="getToolbox(target)"><code>getToolbox(target)</code></h5>
 </dt>
 <dd>Fetch the {{anch("Toolbox")}} object for the given target.<br>
 <br>
 <strong>Parameters:</strong><br>
 <em><code>target {Target}</code></em> - The target the toolbox is debugging.<br>
 <br>
 <strong>Return value:</strong><br>
 {{anch("Toolbox")}} object or undefined if there's no toolbox for the given target..</dd>
 <dt>
 <h5 id="closeToolbox(target)"><code>closeToolbox(target)</code></h5>
 </dt>
 <dd>Closes the toolbox for given target.</dd>
 <dd><strong>Parameters:</strong><br>
 <em><code>target {Target}</code></em> - The target of the toolbox that should be closed.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled once the toolbox has been destroyed.</dd>
 <dt>
 <h5 id="getDefaultTools()"><code>getDefaultTools()</code></h5>
 </dt>
 <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for the built-in tools.</dd>
 <dt>
 <h5 id="getAdditionalTools()"><code>getAdditionalTools()</code></h5>
 </dt>
 <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for tools added by addons.</dd>
 <dt>
 <h5 id="getToolDefinition(toolId)"><code>getToolDefinition(toolId)</code></h5>
 </dt>
 <dd>Fetch the {{anch("ToolDefinition")}} object for a tool if it exists and is enabled.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>toolId {String}</em></code> - The ID of the tool.</dd>
 <dd><strong>Return value:</strong><br>
 A {{anch("ToolDefinition")}} if a tool with the given ID exists and is enabled, null otherwise.</dd>
 <dt>
 <h5 id="getToolDefinitionMap()"><code>getToolDefinitionMap()</code></h5>
 </dt>
 <dd>Returns a toolId → {{anch("ToolDefinition")}} map for tools that are enabled.</dd>
 <dt>
 <h5 id="getToolDefinitionArray()"><code>getToolDefinitionArray()</code></h5>
 </dt>
 <dd>Returns an {{jsxref("Array")}} of {{anch("ToolDefinition")}} objects for enabled tools sorted by the order they appear in the toolbox.</dd>
 <dt>
 <h5 id="getThemeDefinition(themeId)"><code>getThemeDefinition(themeId)</code></h5>
 </dt>
 <dd>Fetch the <code>ThemeDefinition</code> object for the theme with the given id.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>themeId {String}</em></code> - The ID of the theme.</dd>
 <dd><strong>Return value:</strong><br>
 A <code>ThemeDefinition</code> object if the theme exists, null otherwise.</dd>
 <dt>
 <h5 id="getThemeDefinitionMap()"><code>getThemeDefinitionMap()</code></h5>
 </dt>
 <dd>Returns a toolId → <code>ThemeDefinition</code> map for available themes.</dd>
 <dt>
 <h5 id="getThemeDefinitionArray()"><code>getThemeDefinitionArray()</code></h5>
 </dt>
 <dd>Returns an {{jsxref("Array")}} of <code>ThemeDefinition</code> objects for avialble themes.</dd>
</dl>

<h4 id="Events">Events</h4>

<p>Following events are emitted by the <code>gDevTools</code> object via the {{anch("EventEmitter")}} interface.</p>

<dl>
 <dt>
 <h5 id="tool-registered(toolId)"><code>tool-registered</code><code>(toolId)</code></h5>
 </dt>
 <dd>A new tool has been registered.</dd>
 <dt>
 <h5 id="tool-unregistered(tool)"><code>tool-unregistered(tool)</code></h5>
 </dt>
 <dd>A tool has been unregistered. The parameter is a {{anch("ToolDefinition")}} object.</dd>
 <dt>
 <h5 id="theme-registered(themeId)"><code>theme-registered(themeId)</code></h5>
 </dt>
 <dd>A new theme has been registered.</dd>
 <dt>
 <h5 id="theme-unregistered(theme)"><code>theme-unregistered(theme)</code></h5>
 </dt>
 <dd>A theme has been unregistered. The parameter is a <code>ThemeDefinition</code> object.</dd>
 <dt>
 <h5 id="toolbox-ready(toolbox)"><code>toolbox-ready(toolbox)</code></h5>
 </dt>
 <dd>A new toolbox has been created and is ready to use. The parameter is a {{anch("Toolbox")}} object instance.</dd>
 <dt>
 <h5 id="toolbox-destroy(target)"><code>toolbox-destroy(target)</code></h5>
 </dt>
 <dd>The toolbox for the specified target is about to be destroyed.</dd>
 <dt>
 <h5 id="toolbox-destoyed(target)"><code>toolbox-destoyed(target)</code></h5>
 </dt>
 <dd>The toolbox for the specified target has been destroyed.</dd>
 <dt>
 <h5 id="toolId-init(toolbox_iframe)"><code>{toolId}-init(toolbox, iframe)</code></h5>
 </dt>
 <dd>A tool with the given ID has began to load in the given toolbox to the given frame.</dd>
 <dt>
 <h5 id="toolId-build(toolbox_panel)"><code>{toolId}-build(toolbox, panel)</code></h5>
 </dt>
 <dd>A tool with the given ID has began to initialize in the given toolbox. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd>
 <dt>
 <h5 id="toolId-ready(toolbox_panel)"><code>{toolId}-ready(toolbox, panel)</code></h5>
 </dt>
 <dd>A tool with the given ID has finished its initialization and is ready to be used. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd>
 <dt>
 <h5 id="toolId-destroy(toolbox_panel)"><code>{toolId}-destroy(toolbox, panel)</code></h5>
 </dt>
 <dd>A tool with the given ID is about to be destroyed. The panel is the object returned by the <code>ToolDefinition.build()</code> method.</dd>
</dl>

<h3 id="Toolbox">Toolbox</h3>

<p>A Toolbox is a frame for the {{anch("ToolPanel", "ToolPanels")}} that is debugging a specific target.</p>

<h4 id="Properties">Properties</h4>

<dl>
 <dt>
 <h5 id="target"><code>target</code></h5>
 </dt>
 <dd><strong>Target</strong>. The Target this toolbox is debugging.</dd>
 <dt>
 <h5 id="hostType"><code>hostType</code></h5>
 </dt>
 <dd><strong>Toolbox.HostType</strong>. The type of the host this Toolbox is docked to. The value is one of the <code>Toolbox.HostType</code> constants.</dd>
 <dt>
 <h5 id="zoomValue"><code>zoomValue</code></h5>
 </dt>
 <dd>The current zoom level of the Toolbox.</dd>
</dl>

<h4 id="Constants">Constants</h4>

<p>The Toolbox constructor contains following constant properties.</p>

<dl>
 <dt>
 <h5 id="Toolbox.HostType.BOTTOM"><code>Toolbox.HostType.BOTTOM</code></h5>
 </dt>
 <dd>Host type for the default toolbox host at the bottom of the browser window.</dd>
 <dt>
 <h5 id="Toolbox.HostType.SIDE"><code>Toolbox.HostType.SIDE</code></h5>
 </dt>
 <dd>Host type for the host at the side of the browser window.</dd>
 <dt>
 <h5 id="Toolbox.HostType.WINDOW"><code>Toolbox.HostType.WINDOW</code></h5>
 </dt>
 <dd>Host type for the separate Toolbox window.</dd>
 <dt>
 <h5 id="Toolbox.HostType.CUSTOM"><code>Toolbox.HostType.CUSTOM</code></h5>
 </dt>
 <dd>Host type for a custom frame host.</dd>
</dl>

<h4 id="Methods_2">Methods</h4>

<dl>
 <dt>
 <h5 id="getCurrentPanel()"><code>getCurrentPanel()</code></h5>
 </dt>
 <dd>Get the currently active {{anch("ToolPanel")}}.<br>
 <br>
 <strong>Return value:</strong><br>
 The {{anch("ToolPanel")}} object that was returned from {{anch("build(window_toolbox)", "ToolPanel.build()")}}.</dd>
 <dt>
 <h5 id="getPanel(toolId)"><code>getPanel(toolId)</code></h5>
 </dt>
 <dd>Get the {{anch("ToolPanel")}} for given tool.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>toolId {String} - </em></code>The tool identifier.<br>
 <br>
 <strong>Return value:</strong><br>
 The {{anch("ToolPanel")}} object if the tool with the given <code>toolId</code> is active, otherwise <code>undefined</code>.</dd>
 <dt>
 <h5 id="getPanelWhenReady(toolId)"><code>getPanelWhenReady(toolId)</code></h5>
 </dt>
 <dd>Similar to <code>getPanel()</code> but waits for the tool to load first. If the tool is not already loaded or currently loading the returned {{domxref("Promise")}} won't be fulfilled until something triggers the tool to load.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>toolId {String} - </em></code>The tool identifier.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object once the tool has finished loading.</dd>
 <dt>
 <h5 id="getToolPanels()"><code>getToolPanels()</code></h5>
 </dt>
 <dd>Returns a <code>toolId → {{anch("ToolPanel")}}</code> {{jsxref("Map")}} for currently loaded tools.</dd>
 <dt>
 <h5 id="getNotificationBox()"><code>getNotificationBox()</code></h5>
 </dt>
 <dd>Returns a {{ XULElem("notificationbox") }} element for the Toolbox that can be used to display notifications to the user.</dd>
 <dt>
 <h5 id="loadTool(toolId)"><code>loadTool(toolId)</code></h5>
 </dt>
 <dd>Loads the tool with the given <code>toolId</code> in the background but does not activate it.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>toolId {String} - </em></code>The tool identifier.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the loaded panel once the tool has loaded.<br>
  </dd>
 <dt>
 <h5 id="selectTool(toolId)"><code>selectTool(toolId)</code></h5>
 </dt>
 <dd>Selects the tool with the given <code>toolId</code>.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>toolId {String} - </em></code>The tool identifier.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel once the tool has loaded and activated.</dd>
 <dt>
 <h5 id="selectNextTool()"><code>selectNextTool()</code></h5>
 </dt>
 <dd>Selects the next tool in the <code>Toolbox</code>.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.</dd>
 <dt>
 <h5 id="selectPreviousTool()"><code>selectPreviousTool()</code></h5>
 </dt>
 <dd>Selects the previous tool in the <code>Toolbox</code>.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled with the {{anch("ToolPanel")}} object of the selected panel.</dd>
 <dt>
 <h5 id="highlightTool(toolId)"><code>highlightTool(toolId)</code></h5>
 </dt>
 <dd>Highlights the tab for the given tool.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>toolId {String} - </em></code>The tool to highlight.</dd>
 <dt>
 <h5 id="unhighlightTool(toolId)"><code>unhighlightTool(toolId)</code></h5>
 </dt>
 <dd>Unhighlights the tab for the given tool.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>toolId {String} - </em></code>The tool to unhighlight.</dd>
 <dt>
 <h5 id="openSplitConsole()"><code>openSplitConsole()</code></h5>
 </dt>
 <dd>Opens the split Console to the bottom of the toolbox.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled once the Console has loaded.</dd>
 <dt>
 <h5 id="closeSplitConsole()"><code>closeSplitConsole()</code></h5>
 </dt>
 <dd>Closes the split console.</dd>
 <dt>
 <h5 id="toggleSplitConsole()"><code>toggleSplitConsole()</code></h5>
 </dt>
 <dd>Toggles the state of the split console.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled once the operation has finished.</dd>
 <dt>
 <h5 id="switchHost(hostType)"><code>switchHost(hostType)</code></h5>
 </dt>
 <dd>Switches the location of the toolbox<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>hostType {Toolbox.HostType} - </em></code>The type of the new host.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled once the new host is ready.<br>
  </dd>
 <dt>
 <h5 id="reloadTarget(force)"><code>reloadTarget(force)</code></h5>
 </dt>
 <dd>Reloads the current target of the toolbox.<br>
 <br>
 <strong>Parameters:</strong><br>
 <em><code>force {Boolean} -</code></em> If true the target is shift-reloaded i.e. the cache is bypassed during the reload.</dd>
 <dt>
 <h5 id="zoomIn()"><code>zoomIn()</code></h5>
 </dt>
 <dd>Increases the zoom level of the <code>Toolbox</code> document.</dd>
 <dt>
 <h5 id="zoomOut()"><code>zoomOut()</code></h5>
 </dt>
 <dd>Decreases the zoom level of the <code>Toolbox</code> document.</dd>
 <dt>
 <h5 id="zoomReset()"><code>zoomReset()</code></h5>
 </dt>
 <dd>Resets the zoom level of the <code>Toolbox</code> document.</dd>
 <dt>
 <h5 id="setZoom(value)"><code>setZoom(value)</code></h5>
 </dt>
 <dd>Set the zoom level to an arbitrary value.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>value {Number} - </em></code>The zoom level such as <code>1.2</code>.</dd>
 <dt>
 <h5 id="destroy()"><code>destroy()</code></h5>
 </dt>
 <dd>Closes the toolbox.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is resolved once the <code>Toolbox</code> is destroyed.</dd>
</dl>

<h4 id="Events_2">Events</h4>

<p>The Toolbox object emits following events via the {{anch("EventEmitter")}} interface.</p>

<dl>
 <dt>
 <h5 id="host-changed"><code>host-changed</code></h5>
 </dt>
 <dd>The Host for this Toolbox has changed.</dd>
 <dt>
 <h5 id="ready"><code>ready</code></h5>
 </dt>
 <dd>The <code>Toolbox</code> is ready to use.</dd>
 <dt>
 <h5 id="select(toolId)"><code>select(toolId)</code></h5>
 </dt>
 <dd>A tool has been selected. This event is emitted before the corresponding <code>{toolId}-selected</code> event.</dd>
 <dt>
 <h5 id="toolId-init(frame)"><code>{toolId}-init(frame)</code></h5>
 </dt>
 <dd>A tool is about to be loaded. The frame is the {{HTMLElement("iframe")}} element that has been created for the tool.</dd>
 <dt>
 <h5 id="toolId-build(panel)"><code>{toolId}-build(panel)</code></h5>
 </dt>
 <dd>The frame for a tool has loaded and the {{anch("build(window_toolbox)", "ToolPanel.build()")}} method has been called but the asynchronous initialization has not started. The parameter is a {{anch("ToolPanel")}} object.</dd>
 <dt>
 <h5 id="toolId-ready(panel)"><code>{toolId}-ready(panel)</code></h5>
 </dt>
 <dd>The asynchronous initialization for a tool has completed and it is ready to be used. The parameter is a {{anch("ToolPanel")}} object.</dd>
 <dt>
 <h5 id="toolId-selected(panel)"><code>{toolId}-selected(panel)</code></h5>
 </dt>
 <dd>A tool has been selected. The parameter is a {{anch("ToolPanel")}} object.</dd>
 <dt>
 <h5 id="toolId-destroy(panel)"><code>{toolId}-destroy(panel)</code></h5>
 </dt>
 <dd>A tool is about to be destroyed. The parameter is a {{anch("ToolPanel")}} object.</dd>
 <dt>
 <h5 id="destroy"><code>destroy</code></h5>
 </dt>
 <dd>The <code>Toolbox</code> is about to be destroyed.</dd>
 <dt>
 <h5 id="destroyed"><code>destroyed</code></h5>
 </dt>
 <dd>The <code>Toolbox</code> has been destroyed.</dd>
</dl>

<h3 id="ToolDefinition">ToolDefinition</h3>

<p>A <code>ToolDefinition</code> object contains all the required information for a tool to be shown in the toolbox.</p>

<h4 id="Methods_3">Methods</h4>

<dl>
 <dt>
 <h5 id="isTargetSupported(target)"><code>isTargetSupported(target)</code></h5>
 </dt>
 <dd>A method that is called during toolbox construction to check if the tool supports debugging the given target.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>target {Target} - </em></code>The target to check.<br>
 <br>
 <strong>Return value:</strong><br>
 A boolean indicating if the tool supports the given target.</dd>
 <dt>
 <h5 id="build(window_toolbox)"><code>build(window, toolbox)</code></h5>
 </dt>
 <dd>A method that builds the {{anch("ToolPanel")}} for this tool.<br>
 <br>
 <strong>Parameters:</strong><br>
 <em><code>window {Window} - </code></em>The {{domxref("Window")}} object for frame the tool is being built into.<br>
 <em><code>toolbox {Toolbox} - </code></em>The {{anch("Toolbox")}} the tool is being built for.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{anch("ToolPanel")}} for the tool.</dd>
 <dt>
 <h5 id="onKey(panel_toolbox)"><code>onKey(panel, toolbox)</code></h5>
 </dt>
 <dd><strong>Optional.</strong> A method that is called when the keyboard shortcut for the tool is activated while the tool is the active tool.<br>
 <br>
 <strong>Parameters:</strong><br>
 <code><em>panel {ToolPanel} - </em></code>The {{anch("ToolPanel")}} for the tool.<br>
 <em><code>toolbox {Toolbox} - </code></em>The toolbox for the shortcut was triggered for.<br>
 <br>
 <strong>Return value:</strong><br>
 Undefined.</dd>
</dl>

<h4 id="Properties_2">Properties</h4>

<p>The ToolDefinition object can contain following properties. Most of them are optional and can be used to customize the presense of the tool in the Browser and the Toolbox.</p>

<dl>
 <dt>
 <h5 id="id"><code>id</code></h5>
 </dt>
 <dd><strong>String, required.</strong> An unique identifier for the tool. It must be a valid id for an HTML {{domxref("Element")}}.</dd>
 <dt>
 <h5 id="url"><code>url</code></h5>
 </dt>
 <dd><strong>String, required.</strong> An URL of the panel document.</dd>
 <dt>
 <h5 id="label"><code>label</code></h5>
 </dt>
 <dd><strong>String, optional.</strong> The tool's name. If undefined the <code>icon</code> should be specified.</dd>
 <dt>
 <h5 id="tooltip"><code>tooltip</code></h5>
 </dt>
 <dd><strong>String, optional.</strong> The tooltip for the tool's tab.</dd>
 <dt>
 <h5 id="panelLabel"><code>panelLabel</code></h5>
 </dt>
 <dd><strong>String, optional.</strong> An accessibility label for the panel.</dd>
 <dt>
 <h5 id="ordinal"><code>ordinal</code></h5>
 </dt>
 <dd><strong>Integer, optional.</strong> The position of the tool's tab within the toolbox. <strong>Default: </strong>99</dd>
 <dt>
 <h5 id="visibilityswitch"><code>visibilityswitch</code></h5>
 </dt>
 <dd><strong>String, optional.</strong> A preference name that controls the visiblity of the tool. <strong>Default: </strong><code>devtools.{id}.enabled</code></dd>
 <dt>
 <h5 id="icon"><code>icon</code></h5>
 </dt>
 <dd><strong>String, optional.</strong> An URL for the icon to show in the toolbox tab. If undefined the label should be defined.</dd>
 <dt>
 <h5 id="highlightedicon"><code>highlightedicon</code></h5>
 </dt>
 <dd><strong>String, optional.</strong> An URL for an icon that is to be used when the tool is highlighted (see e.g. paused, inactive debugger). <strong>Default:</strong> <code>{icon}</code></dd>
 <dt>
 <h5 id="iconOnly"><code>iconOnly</code></h5>
 </dt>
 <dd><strong>Boolean, optional.</strong> If true, the label won't be shown in the tool's tab. <strong>Default:</strong> false</dd>
 <dt>
 <h5 id="invertIconForLightTheme"><code>invertIconForLightTheme</code></h5>
 </dt>
 <dd><strong>Boolean, optional.</strong> If true the colors of the icon will be inverted for the light theme. <strong>Default:</strong> false</dd>
 <dt>
 <h5 id="key"><code>key</code></h5>
 </dt>
 <dd><strong>String, optional.</strong> The key used for keyboard shortcut. Either {{XULAttr("key")}} or {{XULAttr("keycode")}} value.</dd>
 <dt>
 <h5 id="modifiers"><code>modifiers</code></h5>
 </dt>
 <dd><strong>String, optional.</strong> {{XULAttr("modifiers", "Modifiers")}} for the keyboard shortcut.</dd>
 <dt>
 <h5 id="preventClosingOnKey"><code>preventClosingOnKey</code></h5>
 </dt>
 <dd><strong>Boolean, optional.</strong> If true the tool won't close if its keybinding is pressed while it is active. <strong>Default:</strong> false</dd>
 <dt>
 <h5 id="inMenu"><code>inMenu</code></h5>
 </dt>
 <dd><strong>Boolean, optional.</strong> If true the tool will be shown in the Developer Menu. <strong>Default:</strong> false</dd>
 <dt>
 <h5 id="menuLabel"><code>menuLabel</code></h5>
 </dt>
 <dd><strong>String, optional.</strong> A label for the Developer Menu item. <strong>Default:</strong> <code>{label}</code></dd>
 <dt>
 <h5 id="accesskey"><code>accesskey</code></h5>
 </dt>
 <dd><strong>String, optional.</strong> {{XULAttr("accesskey")}} for the Developer Menu {{XULElem("menuitem")}}.</dd>
</dl>

<h4 id="Example">Example</h4>

<p>Here's a minimal definition for a tool.</p>

<pre class="brush: js"><code>let def = {
  id: "my-tool",
  label: "My Tool",
  icon: "chrome://browser/skin/devtools/tool-webconsole.svg",
  url: "about:blank",
  isTargetSupported: target =&gt; true,
  build: (window, toolbox) =&gt; new MyToolPanel(window, toolbox)
};</code>

// Register it.
gDevTools.registerTool(def);
</pre>

<h3 id="TargetType">TargetType</h3>

<p>FIXME:</p>

<h3 id="HostType">HostType</h3>

<p>FIXME</p>

<h3 id="ToolPanel">ToolPanel</h3>

<p>The ToolPanel is an interface the toolbox uses to manage the panel of a tool. The object that <code>ToolDefinition.build()</code> returns should implement the methods described below.</p>

<h4 id="Methods_4">Methods</h4>

<dl>
 <dt>
 <h5 id="open()"><code>open()</code></h5>
 </dt>
 <dd><strong>Optional</strong>. A method that can be used to perform asynchronous initialization. If the method returns a {{domxref("Promise")}}, many operations (e.g. {{anch("showToolbox(target_toolId_hostType_hostOptions)", "gDevTools.showToolbox()")}} or <code>toolbox.selectTool()</code>) and events (e.g. {{anch("toolbox-ready(toolbox)", "toolbox-ready")}}) are delayed until the promise has been fulfilled.<br>
 <br>
 <strong>Return value:</strong><br>
 The method should return a {{domxref("Promise")}} that is resolved with the <code>ToolPanel</code> object once it's ready to be used.</dd>
 <dt>
 <h5 id="destroy()_2"><code>destroy()</code></h5>
 </dt>
 <dd>
 <p>A method that is called when the toolbox is closed or the tool is unregistered. If the tool needs to perform asynchronous operations during destruction the method should return a {{domxref("Promise")}} that is resolved once the process is complete.</p>

 <p><strong>Return value:</strong><br>
  A {{domxref("Promise")}} if the function performs asynchronous operations, otherwise <code>undefined</code>.</p>
 </dd>
</dl>

<h4 id="Example_2">Example</h4>

<p>Here's a basic template for a ToolPanel implementation.</p>

<pre class="brush: js"><code>// In the ToolDefintion object, do
//   build: (window, target) =&gt; new MyPanel(window, target),

function MyPanel(window, target) {
  // The window object that has loaded the URL defined in the ToolDefinition
  this.window = window;
  // The Target this toolbox is debugging.
  this.target = target;

  // Do synchronous initialization here.
  window.document.body.addEventListener("click", this.handleClick);
}

MyPanel.prototype = {
  open: function() {
    // Any asynchronous operations should be done here.
    return this.doSomethingAsynchronous()
      .then(() =&gt; this);
  },

  destroy: function() {
    // Synchronous destruction.
    this.window.document.body.removeEventListener("click", this.handleClick);

    // Async destruction.
    return this.destroySomethingAsynchronosly()
      .then(() =&gt; console.log("destroyed"));
  },

  handleClick: function(event) {
    console.log("Clicked", event.originalTarget);
  },
};</code>
</pre>

<h3 id="EventEmitter">EventEmitter</h3>

<p><code>EventEmitter</code> is an interface many Developer Tool classes and objects implement and use to notify others about changes in their internal state.</p>

<p>When an event is emitted on the <code>EventEmitter</code>, the listeners will be called with the event name as the first argument and the extra arguments are spread as the remaining parameters.</p>

<div class="note">
<p>Note: Some components use Add-on SDK event module instead of the DevTools EventEmitter. Unfortunately, their API's are a bit different and it's not always evident which one a certain component is using. The main differences between the two modules are that the first parameter for Add-on SDK events is the first payload argument instead of the event name and the <code>once</code> method does not return a Promise. The work for unifying the event paradigms is ongoing in {{bug(952653)}}.</p>
</div>

<h4 id="Methods_5">Methods</h4>

<p>The following methods are available on objects that have been decorated with the <code>EventEmitter</code> interface.</p>

<dl>
 <dt>
 <h5 id="emit(eventName_...extraArguments)"><code>emit(eventName, ...extraArguments)</code></h5>
 </dt>
 <dd>Emits an event with the given name to this object.<br>
 <br>
 <strong>Parameters:</strong><br>
 <em><code>eventName {String} - </code></em>The name of the event.<br>
 <code><em>extraArguments {</em>...<em>Any} - </em></code>Extra arguments that are passed to the listeners.</dd>
 <dt>
 <h5 id="on(eventName_listener)"><code>on(eventName, listener)</code></h5>
 </dt>
 <dd>Adds a listener for the given event.</dd>
 <dt>
 <h5 id="off(eventName_listener)"><code>off(eventName, listener)</code></h5>
 </dt>
 <dd>Removes the previously added listener from the event.</dd>
 <dt>
 <h5 id="once(eventName_listener)"><code>once(eventName, listener)</code></h5>
 </dt>
 <dd>Adds a listener for the event that is removed after it has been emitted once.<br>
 <br>
 <strong>Return value:</strong><br>
 A {{domxref("Promise")}} that is fulfilled with the first extra argument for the event when then event is emitted. If the event contains multiple payload arguments, the rest are discarded and can only be received by providing the listener function to this method.</dd>
</dl>

<h4 id="Examples">Examples</h4>

<p>Here's a few examples using the {{anch("gDevTools")}} object.</p>

<pre class="brush: js"><code>let onInit = (eventName, toolbox, netmonitor) =&gt; console.log("Netmonitor initialized!");

// Attach a listener.
gDevTools.on("netmonitor-init", onInit);

// Remove a listener.
gDevTools.off("netmonitor-init", onInit);

// Attach a one time listener.
gDevTools.once("netmonitor-init", (eventName, toolbox, netmonitor) =&gt; {
  console.log("Network Monitor initialized once!", toolbox, netmonitor);
});

// Use the Promise returned by the once method.
gDevTools.once("netmonitor-init").then(toolbox =&gt; {
  // Note that the second argument is not available here.
  console.log("Network Monitor initialized to toolbox", toolbox);
});</code>
</pre>

<h3 id="ToolSidebar">ToolSidebar</h3>

<p>To build a sidebar in your tool, first, add a xul:tabbox where you want the sidebar to live:</p>

<pre class="line"><code class="brush: html">    <span class="nt">&lt;splitter</span> <span class="na">class=</span><span class="s">"devtools-side-splitter"</span><span class="nt">/&gt;</span></code>
<code>    <span class="nt">&lt;tabbox</span> <span class="na">id=</span><span class="s">"mytool-sidebar"</span> <span class="na">class=</span><span class="s">"devtools-sidebar-tabs"</span> <span class="na">hidden=</span><span class="s">"true"</span><span class="nt">&gt;</span></code>
<code>      <span class="nt">&lt;tabs/&gt;</span></code>
<code>      <span class="nt">&lt;tabpanels</span> <span class="na">flex=</span><span class="s">"1"</span><span class="nt">/&gt;</span></code>
<code>    <span class="nt">&lt;/tabbox&gt;</span></code></pre>

<div class="line"></div>

<div class="line">A sidebar is composed of tabs. Each tab will hold an iframe. For example, in the Inspector, there are 3 tabs (Computed View, Rule View, Layout View). The user can select the tab he wants to see.</div>

<div class="line"></div>

<div class="line">If the availability of the tabs depends on some tool-related conditions, we might want to not let the user select a tab. This API provides methods to hide the tabstripe. For example, in the Web Console, there are 2 views (Network View and Object View). These views are only available in certain conditions controlled by the WebConsole code. So it's up the WebConsole the hide and show the sidebar, and select the correct tab.</div>

<div class="line"></div>

<div class="line">If the loaded document exposes a <code>window.setPanel(ToolPanel)</code> function, the sidebar will call it once the document is loaded.</div>

<div class="line"></div>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Method</th>
   <th>Description</th>
  </tr>
  <tr>
   <td><code>new ToolSidebar(xul:tabbox, ToolPanel, uid, showTabstripe=true)</code></td>
   <td>ToolSidebar constructor</td>
  </tr>
  <tr>
   <td><code>void addTab(tabId, url, selected=false)</code></td>
   <td>Add a tab in the sidebar</td>
  </tr>
  <tr>
   <td><code>void select(tabId)</code></td>
   <td>Select a tab</td>
  </tr>
  <tr>
   <td><code>void hide()</code></td>
   <td>Hide the sidebar</td>
  </tr>
  <tr>
   <td><code>void show()</code></td>
   <td>Show the sidebar</td>
  </tr>
  <tr>
   <td><code>void toggle()</code></td>
   <td>Toggle the sidebar</td>
  </tr>
  <tr>
   <td><code>void getWindowForTab(tabId)</code></td>
   <td>Get the iframe containing the tab content</td>
  </tr>
  <tr>
   <td><code>tabId getCurrentTabID()</code></td>
   <td>Return the id of tabId of the current tab</td>
  </tr>
  <tr>
   <td><code>tabbox getTab(tabId)</code></td>
   <td>Return a tab given its id</td>
  </tr>
  <tr>
   <td><code>destroy()</code></td>
   <td>Destroy the ToolSidebar object</td>
  </tr>
  <tr>
   <th>Events</th>
   <th>Description</th>
  </tr>
  <tr>
   <td><code>new-tab-registered</code></td>
   <td>A new tab has been added</td>
  </tr>
  <tr>
   <td><code>{tabId}-ready</code></td>
   <td>Tab is loaded and can be used</td>
  </tr>
  <tr>
   <td><code>{tabId}-selected</code></td>
   <td>Tab has been selected and is visible</td>
  </tr>
  <tr>
   <td><code>{tabId}-unselected</code></td>
   <td>Tab has been unselected and is not visible</td>
  </tr>
  <tr>
   <td><code>show</code></td>
   <td>The sidebar has been opened.</td>
  </tr>
  <tr>
   <td><code>hide</code></td>
   <td>The sidebar has been closed.</td>
  </tr>
 </tbody>
</table>

<h2 id="Examples_2">Examples</h2>

<p>Register a tool</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js">gDevTools<span class="punctuation token">.</span><span class="function token">registerTool</span><span class="punctuation token">(</span><span class="punctuation token">{</span>
  <span class="comment token">// FIXME: missing key related properties.</span>
  id<span class="punctuation token">:</span> <span class="string token">"inspector"</span><span class="punctuation token">,</span>
  icon<span class="punctuation token">:</span> <span class="string token">"chrome://browser/skin/devtools/inspector-icon.png"</span><span class="punctuation token">,</span>
  url<span class="punctuation token">:</span> <span class="string token">"chrome://browser/content/devtools/inspector/inspector.xul"</span><span class="punctuation token">,</span>
  <span class="keyword token">get</span> <span class="function token">label</span><span class="punctuation token">(</span><span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="keyword token">let</span> strings <span class="operator token">=</span> Services<span class="punctuation token">.</span>strings<span class="punctuation token">.</span><span class="function token">createBundle</span><span class="punctuation token">(</span><span class="string token">"chrome://browser/locale/devtools/inspector.properties"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
    <span class="keyword token">return</span> strings<span class="punctuation token">.</span><span class="function token">GetStringFromName</span><span class="punctuation token">(</span><span class="string token">"inspector.label"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span><span class="punctuation token">,</span>

  isTargetSupported<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>target<span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="keyword token">return</span> <span class="operator token">!</span>target<span class="punctuation token">.</span>isRemote<span class="punctuation token">;</span>
  <span class="punctuation token">}</span><span class="punctuation token">,</span>

  build<span class="punctuation token">:</span> <span class="keyword token">function</span><span class="punctuation token">(</span>iframeWindow<span class="punctuation token">,</span> toolbox<span class="punctuation token">,</span> node<span class="punctuation token">)</span> <span class="punctuation token">{</span>
    <span class="keyword token">return</span> <span class="keyword token">new</span> <span class="class-name token">InspectorPanel</span><span class="punctuation token">(</span>iframeWindow<span class="punctuation token">,</span> toolbox<span class="punctuation token">,</span> node<span class="punctuation token">)</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p>Open a tool, or select it if the toolbox is already open:</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> target <span class="operator token">=</span> TargetFactory<span class="punctuation token">.</span><span class="function token">forTab</span><span class="punctuation token">(</span>gBrowser<span class="punctuation token">.</span>selectedTab<span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="keyword token">let</span> toolbox <span class="operator token">=</span> gDevTools<span class="punctuation token">.</span><span class="function token">openToolbox</span><span class="punctuation token">(</span>target<span class="punctuation token">,</span> <span class="keyword token">null</span><span class="punctuation token">,</span> <span class="string token">"inspector"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

toolbox<span class="punctuation token">.</span><span class="function token">once</span><span class="punctuation token">(</span><span class="string token">"inspector-ready"</span><span class="punctuation token">,</span> <span class="keyword token">function</span><span class="punctuation token">(</span>event<span class="punctuation token">,</span> panel<span class="punctuation token">)</span> <span class="punctuation token">{</span>
  <span class="keyword token">let</span> inspector <span class="operator token">=</span> toolbox<span class="punctuation token">.</span><span class="function token">getToolPanels</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="keyword token">get</span><span class="punctuation token">(</span><span class="string token">"inspector"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
  inspector<span class="punctuation token">.</span>selection<span class="punctuation token">.</span><span class="function token">setNode</span><span class="punctuation token">(</span>target<span class="punctuation token">,</span> <span class="string token">"browser-context-menu"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
<span class="punctuation token">}</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>

<p>Add a sidebar to an existing tool:</p>

<pre class="brush: js line-numbers  language-js"><code class="language-js"><span class="keyword token">let</span> sidebar <span class="operator token">=</span> <span class="keyword token">new</span> <span class="class-name token">ToolSidebar</span><span class="punctuation token">(</span>xulTabbox<span class="punctuation token">,</span> toolPanel<span class="punctuation token">,</span> <span class="string token">"toolId"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
sidebar<span class="punctuation token">.</span><span class="function token">addTab</span><span class="punctuation token">(</span><span class="string token">"tab1"</span><span class="punctuation token">,</span> <span class="string token">"chrome://browser/content/.../tab1.xhtml"</span><span class="punctuation token">,</span> <span class="keyword token">true</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
sidebar<span class="punctuation token">.</span><span class="function token">addTab</span><span class="punctuation token">(</span><span class="string token">"tab2"</span><span class="punctuation token">,</span> <span class="string token">"chrome://browser/content/.../tab2.xhtml"</span><span class="punctuation token">,</span> <span class="keyword token">false</span><span class="punctuation token">)</span><span class="punctuation token">;</span>
sidebar<span class="punctuation token">.</span><span class="function token">show</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre>