path: root/files/de/tools/debugger/index.html

---
title: Debugger
slug: Tools/Debugger
translation_of: Tools/Debugger
---
<div>{{ToolsSidebar}}</div>

<p>Der JavaScript Debugger ermöglicht es dir, schrittweise durch den JavaScript Code zu gehen und dabei seinen Zustand zu sehen und zu verändern, um Fehler im Code einfacher zu finden.</p>

<p>Man kann ihn benutzen, um Code lokal in Firefox zu debuggen, oder remote - zum Beispiel auf einem Firefox-OS-Gerät oder einem Firefox auf Android. In dieser Anleitung wird davon ausgegangen, dass du lokalen Code bearbeitest, aber das meiste trifft auch für das Remote-Debugging zu. Zu den Unterschieden siehe die <a href="/de/docs/Tools/Remote_Debugging">Anleitung zum Remote-Debugging</a>.</p>

<p>Um den Debugger zu öffnen, wählt man einfach "Debugger" aus dem Webentwickler-Untermenü von Firefox (oder im Werkzeuge-Menü, wenn die Menüleiste benutzt wird oder du auf Mac OS X arbeitest), oder indem man die Tastenkombination (das "Shortcut") <em>Control-Shift-S</em> (<em>Command-Option-S</em> auf Mac) auf der Tastatur drückt.</p>

<p>Die <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> erscheint am unteren Rand des Browserfensters. Als Standardeinstellung ist der Debugger aktiviert. So sieht sie aus, wenn sie zum ersten mal geöffnet wird:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5955/debugger-startup.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Und das ist die Ansicht während des Debugging-Prozesses:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5957/debugger-breakpoint-hit.png" style="display: block; margin-left: auto; margin-right: auto;">In dieser Anleitung werden wir uns zunächst kurz die Benutzeroberfläche des Debuggers ansehen und dann beschreiben, wie man einige häufig vorkommende Debuggingaufgaben durchführt.</p>

<h2 id="Die_Benutzeroberfläche_des_Debuggers"><a name="Benutzeroberfläche"></a>Die Benutzeroberfläche des Debuggers</h2>

<p>Die Benutzeroberfläche ("User Interface", UI) ist in vier Bereiche aufgeteilt, die wir uns nacheinander ansehen werden:</p>

<ul>
 <li>die Werkzeugleiste ("toolbar")</li>
 <li>die Quellcode-Dateiliste ("source list pane")</li>
 <li>der Quellcodebereich ("source pane")</li>
 <li>die Variablenliste ("variables pane")</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/5959/debugger-sections.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Die_Quellcode-Dateiliste"><a name="Quellcode-Dateiliste">Die Quellcode-Dateiliste</a></h3>

<p>Auf der linken Seite siehst du eine Liste mit allen JS-Quelldateien, die von der aktuellen Seite geladen wurden. Man kann jede davon auswählen, um sie zu debuggen.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5961/debugger-source-list-pane.png" style="display: block; margin-left: auto; margin-right: auto;">Die Quelldateien sind unter Überschriften eingeordnet, die angeben, von wo sie geladen wurden. Hier ein Beispiel für eine Quellcode-Dateiliste, wenn eine Seite von developer.mozilla.org geladen ist:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5965/debugger-source-list-pane-only.png" style="display: block; height: 275px; margin-left: auto; margin-right: auto; width: 250px;"></p>

<p>Die Dateinamen und Domains stimmen überein mit den folgenden <code>script</code>-Tags im Quellcode der Seite:</p>

<pre class="brush: html"><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">/en-US/jsi18n/build:8987063</a>"&gt;</span><span>&lt;/<span class="end-tag">script</span>&gt;</span><span>
</span><span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">https://login.persona.org/include.js</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"&gt;</span><span>&lt;/<span class="end-tag">script&gt;
<span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<span><a class="attribute-value">//mozorg.cdn.mozilla.net/en-US/</a>libs/jquery-1.7.1.min.js</span>" <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"&gt;</span><span>&lt;/<span class="end-tag">script&gt;</span></span></span></span>
<span>&lt;<span class="start-tag">script</span> <span class="attribute-name">src</span>="<a class="attribute-value">//mozorg.cdn.mozilla.net/en-US/tabzilla/tabzilla.js</a>" <span class="attribute-name">async</span>&gt;</span><span>&lt;/<span class="end-tag">script</span>&gt;</span></pre>

