---
title: Firefox Tools für Webentwickler
slug: Tools
tags:
  - Entwickler
  - Tools
  - Webentwicklung
translation_of: Tools
---
<div>{{ToolsSidebar}}</div>

<div class="summary"><span class="seoSummary"><math display="block"><semantics><mrow></mrow><annotation encoding="TeX"></annotation></semantics></math>Untersuchen, bearbeiten und debuggen von HTML, CSS und JavaScript für Desktop- und Mobilseiten</span></div>

<div class="column-container">
<div class="column-half">
<p>Falls Sie auf der Suche nach Informationen sind, wie man die Developer Tools von Firefox verwendet, sind Sie hier richtig – diese Seite stellt Links zu detaillierten Informationen über alle Kern-Werkzeuge und zusätzlichen Werkzeuge bereit, sowie zu weiteren Informationen, zum Beispiel wie man sich mit Firefox für Android verbindet und es debugged, wie man die Developer Tools erweitert, und wie man den Browser als Ganzes debugged.</p>

<p>Bitte erkunden Sie die Links in der Seitenleiste und weiter unten auf der Seite. Falls Sie Feedback oder Fragen zu den Developer Tools haben, schicken Sie uns Nachrichten auf unserer Mailingliste oder unserem IRC-Kanal (siehe die Community-Links am unteren Ende der Seite). Falls Sie hingegen Feedback oder Fragen zur Dokumentation haben, ist die <a href="https://discourse.mozilla.org/c/mdn">MDN Discourse-Seite</a> ein guter Ort dafür.</p>

<h2 id="Creating" name="Creating">Entwerfen</h2>

<p>Werkzeuge zum Erstellen von Webseiten und Web Apps.</p>

<dl>
 <dt><a href="/de/docs/Tools/Scratchpad" title="Tools/Scratchpad">JavaScript-Umgebung</a></dt>
 <dd>Ein Texteditor innerhalb Firefox zum Schreiben und Ausführen von JavaScript.</dd>
 <dt><a href="/de/docs/Tools/Style_Editor" title="Tools/Style_Editor">Stilbearbeitung</a></dt>
 <dd>Betrachten und bearbeiten von CSS-Styles der aktuellen Seite.</dd>
 <dt><a href="/de/docs/Tools/Shader_Editor">Shader Bearbeitung</a></dt>
 <dd>Ansehen und bearbeiten der <a href="/de/docs/Web/WebGL">WebGL</a> Vertex/Fragment Shaders.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Exploring" name="Exploring">Untersuchen und Debuggen</h2>

<p>Untersuchen, optimieren, entdecken und debuggen von Webseiten und Web Apps.</p>

<dl>
 <dt><a href="/de/docs/Tools/Web_Console" title="Tools/Web_Console">Web-Konsole</a></dt>
 <dd>Log-Nachrichten einer Webseite anschauen und mittels JavaScript mit der Seite interagieren.</dd>
 <dt><a href="/de/docs/Tools/Page_Inspector" title="Tools/Page_Inspector">Inspektor</a></dt>
 <dd>HTML und CSS einer Seite anschauen und verändern.</dd>
 <dt><a href="/de/docs/Tools/Debugger" title="Tools/Debugger">JavaScript Debugger</a></dt>
 <dd>JavaScript einer Seite stoppen, schrittweise laufen lassen, untersuchen und verändern.</dd>
 <dt><a href="/de/docs/Tools/Network_Monitor" title="Tools/Network_Monitor">Netzwerkanalyse</a></dt>
 <dd>Netzwerkanfragen beim Laden der Seite untersuchen.</dd>
 <dt><a href="/de/docs/Tools/GCLI" title="Developer Toolbar">Developer Toolbar</a></dt>
 <dd>Eine Kommandozeile für die Entwickler-Werkzeuge.</dd>
 <dt><a href="/de/docs/Tools/3D_View" title="Tools/3D_View">3D-Untersuchung</a></dt>
 <dd>3D-Visualisierung der Seite und deren Aufbau. Ganz einfach und übersichtlich.</dd>
</dl>
</div>
</div>

<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Mobile" name="Mobile">Mobilgeräte</h2>

<p>Hilfreiche und leistungsstarke Werkzeuge für die Entwicklung mit Mobilgeräten.</p>

<dl>
 <dt><a href="/de/Firefox_OS/Using_the_App_Manager" title="App Manager">App-Manager</a></dt>
 <dd>Designen und entwickeln von großartigen Apps für Firefox OS.</dd>
 <dt><a href="/de/docs/Tools/Firefox_OS_Simulator" title="Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt>
 <dd>Starten und debuggen Sie Ihre Firefox OS App auf dem Desktop, ohne ein echtes Firefox OS Handy zu benötigen. Dies spart Ihnen viel Zeit beim Entwickeln.</dd>
 <dt><a href="/de/docs/Tools/Responsive_Design_View" title="/de/docs/Tools/Responsive_Design_View">Reaktives Design</a></dt>
 <dd>Sehen Sie sich an, wie Ihre Webseite oder App in verschiedenen Browser-Größen dargestellt wird, ohne dass Sie die Größe Ihres Browser-Fensters verändern müssen.</dd>
 <dt><a href="/de/docs/Tools/Remote_Debugging/Firefox_for_Android" title="Firefox for Android">Firefox auf Android debuggen</a></dt>
 <dd>Verbinden Sie die Entwickler-Werkzeuge mit Firefox auf dem Android-Handy.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Performance" name="Performance">Performance</h2>

