Was sind Browser-Entwicklerwerkzeuge?

So öffnen Sie die Entwicklerwerkzeuge in Ihrem Browser

Die Entwicklerwerkzeuge werden in einem Teilfenster Ihres Browsers angezeigt. Je nach Browser sieht es ungefähr so aus:

Es gibt drei Möglichkeiten, sie zu öffnen:

• Tastatur:

  • Windows: Ctrl + Shift + I oder F12
  • macOS: ⌘ + ⌥ + I

• Menüleiste:

  • Firefox: Menü (☰) ➤ Weitere Werkzeuge ➤ Web-Entwicklerwerkzeuge

  • Chrome: Weitere Tools ➤ Entwicklertools

  • Opera: Entwickler ➤ Entwicklerwerkzeuge

  • Safari: Entwickler ➤ Web-Inspektor einblenden.

    Hinweis: Die Entwicklerwerkzeuge von Safari sind standardmäßig nicht aktiviert. Um sie zu aktivieren, gehen Sie zu Safari ➤ Einstellungen ➤ Erweitert und aktivieren Sie das Kontrollkästchen Menü „Entwickler“ in der Menüleiste anzeigen oder Funktionen für Webentwickler aktivieren.

• Kontextmenü: Halten Sie ein Element auf einer Webseite gedrückt oder klicken Sie mit der rechten Maustaste darauf (auf dem Mac: Ctrl-Klick) und wählen Sie im angezeigten Kontextmenü Element untersuchen. (Ein zusätzlicher Vorteil: Bei dieser Methode wird der Code des angeklickten Elements sofort hervorgehoben.)

Der Inspektor: DOM-Explorer und CSS-Editor

Die Entwicklerwerkzeuge öffnen sich normalerweise standardmäßig mit dem Inspektor, der ungefähr wie im folgenden Screenshot aussieht. Dieses Werkzeug zeigt, wie das HTML Ihrer Seite zur Laufzeit aussieht und welches CSS auf die einzelnen Elemente der Seite angewendet wird. Sie können damit auch HTML und CSS unmittelbar ändern und die Auswirkungen Ihrer Änderungen live im Ansichtsbereich des Browsers sehen.

Wenn Sie den Inspektor nicht sehen:

• Firefox: Wählen Sie den Tab Inspektor.
• Andere Browser: Wählen Sie den Tab Elemente.

Den DOM-Inspektor erkunden

Klicken Sie zunächst im DOM-Inspektor mit der rechten Maustaste auf ein HTML-Element (oder verwenden Sie einen Ctrl-Klick) und sehen Sie sich das Kontextmenü an. Die verfügbaren Menüoptionen unterscheiden sich je nach Browser, die wichtigsten sind jedoch weitgehend gleich:

• Knoten löschen (manchmal Element löschen). Löscht das aktuelle Element.
• Als HTML bearbeiten (manchmal Attribut hinzufügen/Text bearbeiten). Ermöglicht es Ihnen, das HTML zu ändern und die Ergebnisse sofort zu sehen. Das ist besonders nützlich beim Debuggen und Testen.
• :hover/:active/:focus. Erzwingt die Aktivierung von Elementzuständen, damit Sie sehen können, wie die jeweiligen Stile aussehen würden.
• Kopieren/Als HTML kopieren. Kopiert das aktuell ausgewählte HTML.
• In einigen Browsern stehen auch CSS-Pfad kopieren und XPath kopieren zur Verfügung. Damit können Sie den CSS-Selektor oder den XPath-Ausdruck kopieren, der das aktuelle HTML-Element auswählt.

Versuchen Sie nun, etwas in Ihrem DOM zu bearbeiten. Doppelklicken Sie auf ein Element oder klicken Sie mit der rechten Maustaste darauf und wählen Sie im Kontextmenü Als HTML bearbeiten. Sie können beliebige Änderungen vornehmen, diese aber nicht speichern.

Den CSS-Editor erkunden