<p>In der Quellcode-Dateiliste kann man einfach eine der Dateien anklicken, um sie im Quellcodebereich anzeigen und untersuchen zu können.</p>

<p>Haltepunkte ("Breakpoints"), die man durch Klick neben eine Codezeile gesetzt hat, erscheinen unter dem Dateinamen.<img alt="" src="https://mdn.mozillademos.org/files/5967/debugger-breakpoints-set.png" style="display: block; margin-left: auto; margin-right: auto;">Mit der Checkbox kann man Breakpoints an- und ausschalten. Durch Rechts-Klick auf einen Brakepoint-Eintrag in der Liste kann man ein Kontextmenü anzeigen lassen, mit dem man</p>

<ul>
 <li>einzelne oder alle Haltepunkte aktivieren oder deaktivieren kann (oder alle Haltepunkte <em>bis auf</em> den angeklickten)</li>
 <li>Bedingungen ("conditions") definieren kann, unter denen die Ausführung an dieser Stelle unterbrochen werden soll (oder diese Bedingungen verändern, wenn sie bereits gesetzt sind)</li>
</ul>

<p>Durch Klick auf den "Augapfel" kann man das Verdecken ("black boxing") für eine bestimmte Quelle an- und abschalten (z.B. Sprünge in JavaScript-Bibliotheken verhindern). Mehr Informationen dazu findest du unter "<a href="#black-box-a-source" title="#black-box-a-source">Black box a source</a>".</p>

<h3 id="Quellcodebereich_2"><a name="Quellcodebereich">Quellcodebereich</a></h3>

<p>Hier wird die aktuell geladene JavaScript-Datei angezeigt. Haltepunkte ("Breakpoints", im Bild "Breakpoint Set") sind die blauen Kreise neben den Zeilennummern, während Haltepunkte, an der die Code-Ausführung aktuell gestoppt wurde, einen grünen Pfeil innerhalb des Kreises haben ("Breakpoint Hit"):</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5969/debugger-breakpoint-hit-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Im Quellcodebereich kann man über das Kontextmenü folgende Aufgaben erledigen:</p>

<ul>
 <li>Breakpoints setzen</li>
 <li>bedingte Breakpoints setzen</li>
 <li>einen Überwachungsausdruck für die Auswahl hinzufügen</li>
 <li>die <a href="#Skriptsuche">Skriptsuche</a> benutzen bzw. mit Hilfe eines solchen Filters suchen</li>
</ul>

<h3 id="Werkzeugleiste_2"><a name="Werkzeugleiste">Werkzeugleiste</a></h3>

<p>Die Werkzeugleiste ("toolbar") besteht aus vier Teilen:</p>

<ul>
 <li>eine Buttonleiste, mit der man die Bewegung durch das Script steuern kann (Pause/Weiter, Hineinspringen, Verlassen, Ausführen)</li>
 <li>eine Visualisierung des "Call stack" (Aufrufliste)</li>
 <li>der Scriptfilter</li>
 <li>Buttons, mit denen man die <a href="#Variablenliste">Variablenliste</a> und die Debugger-Einstellungen ein- und ausklappen kann</li>
</ul>

<p><img alt="" src="https://mdn.mozillademos.org/files/5733/debugger-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Die vier Buttons auf der linken Seite haben folgende Funktionen:</p>

<ul>
 <li><strong>Pause/Weiter</strong> (F6): Unterbricht die Skript-Ausführung bzw. setzt sie fort. Wenn der Schalter blau und "gedrückt" dargestellt wird wie oben, ist die Ausführung unterbrochen - entweder weil du selbst diesen Button gedrückt hast, oder weil sie an einem Breakpoint (Haltepunkt) angekommen ist. ("Pause/Resume<strong>"</strong>)</li>
 <li><strong>Ausführen</strong> (F7): Führt die aktuelle JavaScript-Codezeile aus und springt zur nächsten. ("Step over")</li>
 <li><strong>Hineinspringen</strong> (F8): Springt in die Funktion, die in der aktuellen JavaScript-Zeile aufgerufen wird. ("Step into")</li>
 <li><strong>Verlassen</strong> (Shift-F8): Lässt das Skript durchlaufen (und führt es aus), bis die aktuelle Funktion beendet ist. ("Step out")</li>