<p>Finden und beheben von Geschwindigkeitsproblemen.</p>

<dl>
 <dt><a href="/de/docs/Tools/Profiler" title="Tools/Profiler">JavaScript Profiler</a></dt>
 <dd>Finden Sie heraus, wo JavaScript Zeit benötigt, um den Code auszuführen. Optimieren Sie so Ihre Scripte.</dd>
 <dt><a href="/de/docs/Tools/Paint_Flashing_Tool" title="Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
 <dd>Hebt die neu gezeichneten Flächen einer Seite hervor.</dd>
 <dt><a href="/de/docs/Tools/Web_Konsole#DOM-Neuberechnungen" title="Reflow events">Reflow Event Logging</a></dt>
 <dd>Untersuchen von Reflow-Ereignissen in der Web-Konsole.</dd>
 <dt><a href="de/docs/Tools/netzwerkanalyse#Netzwerkanalyse_starten" title="Network performance">Laufzeitanalyse</a></dt>
 <dd>Untersuchen, wie lange Teile der Seite zum Laden brauchen.</dd>
</dl>
</div>
</div>

<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Den_Browser_debuggen">Den Browser debuggen</h2>

<p>Normalerweise werden die Entwickler-Werkzeuge für Webseiten oder Web Apps verwendet. Es gibt aber auch die Möglichkeit, den Browser als Ganzes zu untersuchen und zu debuggen. Das kann zum Beispiel für die Entwicklung des Browsers selbst oder von Add-ons nützlich sein.</p>

<dl>
 <dt><a href="/de/docs/Tools/Browser_Console" title="Browser Console">Browser Konsole</a></dt>
 <dd>Sehen Sie sich die Log-Nachrichten des Browsers selbst und von Add-ons an und führen Sie JavaScript-Code im Kontext des Browsers aus.</dd>
 <dt><a href="/de/docs/Tools/Browser_Toolbox" title="Browser Toolbox">Browser Toolbox</a></dt>
 <dd>Verbinden der Entwickler-Werkzeuge mit dem Browser.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Die_Entwickler-Werkzeuge_erweitern">Die Entwickler-Werkzeuge erweitern</h2>

<p>Die Entwickler-Werkzeuge sind so gebaut, dass es möglich ist, diese zu erweitern. Firefox Add-ons haben Zugriff auf die Entwickler-Werkzeuge und auf Komponenten zum Ausbau bestehender Tools sowie zum Hinzufügen neuer Tools. Mit dem Remote Debugging Protokoll ist es möglich, eigene Debugging-Clients und -Server zu entwickeln, um somit Webseiten mit den eigenen Tools zu debuggen.</p>

<dl>
 <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="Remote Debugging Protocol">Remote Debugging Protokoll</a></dt>
 <dd>Protokoll zur Verbindung der Entwickler-Werkzeuge mit einem Debugging-Ziel, wie zum Beispiel einer Instanz von Firefox oder einem Firefox OS.</dd>
 <dt><a href="/de/docs/Tools/Editor" title="Source Editor">Source Editor</a></dt>
 <dd>Ein eingebauter Code-Editor in Firefox, welcher in Ihr Add-on eingebunden werden kann.</dd>
</dl>
</div>
</div>

<hr>
<h2 id="Siehe_auch">Siehe auch</h2>

<p>Dieser Bereich stellt einige Ressourcen bereit, die nicht vom Mozilla Developer Tools Team zur Verfügung gestellt, von Webentwicklern jedoch viel genutzt werden. Es sind nur einige Firefox-Add-ons aufgelistet, eine komplette Liste befindet sich in der Kategorie <a href="https://addons.mozilla.org/de/firefox/extensions/web-development/">"Webentwicklung" auf addons.mozilla.org</a>.</p>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="https://www.getfirebug.com/" title="Firebug">Firebug</a></dt>
 <dd>Ein sehr bekanntes und mächtiges Werkzeug für Webentwickler mit einem JavaScript-Debugger, HTML und CSS Inspektor und Editor sowie einer Netzwerkanalyse.</dd>
 <dt><a href="/de/docs/DOM_Inspector" title="DOM_Inspector">DOM Inspector</a></dt>
 <dd>Untersuchen und bearbeiten des DOM von Webseiten oder XUL-Fenstern.</dd>
 <dt><a href="https://addons.mozilla.org/de/firefox/addon/web-developer/" title="Web-Developer">Web Developer</a></dt>
 <dd>Fügt ein Menü und eine Symbolleiste mit verschiedenen Entwickler-Werkzeugen zum Browser hinzu.</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="https://webmaker.org/de/tools/">Webmaker Tools</a></dt>
 <dd>Eine Reihe von Tools für Anfänger im Bereich der Webentwicklung.</dd>
 <dt><a href="http://www.w3.org/Status.html" title="W3C">W3C Validators</a></dt>
 <dd>Das W3C stellt einige Tools zur Überprüfung des Webseitencodes bereit. Zum Beispiel Gültigkeitsprüfungen für <a href="http://validator.w3.org/">HTML</a> und <a href="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
 <dt><a href="http://www.jshint.com/" title="JSHint">JSHint</a></dt>
 <dd>Analysiert JavaScript-Code.</dd>
</dl>
</div>
</div>