---
title: Extending the developer tools
slug: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
tags:
  - Deutsch Guide
  - DevTools
  - Extentions
  - german
translation_of: Mozilla/Add-ons/WebExtensions/Extending_the_developer_tools
---
<div class="note">
<p>Das heißt Folgendes wird nicht unterstützt , sie können Änderungen an der Seite sehen, die von Seitenskripten vorgenommen wurden.Diese Seite beschreibt devtools-APIs, wie sie in Firefox 55 vorhanden sind. Obwohl die APIs auf den Chrome devtools APIs basieren, gibt es noch viele Funktionen, die in Firefox noch nicht implementiert sind und daher hier nicht dokumentiert sind. Informationen zu den derzeit fehlenden Funktionen finden Sie unter Einschränkungen der devtools-APIs.</p>
</div>

<ul>
 <li>Sie können WebExtensions-APIs verwenden, um die integrierten Entwicklertools des Browsers zu erweitern. Um eine devtools-Erweiterung zu erstellen, geben Sie den Schlüssel "devtools_Seite" in manifest.json ein:</li>
 <li>
  <pre class="brush: json">"devtools_seite": "devtools/devtools-seite.html"</pre>
 </li>
 <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Der Wert dieses Schlüssels ist eine URL, die auf eine HTML-Datei verweist, die mit Ihrer Erweiterung gebündelt wurde . Die URL sollte relativ zur manifest.json-Datei selbst sein.</span></li>
 <li>Die HTML-Datei definiert eine spezielle Seite in der Verlängerung, Seite der devtools ResourceHinzufügen
  <h3 id="Devtools_Seite">Devtools Seite</h3>
 </li>
 <li><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Die davetool Seite wird beim Öffnen der Browser Devtools geladen und beim Schließen entladen. Beachten Sie, dass, weil die devtools Fenster mit einem einzigen Register zugeordnet ist, es für mehr als ein devtools Fenster durchaus möglich ist - also mehr als eine devtools Seite - zur gleichen Zeit existieren.</span></li>
</ul>

<p><span style="font-size: 1rem; letter-spacing: -0.00278rem;">Die devtools-Seite hat kein sichtbares DOM, kann aber JavaScript-Quellen mit &lt;script&gt; -Tags enthalten. Die Quellen müssen mit der Erweiterung selbst gebündelt werden. Die normalen DOM-APIs, auf die über das globale Fensterobjekt zugegriffen werden kann Die gleichen WebExtension-APIs wie in Inhaltsskripten Die devtools-APIs: Devtools </span>inspiziertes Fenster devtools.network devtools.panels Beachten Sie, dass die devtools-Seite keinen Zugriff auf andere Web Extensions-APIs erhält und die Hintergrundseite keinen Zugriff auf die devtools-APIs erhält. Stattdessen müssen die davetool-Seite und die Hintergrundseite definiert werden. Verwenden der Laufzeit-Messeging-APIs. Hier ist ein Beispiel:</p>

<div class="twocolumns">
<ul>
 <li>
  <pre class="syntaxbox">&lt;!DOCTYPE html&gt; &lt;html&gt;   &lt;head&gt;     &lt;meta charset="utf-8"&gt;   &lt;/head&gt;   &lt;body&gt;     &lt;script sec="devtools.js"&gt;&lt;/script&gt;   &lt;/body&gt; &lt;/html&gt;The devtools.js file will hold the actual code creating your dev tools extensions.</pre>
 </li>
 <li>
  <h3 id="Erstellen_von_panel">Erstellen von panel </h3>
 </li>
 <li>Das devtools-Fenster enthält eine Reihe separater Tools - den JavaScript-Debugger, den Netzwerkmonitor usw.  Über eine Reihe von Registerkarten am oberen Rand kann der Benutzer zwischen den verschiedenen Werkzeugen wechseln.  Das Fenster, in dem sich die Benutzeroberfläche jedes Tools befindet, wird als "Panel" bezeichnet.</li>
 <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Gebrauche der </span></font>devtools.panels.create()</code> API,,  um Ihren eigenen  Panel Herzustellen in devtools Fenster(Window)</li>
 <li>
  <pre class="brush: js">browser.devtools.panels.create(
  "My Panel",                      // title
  "icons/star.png",                // icon
  "devtools/panel/panel.html"      // content
).then((newPanel) =&gt; {
  newPanel.onShown.addListener(initialisePanel);
  newPanel.onHidden.addListener(unInitialisePanel);
});</pre>
 </li>
 <li>
  <p>Hierfür sind drei Argumente erforderlich: Titel, Symbol und Inhalt des Panels.  Es wird ein Versprechen zurück gegeben, das devtool panel ExtensionPanel-Objekt aufgelöst wird, das in neue Panel darstellt.</p>
 </li>
 <li><code>devtools.panels.ExtensionPanel</code> dieser obieckt reprsentiert das neue Panel</li>
 <li>
  <h3 id="Interaktion_mit_dem_Zielfenster">Interaktion mit dem Zielfenster</h3>
 </li>
 <li>Die Entwicklertools sind immer an eine bestimmte Browserregisterkarte angehängt.  Dies wird als "Ziel" für die Entwicklertools oder als "inspiziertes Fenster" bezeichnet, damit können Sie inspizierten Fenster mit der Sie interagieren</li>
 <li><code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow">devtools.inspectedWindow</a></code> API.</li>
</ul>
</div>

<dl>
 <dt>
 <h3 id="Code_im_Zielfenster_ausführen">Code im Zielfenster ausführen</h3>
 </dt>
</dl>