</ul>

<p>Die visuelle Darstellung des "Call stack" (Liste der Code-Unterbrechungen, an denen  eine Ebene tiefer in eine neue Funktion gesprungen wurde) zeigt die Liste aller Code-Stellen an denen Funktionsaufrufe zum aktuellen Breakpoint geführt haben. Über diese Liste kann man herausfinden, wie das Programm "an die aktuelle Stelle gekommen ist".</p>

<p>Durch Klick auf die Einträge wird im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> die Absprungstelle angezeigt und man kann nachvollziehen, von wo gesprungen wurde. Gleichzeitig werden in der <a href="#Variablenliste">Variablenliste</a> die Variablenwerte zum Zeitpunkt des jeweiligen Funktionsaufrufs anzeigt. Oft lässt sich dadurch herausfinden, ob und warum Parameter falsch übergeben wurden und wo der eigentliche Fehler aufgetreten ist. Auch wenn Funktionen von verschiedenen Stellen im Code aufgerufen werden, lässt sich über den Stack herausfinden, um welchen Fall es sich handelt.</p>

<h4 id="Skriptsuche_2"><a name="Skriptsuche"><strong>Skripts</strong>uche</a></h4>

<p>Mit der Skriptsuche ("script filter") kann man alle drei Debugger-Bereiche durchsuchen. Man kann dem Suchbegriff eines der folgenden Sonderzeichen voranstellen, um verschiedene Sonderfunktionen zu nutzen.</p>

<dl>
</dl>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Prefix</th>
   <th scope="col">Function</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>Nichts</td>
   <td>Skripte durchsuchen, die in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> angezeigt werden.</td>
  </tr>
  <tr>
   <td>!</td>
   <td>In sämtlichen Dateien nach dem Suchbegriff suchen.</td>
  </tr>
  <tr>
   <td>@</td>
   <td>Nur nach Funktions-Definitionen in allen Dateien suchen, die den Begriff enthalten.</td>
  </tr>
  <tr>
   <td>#</td>
   <td>Nur in der Datei, die aktuell im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> angezeigt wird, nach dem Begriff suchen.</td>
  </tr>
  <tr>
   <td>:</td>
   <td>Zu einer Zeilennummer springen (in der aktuell im<a href="#Quellcodebereich" title="#source-pane"> Quellcodebereich</a> angezeigten Datei).</td>
  </tr>
  <tr>
   <td>*</td>
   <td>Variablen durchsuchen, die in der <a href="#Variablenliste">Variablenliste</a> angezeigt werden.</td>
  </tr>
 </tbody>
</table>

<p>Diese Optionen werden in einem Popup angezeigt, wenn du in das Suchfeld klickst, und sie sind außerdem über das Kontextmenü im<a href="#Quellcodebereich" title="#source-pane"> Quellcodebereich</a> erreichbar. Die Sonderzeichen können auch kombiniert werden, um präzisere Suchen machen: "<em>file.js:12</em>" öffnet zum Beispiel file.js und springt in Zeile 12. "<em>mod#onLoad</em>" sucht in allen Dateien, die "mod" im Namen enthalten nach dem Begriff "onLoad". Mit der Return-/Enter-Taste kann von einem zum nächsten Ergebnis gesprungen werden.</p>

<h4 id="Debugger-Einstellungen"><a name="Einstellungen">Debugger-Einstellungen</a></h4>

<p>Am rechten Ende der Werkzeugleiste befinden sich zwei weitere Buttons. Der erste schaltet zwischen Ein- und Ausblenden der <a href="#Variablenliste">Variablenliste</a> hin und her. Mit dem zweiten kann man zwischen verschiedenen Debugger-Einstellungen umschalten:</p>

<p>With this option enabled, the debugger will automatically detect minified JS files and pretty-print them.</p>