Standardmäßig zeigt der CSS-Editor die CSS-Regeln an, die auf das aktuell ausgewählte Element angewendet werden:

Die folgenden Funktionen sind besonders praktisch:

• Die auf das aktuelle Element angewendeten Regeln werden von der höchsten zur niedrigsten Spezifität angezeigt.
• Klicken Sie auf die Kontrollkästchen neben den einzelnen Deklarationen, um zu sehen, was passieren würde, wenn Sie sie entfernen.
• Klicken Sie auf den kleinen Pfeil neben einer Kurzschreibweisen-Eigenschaft, um die entsprechenden Einzeleigenschaften anzuzeigen.
• Klicken Sie auf einen Eigenschaftsnamen oder -wert, um ein Textfeld zu öffnen. Dort können Sie einen neuen Wert eingeben und die Stiländerung direkt in der Vorschau sehen.
• Neben jeder Regel stehen der Dateiname und die Zeilennummer, an der sie definiert ist. Wenn Sie darauf klicken, zeigen die Entwicklerwerkzeuge die Regel in einer eigenen Ansicht an, in der sie sich normalerweise bearbeiten und speichern lässt.
• Sie können auch auf die schließende geschweifte Klammer einer Regel klicken, um in einer neuen Zeile ein Textfeld zu öffnen. Dort können Sie eine völlig neue Deklaration für Ihre Seite schreiben.

Oben in der CSS-Ansicht sehen Sie mehrere anklickbare Tabs:

• Berechnet: Zeigt die berechneten Stile für das aktuell ausgewählte Element an (die endgültigen, normalisierten Werte, die der Browser anwendet).
• Layout: Zeigt Details zu den CSS-Layoutmodi Grid und Flexbox an, sofern das untersuchte Element sie verwendet.
• Schriftarten: In Firefox und Safari zeigt der Tab Schriftarten die auf das aktuelle Element angewendeten Schriftarten an.

Die Boxmodell-Ansicht stellt das Boxmodell des aktuellen Elements grafisch dar. So können Sie auf einen Blick erkennen, welche Innenabstände, Rahmen und Außenabstände angewendet werden und wie groß der Inhalt ist. In Firefox befindet sich diese Ansicht im Tab Layout, in anderen Browsern im Tab Berechnet.

In einigen Browsern können Sie in diesem Bereich auch JavaScript-Details zum ausgewählten Element ansehen. In Safari sind diese im Tab Node zusammengefasst, während sie in Chrome, Opera und Edge auf separate Tabs verteilt sind.

• Properties: Die Eigenschaften des Elementobjekts.
• Event Listeners: Die mit dem Element verknüpften Ereignisse.

Weitere Informationen

Weitere Informationen zum Inspektor in verschiedenen Browsern:

• Seiteninspektor von Firefox
• DOM-Inspektor von Chrome (der Inspektor von Opera und Edge ist identisch)
• Elements-Tab von Safari

Der JavaScript-Debugger

Mit dem JavaScript-Debugger können Sie die Werte von Variablen beobachten und Breakpoints setzen. Das sind Stellen in Ihrem Code, an denen Sie die Ausführung anhalten können, um Probleme zu finden, die verhindern, dass Ihr Code korrekt ausgeführt wird.

So öffnen Sie den Debugger:

• Firefox: Öffnen Sie die Entwicklerwerkzeuge und wählen Sie den Tab Debugger.
• Andere Browser: Öffnen Sie die Entwicklerwerkzeuge und wählen Sie den Tab Sources.

Den Debugger erkunden

Der JavaScript-Debugger ist in jedem Browser in drei Bereiche unterteilt. Deren Anordnung unterscheidet sich je nach Browser; dieser Leitfaden verwendet Firefox als Referenz.

Dateiliste

Der erste Bereich links enthält eine Liste der Dateien, die mit der Seite verknüpft sind, die Sie debuggen. Wählen Sie daraus die Datei aus, mit der Sie arbeiten möchten. Klicken Sie auf eine Datei, um sie auszuwählen und ihren Inhalt im mittleren Bereich des Debuggers anzuzeigen.