<p>Der<code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API/devtools.inspectedWindow/eval">devtools.inspectedWindow.eval()</a></code> bereitgestellt in einfacher weisen um den Code auszuführen in den lnspector Fensten </p>

<div class="blockIndicator note">
<p class="syntaxbox">Arbeiten mit Inhaltsskripten Dies entspricht in etwa der Verwendung von {{WebExtAPIRef ("tabs.executeScript ()")}} zum Einfügen eines Inhaltsskripts, mit einem wichtigen Unterschied nommen wurden.Beachten Sie, dass eine saubere Ansicht des DOM eine Sicherheitsfunktion ist, mit der verhindert werden soll, dass feindliche Seiten Erweiterungen austricksen, indem das Verhalten nativer DOM-Funktionen neu definiert wird.  Das bedeutet, dass Sie mit eval () sehr vorsichtig sein müssen und ein normales Inhaltsskript verwenden sollten, wenn Sie können.</p>
</div>

<p>Mit devtools.inspectedWindow.eval () geladene Skripte sehen auch keine von c definierten JavaJavaScript-Variablen</p>

<h3 id="Arbeiten_mit_Inhaltsskripten">Arbeiten mit Inhaltsskripten</h3>

<p>devtools document hat keinen direkten Zugrif Beachten Sie, dass eine saubere Ansicht des DOM eine Sicherheitsfunktion ist, mit der verhindert werden soll, dass feindliche Seiten Erweiterungen austricksen, indem das Verhalten nativer DOM-Funktionen neu definiert wird.  Das bedeutet, dass Sie mit eval () sehr vorsichtig sein müssen und ein normales Inhaltsskript verwenden sollten, wenn Sie können.&lt;</p>

<p>Bei einem Skript muss das devtools5-Dokument eine Nachricht senden, in der es aufgefordert wird, das Skript einzufügen.  Die devtools.inspectedWindow.table gibt die ID der Zielregisterkarte an:</p>

<p>Wenn Sie Nachrichten zwischen den im Zielfenster ausgeführten Inhaltsskripten und einem devtools-Dokument austauschen müssen, sollten Sie {{WebExtAPIRef ("runtime.connect ()")}} und {{WebExtAPIRef ("runtime.onConnect")}} verwenden, um eine Verbindung zwischen der Hintergrundseite und dem devtools-Dokument herzustellen.  Die Hintergrundseite kann dann eine Zuordnung zwischen Registerkarten-IDs und {{WebExtAPIRef ("runtime.Port")}} -Objekten verwalten und diese verwenden, um Nachrichten zwischen den beiden Bereichen weiterzuleiten.</p>

<p>Diese APIs basieren auf den Chrome devtools-APIs, aber im Vergleich zu Chrome fehlen noch viele Funktionen.  In diesem Abschnitt werden die Funktionen aufgeführt, die ab Firefox 54 noch nicht implementiert sind. Beachten Sie, dass sich die devtools-APIs in der aktiven Entwicklung befinden und wir erwarten, dass die meisten davon in zukünftigen Versionen unterstützt werden.</p>

<ul>
 <li>
  <pre class="brush: js">// devtools-panel.js

const scriptToAttach = "document.body.innerHTML = 'Hi from the devtools';";

window.addEventListener("click", () =&gt; {
  browser.runtime.sendMessage({
    tabId: browser.devtools.inspectedWindow.tabId,
    script: scriptToAttach
  });
});</pre>
 </li>
 <li>
  <pre class="brush: js">// background.js

function handleMessage(request, sender, sendResponse) {
  browser.tabs.executeScript(request.tabId, {
    code: request.script
  });
}

browser.runtime.onMessage.addListener(handleMessage);</pre>
 </li>
 <li><img alt="" src="https://mdn.mozillademos.org/files/14923/devtools-content-scripts.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 600px;"></li>
 <li>
  <h2 id="Einschränkungen_der_devtools_APIs">Einschränkungen der devtools APIs</h2>
 </li>
 <li>
  <h3 id="devtools_inspizierte_Window">devtools inspizierte Window</h3>
 </li>
 <li>Folgendes wird nicht unterstüzt</li>
 <li><code>inspectedWindow.getResources()</code></li>
 <li><code>inspectedWindow.onResourceAdded</code></li>
 <li><code>inspectedWindow.onResourceContentCommitted</code></li>
 <li>None of the options to <code>inspectedWindow.eval()</code> are supported.</li>
 <li>Scripts injected using <code>inspectedWindow.eval()</code> can't use all the Console's command-line helper functions, but <code>$0</code> and <code>inspect(...)</code> are both supported (starting from Firefox 55).</li>
 <li>
  <h3 id="devtools.panele">devtools.panele</h3>
 </li>
 <li>The following are not supported:</li>
 <li><code>panels.elements</code></li>
 <li><code>panels.sources</code></li>
 <li><code>panels.setOpenResourceHandler()</code></li>
 <li><code>panels.openResource()</code></li>
 <li><code>panels.ExtensionPanel.createStatusBarButton()</code></li>
 <li><code>panels.Button</code></li>
 <li><code>panels.ElementsPanel</code></li>
 <li><code>panels.SourcesPanel</code></li>
 <li>
  <h3 id="Beispielsweise">Beispielsweise</h3>
 </li>
 <li>Das <a href="https://github.com/mdn/webextensions-examples">webextensions-examples</a> bericht an GitHub, enthält einige Beispiele für Erweiterungen, die devtools-Panels verwenden:</li>
 <li>
  <p><a href="https://github.com/mdn/webextensions-examples/blob/master/devtools-panels/">devtools-panels</a> benutzen Sie dentools Panels</p>
 </li>
</ul>

<p><span class="hidden"> </span></p>