<table class="standard-table">
 <tbody>
  <tr>
   <td>
    <p><strong>Auto Prettify Minified Sources</strong></p>
   </td>
   <td>Ist diese Option eingeschaltet, findet der Debugger automatisch minimierte JavaScript-Dateien und stellt sie in lesbarer Form dar.</td>
  </tr>
  <tr>
   <td>
    <p><strong>Pause bei Exceptions</strong></p>
   </td>
   <td>Skriptausführung automatisch unterbrechen, wenn eine JavaScript-Exception geworfen wird.</td>
  </tr>
  <tr>
   <td><strong>Ignore caught exceptions</strong></td>
   <td>
    <p>Wenn diese Einstellung gesetzt ist (Voreinstellung) und "Pause bei Exceptions" aktiviert ist, wird nur noch bei Fehlern unterbrochen, die nicht mit <code>try-catch</code> abgefangen werden. Diese Einstellung ist Standard, weil man davon ausgehen kann, dass abgefangene Exceptions im Programm ordnungsgemäß behandelt werden.</p>

    <div class="geckoVersionNote">
    <p>Neue Option in Firefox 26.</p>
    </div>
   </td>
  </tr>
  <tr>
   <td><strong>Show panes on startup</strong></td>
   <td>Wenn diese Option aktiviert ist, wird die <a href="#Variablenliste">Variablenliste</a> des Debuggers angezeigt, sobald der Debugger zum ersten mal aktiviert wird.</td>
  </tr>
  <tr>
   <td><strong>Show only enumerable properties</strong></td>
   <td>Enabling this option adds a "Filter variables" search box to the <a href="#variables-pane" title="#variables-pane">variables panel</a>, so that you can filter the displayed list of variables.</td>
  </tr>
  <tr>
   <td><strong>Show variables filter box</strong></td>
   <td>Do not display non-enumerable JavaScript properties</td>
  </tr>
  <tr>
   <td><strong>Show original sources</strong></td>
   <td>Enabling this option will make the debugger use <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, if they are available, to display the original source for code which has been combined, minified, or even compiled to JavaScript from a language like CoffeeScript.</td>
  </tr>
 </tbody>
</table>

<dl>
</dl>

<h3 id="Variablenliste_2"><a name="Variablenliste">Variablenliste</a></h3>

<p>In der Variablenliste kann man sehen, welche Werte die Variablen an einer bestimmten Stelle im Programm gerade haben - und man kann sie sogar für Versuche manuell verändern und das Skript dann weiterlaufen lassen:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5737/debugger-variables-pane.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h4 id="Variablenwerte_beobachten">Variablenwerte beobachten</h4>

<p>Die Variablen sind nach Geltungsbereich ("scope") gruppiert: im Funktions-Scope sieht man die (standardmäßig vorhandenen) Werte von <code>arguments</code> und <code>this</code> und lokale Variablen, die in der Funktion definiert wurden (im Beispiel: <code>user</code> und <code>greeting</code>).</p>

<p>Ähnlich verhält es sich mit globalen Variablen, die auf der obersten Ebene des JavaScript-Files (also nicht in Funktionen) definiert wurden - im Bild etwa <code>greetme</code>, aber auch standardmäßig vorhandene Variablen wie <code>localStorage</code> und <code>console</code>.</p>

<p>Objekte können mit dem kleinen Pfeil links von ihnen auf- und zugeklappt werden. Dadurch werden ihre Eigenschaften (und Funktionen) und deren Werte sichtbar.</p>

<p>Wenn man mit dem Cursor über die Variablen fährt, wird ein Tooltip mit weiteren Informationen angezeigt - bei Rollover über das <code>greeting</code>-Objekt wird zum Beispiel "<em><s>configurable</s> enumerable writable</em>" angezeigt. Weitere Details zur Bedeutung dieser Eigenschaften unter <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty"><code>Object.defineProperty()</code></a>.</p>