Quellcode

Setzen Sie Breakpoints an den Stellen, an denen Sie die Ausführung anhalten möchten. Im folgenden Bild zeigt die Hervorhebung der Zahl 18, dass in dieser Zeile ein Breakpoint gesetzt ist.

Überwachungsausdrücke und Breakpoints

Der rechte Bereich zeigt eine Liste der Überwachungsausdrücke, die Sie hinzugefügt haben, und der Breakpoints, die Sie gesetzt haben.

Im Bild zeigt der erste Abschnitt, Überwachungsausdrücke, dass die Variable listItems hinzugefügt wurde. Sie können die Liste aufklappen, um die Werte im Array anzuzeigen.

Der nächste Abschnitt, Breakpoints, listet die auf der Seite gesetzten Breakpoints auf. In example.js wurde ein Breakpoint für die Anweisung listItems.push(inputNewItem.value); gesetzt.

Die letzten beiden Abschnitte erscheinen nur, während der Code ausgeführt wird.

Der Abschnitt Aufrufstapel zeigt, welcher Code ausgeführt wurde, um zur aktuellen Zeile zu gelangen. Sie können sehen, dass sich der Code in der Funktion befindet, die einen Mausklick verarbeitet, und dass er momentan am Breakpoint angehalten ist.

Der letzte Abschnitt, Gültigkeitsbereiche, zeigt, welche Werte an verschiedenen Stellen Ihres Codes sichtbar sind. Im folgenden Bild sehen Sie beispielsweise die Objekte, die dem Code in der Funktion addItemClick zur Verfügung stehen.

Weitere Informationen

Weitere Informationen zum JavaScript-Debugger in verschiedenen Browsern:

• JavaScript-Debugger von Firefox
• Debugger von Chrome (der Debugger von Opera und Edge ist identisch)
• Sources-Tab von Safari

Die JavaScript-Konsole

Die JavaScript-Konsole ist ein äußerst nützliches Werkzeug, um JavaScript zu debuggen, das nicht wie erwartet funktioniert. Sie können damit JavaScript-Anweisungen für die aktuell im Browser geladene Seite ausführen. Außerdem zeigt sie Fehler an, die auftreten, wenn der Browser versucht, Ihren Code auszuführen.

Um die Konsole in einem beliebigen Browser zu öffnen, öffnen Sie die Entwicklerwerkzeuge und wählen Sie den Tab Konsole. Daraufhin sehen Sie ein Fenster wie dieses:

Um zu sehen, was passiert, geben Sie die folgenden Codeausschnitte nacheinander in die Konsole ein und drücken Sie jeweils die Eingabetaste:

alert("hello!");

document.querySelector("html").style.backgroundColor = "purple";

const loginImage = document.createElement("img");
loginImage.setAttribute(
  "src",
  "https://mdn.github.io/shared-assets/images/examples/login-button.png",
);
document.querySelector("h1").appendChild(loginImage);

Geben Sie nun die folgenden fehlerhaften Versionen des Codes ein und sehen Sie sich an, was passiert.

alert("hello!);

document.cheeseSelector("html").style.backgroundColor = "purple";

const loginImage = document.createElement("img");
banana.setAttribute(
  "src",
  "https://mdn.github.io/shared-assets/images/examples/login-button.png",
);
document.querySelector("h1").appendChild(loginImage);

Sie werden nun sehen, welche Arten von Fehlern der Browser meldet. Diese Fehlermeldungen sind oft recht kryptisch, aber die Probleme sollten sich dennoch relativ leicht herausfinden lassen!

Weitere Informationen

Weitere Informationen zur JavaScript-Konsole in verschiedenen Browsern:

• Web-Konsole von Firefox
• JavaScript-Konsole von Chrome (die Konsole von Opera und Edge ist identisch)
• Console Object API von Safari und Console Command Line API

Siehe auch

• HTML debuggen
• CSS debuggen