<p>Die angezeigten Variablen lassen sich filtern - entweder durch Nutzung des "*"-Modifiers in the <a href="#Skriptsuche">Skriptsuche</a>, oder durch Text-Eingabe des Filters (#,!,...) vor dem Suchbegriff im Suchfeld, wenn diese Option in den <a href="#Einstellungen">Debugger-Einstellungen</a> aktiviert wurde.</p>

<h4 id="Variablenwerte_verändern"><a name="Variablenwerte_veraendern">Variablenwerte verändern</a></h4>

<p>Variablenwerte können einfach manuell verändert werden, indem man auf die Werte klickt und einen anderen Wert eingibt. Wenn man etwa auf <code>"Hi, Dr. Nick!"</code> klickt, den Variablenwert von <code>greeting</code>, kann man die Begrüßung ändern und das Programm mit diesem Wert weiter arbeiten lassen.</p>

<h4 id="Überwachungsausdrücke"><a name="watch-expressions">Überwachungsausdrücke</a></h4>

<p>Überwachungsausdrücke sind Ausdrücke, die jedesmal ausgewertet werden, wenn die Code-Ausführung gestoppt wird. Mit Hilfe von Überwachungsausdrücken kann man sich einen Überblick über Werte verschaffen, die nicht direkt in der Variablenliste angezeigt werden - wie etwa bestimmte Eigenschaften eines Objekts, die für das Verständnis des Codeablaufs gerade erforderlich sind (siehe Beispiel <code>user.value</code> im Bild). Oder Variablen im Code, die nicht mit <code>var</code> deklariert wurden und daher vom Debugger nicht in der Liste angezeigt werden - oder Werte, die nur mit einer getter-Methode ausgelesen werden können (wie etwa <code>user.getValue("something")</code>) oder jQuery-Ausdrücke wie <code>$("div.myclass&gt;table")</code>.</p>

<p>Einfach auf "Überwachungsausdruck hinzufügen" über der Variablenliste klicken ("Add watch expression") und einen Ausdruck genauso eingeben, wie man es im Code an der aktuellen Stelle machen würde, um einen Wert zu erhalten. Dieser Wert wird dann, während man durch den Code geht, bei jedem Programm-Stop berechnet und wie die Werte der Variablen in der Liste angezeigt.<img alt="" src="https://mdn.mozillademos.org/files/5765/debugger-watch.png" style="display: block; margin-left: auto; margin-right: auto;">Auf diese Weise kann man beim Durchlaufen des Programmes dabei zusehen, wie bestimmte Werte sich ändern. In dem Moment, wo eine Veränderung stattfindet, wird der Überwachungsausdruck kurz gelb hinterlegt, so dass man die Änderungen auch aus dem Augenwinkel mitbekommt, während man den Programmcode liest.</p>

<p>Selbstverständlich kann man auch mehrere Ausdrücke gleichzeitig in der Liste überwachen. Um einen Ausdruck wieder zu entfernen, klickt man einfach auf das kleine "x", das rechts neben dem Überwachungsausdruck erscheint, wenn man mit dem Cursor darüber fährt.</p>

<h2 id="Wie_kann_ich...">Wie kann ich...?</h2>

<h3 id="den_Debugger_öffnen">den Debugger öffnen</h3>

<p>Einfach im Webentwickler-Submenü "Debugger" auswählen (oder in der Firefox-Menüleiste unter "Werkzeuge &gt; Webentwickler &gt; Debugger" klicken, falls du Mac OS X nutzt oder die Menüleiste eingeblendet hast). Alternativ auch mit <em>Control-Shift-S</em> (bzw. <em>Command-Option-S</em> auf Mac).</p>

<h3 id="eine_Quelldatei_finden">eine Quelldatei finden</h3>

<p>Quelldateien ("source files") sind leicht zu finden: Wenn der Debugger geöffnet ist, werden alle JavaScript Quelldateien ("source files") links in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> aufgelistet. Wenn die Liste zu lang ist, ist es of einfacher, die <a href="#Skriptsuche">Skriptsuche</a> oben rechts zu benutzen.</p>

<h3 id="Codestellen_in_einer_Datei_finden">Codestellen in einer Datei finden</h3>

<p>Um eine Funktion zu finden, nach einem Stichwort zu suchen oder in eine bestimmte Zeile im Code zu sprichen, der im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> geöffnet ist, kann man die Spezialfilter der <a href="#Skriptsuche">Skriptsuche</a> verwenden.</p>

<h3 id="Breakpoint_setzen">Breakpoint setzen</h3>

<p>Um einen Haltepunkt ("breakpoint") in einer Datei zu setzen, die im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> geöffnet ist:</p>

<ul>
 <li>etweder auf die Zeilennummer neben der Codezeile klicken, wo unterbrochen werden soll</li>
 <li>oder über der Codezeile selbst das Kontextmenü öffnen (Rechtsklick, Ctrl-Klick) und dort "Haltepunkt hinzufügen" wählen ("Add Breakpoint").</li>
</ul>

<p>Jeder Breakpoint wird an drei Stellen im Debugger angezeigt:</p>

<ul>
 <li>in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> unter dem Dateinamen</li>
 <li>die Zeile im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> ist neben den Zeilennummern mit einem blauen Kringel markiert</li>
 <li>die graue Leiste rechts neben der Quellcode-Scrollbar zeigt alle Haltepunkte als kleine blaue Kästchen (im Maßstab der Scrollbar, also auch aktuell im <a href="#Quellcodebereich" title="#source-pane">Quellcodebereich</a> nicht sichtbare Haltepunkte)</li>
</ul>

<p>In dem Screenshot unten siehst du Breakpoints in den Zeilen 7 und 65 der JavaScript-Datei:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5743/debugger-breakpoint-set-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Einen_bedingten_Breakpoint_setzen">Einen bedingten Breakpoint setzen</h3>

<p>Um einen bedingten Haltepunkt  ("conditional breakpoint") zu setzen, an dem nur in bestimmten Fällen unterbrochen werden soll, öffnet man in der betreffenden Zeile das Kontextmenü und wählt "Bedingten Haltepunkt hinzufügen" ("Add conditional breakpoint"). In dem Textfeld, das sich daraufhin öffnet, kann einfach ein Boolscher Ausdruck eingesetzt werden. Die Syntax ist genau die gleiche wie in der Klammer einer if-Anweisung:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5747/debugger-conditional-breakpoint.png" style="display: block; margin-left: auto; margin-right: auto;">Um die Haltebedingung ("condition") zu verändern oder einem "normalen" Breakpoint nachträglich eine Bedingung hinzuzufügen, kann einfach das Kontextmenü auf dem Breakpoint geöffnet werden und "Haltebedingung  hinzufügen" ("Configure conditional breakpoint") gewählt werden:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5749/debugger-configure-conditional-breakpoint.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Breakpoint_deaktivieren">Breakpoint deaktivieren</h3>

<p>Um einen Brakepoint außer Kraft zu setzen ("disable a breakpoint") ohne ihn zu löschen:</p>

<ul>
 <li>entweder: Häkchen in der Checkbox neben dem Breakpoint-Eintrag in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> entfernen</li>
 <li>oder: über das Kontextmenü über dem Eintrag in der <a href="#Quellcode-Dateiliste">Quellcodeliste</a> und dort "Haltepunkt deaktivieren" ("Disable breakpoint") klicken</li>
</ul>

<h3 id="Dem_Programmablauf_folgen">Dem Programmablauf folgen</h3>

<p>Wenn die Ausführung des Codes an einem Breakpoint gestoppt wird, kannst du Schritt für Schritt die Abarbeitung Programmzeilen und einzelner Befehle folgen. Dazu verwendet man die vier Buttons (Pause/Weiter, Hineinspringen, Verlassen, Ausführen) oben links in der <a href="#Werkzeugleiste">Werkzeugleiste</a> ("toolbar"):</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5769/debugger-stepping-through.png" style="display: block; margin-left: auto; margin-right: auto;">Die vier Buttons auf der linken Seite haben folgende Funktionen:</p>

<ul>
 <li><strong>Pause/Weiter</strong> (F6): Unterbricht die Skript-Ausführung bzw. setzt sie fort. Wenn der Schalter blau und "gedrückt" dargestellt wird wie oben, ist die Ausführung unterbrochen - entweder weil du selbst diesen Button gedrückt hast, oder weil sie an einem Breakpoint (Haltepunkt) angekommen ist. ("Pause/Resume<strong>"</strong>)</li>
 <li><strong>Ausführen</strong> (F7): Führt die aktuelle JavaScript-Codezeile aus und springt zur nächsten. ("Step over")</li>
 <li><strong>Hineinspringen</strong> (F8): Springt in die Funktion, die in der aktuellen JavaScript-Zeile aufgerufen wird. ("Step into")</li>
 <li><strong>Verlassen</strong> (Shift-F8): Lässt das Skript durchlaufen (und führt es aus), bis die aktuelle Funktion beendet ist. ("Step out")</li>
</ul>

<h3 id="Source_Maps">Source Maps</h3>

<p>JavaScript-Quellcode wird oft aus mehreren Dateien zusammengefasst und das Ergebnis wird "minified" (komprimiert), um Serverbelastung und Ladezeiten zu optimieren. Immer häufiger ist das geladene JavaScript auch Maschinen-generiert, zum Beispiel aus Sprachen wie CoffeeScript.</p>

<p>Durch die Nutzung von <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/" title="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">source maps</a>, kann der Debugger den gerade ausgeführten Code auf JS-Dateien "mappen", die für Menschen bequemer lesbar sind - also die entsprechenden Stellen in den Menschen-lesbaren Dateien anzeigen, was das Debuggen sehr erleichtert.</p>

<p>Dazu muss man dem Debugger mitteilen, dass es solche Source maps zum verwendeten Code gibt, indem man in den <a href="#Einstellungen">Debugger-Einstellungen</a> (Zahnrad-Icon oben rechts) auf "Originalquellen anzeigen" klickt ("Show original sources"):<img alt="" src="https://mdn.mozillademos.org/files/5763/debugger-show-original-sources.png" style="display: block; margin-left: auto; margin-right: auto;">Damit das funktioniert, muss man in der Quelldatei eine Mapping-URL in einem Kommentar angegeben haben, der dem Debugger sagt, wo sich die alternativen Dateien befinden. Ein solcher Kommentar in der JavaScript-Datei sollte folgendermaßen aussehen:</p>

<p><code>//@ sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></p>

<h3 id="Variablenwerte_prüfen">Variablenwerte prüfen</h3>

<p>Wenn der Debugger an einem Haltepunkt ("breakpoint") die Programm-Ausführung unterbricht, kann man sich die aktuellen Werte der Variablen an dieser Stelle im Code ansehen. Sie werden rechts in der <a href="#Variablenliste">Variablenliste</a> angezeigt:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5737/debugger-variables-pane.png" style="display: block; margin-left: auto; margin-right: auto;">Rechts befindet sich die <a href="#Variablenliste">Variablenliste</a>. Die Variablen werden in Blöcken nach Geltungsbereichen ("scopes") gefiltert angezeigt. Obje können ausgeklappt werden, wenn man einzelne Eigenschaften sehen möchte (siehe <a href="#Variablenliste">Variablenwerte</a> oben). Auch über ein "*" am Beginn des <a href="#Skriptsuche">Skriptsuche</a>-Eingabefelds ("filter expression") kann die Anzeige der Variablen gefiltert werden:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5767/debugger-filter-variables.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Variablen_andere_Werte_zuweisen">Variablen andere Werte zuweisen</h3>

<p>Wenn die Ausführung des Codes an einem Breakpoint ("Haltepunkt") unterbrochen wurde, können die Werte in der <a href="#Variablenwerte_veraendern">Variablenanzeige</a> des Debuggers verändert werden. Einfach auf den aktuellen Variablenwert klicken - der Wert wird zu einem Eingabefeld und kann sofort geändert werden:<img alt="" src="https://mdn.mozillademos.org/files/5761/debugger-modify-variable.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<h3 id="Einen_Ausdruck_beobachten">Einen Ausdruck beobachten</h3>

<p>Sie können den Wert eines Javascript-Ausdrucks mit der Funktion "Ausdruck beobachten" in der Variablenleiste beobachten.</p>

<h3 id="Mobile_Geräte_debuggen">Mobile Geräte debuggen</h3>

<p>Das debuggen von mobilen Geräten wird in <a href="/en-US/docs/Tools/Remote_Debugging" title="/en-US/docs/Tools/Remote_Debugging">remote debugging </a>behandelt.</p>

<h3 id="Verstecken_von_Quelldateien_(Black_boxing)"><a name="black-box-a-source">Verstecken von Quelldateien ("Black boxing")</a></h3>

<p>Viele Webseiten und Programme nutzen heute Frameworks wie <a href="http://jquery.com/">jQuery</a>, <a href="http://emberjs.com/">Ember</a> oder <a href="http://angularjs.org/">Angular</a> und zu 99% kann man einfach davon ausgehen, dass deren Code funktioniert. Die Interna dieser Bibliotheken wollen wir beim Debuggen meistens nicht sehen - wir verstecken sie und behandeln sie als <a href="http://en.wikipedia.org/wiki/Black_box">Black box</a>. Durch Black boxing entfällt das leidige Eintauchen in Bibliothek-Dateien (zum Beispiel bei each-Schleifen oder dem Auslösen von Events) und wir können uns auf unseren eigentlichen Code konzentrieren.</p>

<dl>
 <dt style="text-align: center;"><img alt="How to blackbox a source" src="https://mdn.mozillademos.org/files/6279/debugger-blackbox.png" style="display: block; margin-left: auto; margin-right: auto;"></dt>
</dl>

<p>Black boxing kann auch man für einzelne Dateien ein- und ausschalten, indem man auf das Breakpoint-Symbol (<em>"eyeball"</em>: Augapfel) links neben der Quelldatei in der Liste klickt. Viele Quellen können auch versteckt werden, indem man in der Entwickler-Toolbar (Shift + F2) den <code>blackbox</code>-Befehl benutzt:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5997/command.png" style="display: block; height: 48px; margin-left: auto; margin-right: auto; width: 537px;">Wenn eine Code-Datei versteckt ist:</p>

<ul>
 <li>... werden alle Haltepunkte in dieser Quelldatei deaktiviert.</li>
 <li>... lässt der Debugger diesen Code auch beim schrittweisen Durchlaufen des Codes ("stepping") aus.</li>
 <li>Wenn "Unterbrechung bei Exceptions" (<a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/Settings">"pause on exceptions"</a>) eingeschaltet ist, hält der Debugger nicht an, wenn ein Fehler in einer versteckten ("black boxed") Quelldatei geworfen wird - stattdessen wartet er, bis (und: ob) er in der Aufrufliste ("call stack") an einen nicht versteckten Punkt zurück kommt.</li>
</ul>

<h3 id="Browser-Add-Ons_debuggen">Browser-Add-Ons debuggen</h3>

<p>Im Chrome Umfeld gibt es die folgenden Debug-Möglichkeiten:</p>

<p>chrome://browser/content/debugger.xul oder</p>

<p>in Version 23 beta, chrome://browser/content/devtools/debugger.xul:</p>

<ul>
 <li>window.addEventListener("Debugger:EditorLoaded") - wird nach dem Laden des read-only script panel aufgerufen.</li>
 <li>window.addEventListener("Debugger:EditorUnloaded")</li>
</ul>

<p>Zugehörige Dateien:</p>

<ul>
 <li>chrome://browser/content/devtools/debugger-controller.js</li>
 <li>chrome://browser/content/devtools/debugger-toolbar.js</li>
 <li>chrome://browser/content/devtools/debugger-view.js</li>
 <li>chrome://browser/content/devtools/debugger-panes.js</li>
</ul>

<p>Unglücklicherweise gibt es bis jetzt noch keine API um Ausdrücke im Debug-Bereich auszuwerten oder um Seitenelemente zu markieren die durch Variablen im Debug-Bereich referenziert werden. (Ist im Moment in Arbeit, siehe auch Bug-Meldung <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=653545" title="https://bugzilla.mozilla.org/show_bug.cgi?id=653545">653545</a>.)</p>

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

<ul>
 <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="/en-US/docs/Mozilla/Firefox_OS/Debugging">Debugging on Firefox OS</a></li>
 <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote debugging protocol</a></li>
 <li><a href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/" title="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/">Remote Debugging on Firefox for Android</a> (blog post)</li>
</ul>