Was sind Entwicklerwerkzeuge im Browser?

Die Entwicklerwerkzeuge befinden sich in einem Unterfenster Ihres Browsers, das je nach verwendetem Browser etwa so aussieht:

Wie rufen Sie es auf? Drei Wege:

• Tastatur:

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

• Menüleiste:

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

  • Chrome: Weitere Tools ➤ Entwicklerwerkzeuge

  • Opera: Entwickler ➤ Entwicklerwerkzeuge

  • Safari: Entwickeln ➤ Web-Inspektor anzeigen.

    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ü "Entwickeln" in der Menüleiste anzeigen oder Funktionen für Webentwickler aktivieren.

• Kontextmenü: Drücken und halten/rechtsklicken Sie ein Element auf einer Webseite (Ctrl-Klick auf dem Mac) und wählen Sie Element untersuchen aus dem angezeigten Kontextmenü. (Ein zusätzlicher Bonus: Mit dieser Methode wird direkt der Code des angeklickten Elements hervorgehoben.)

Die Entwicklerwerkzeuge öffnen sich normalerweise standardmäßig mit dem Inspektor, der etwa wie der folgende Screenshot aussieht. Dieses Tool zeigt, wie das HTML Ihrer Seite zur Laufzeit aussieht und welches CSS auf jedes Element der Seite angewendet wird. Es ermöglicht Ihnen auch, das HTML und CSS sofort zu ändern und die Ergebnisse Ihrer Änderungen direkt im Browser-Viewport zu sehen.

Wenn Sie den Inspektor nicht sehen,

• Firefox: Wählen Sie die Inspector-Registerkarte.
• Andere Browser: Wählen Sie die Elements-Registerkarte.

Zunächst klicken Sie mit der rechten Maustaste (Ctrl-Klick) auf ein HTML-Element im DOM-Inspektor und schauen Sie sich das Kontextmenü an. Die verfügbaren Menüoptionen variieren zwischen den Browsern, aber die wichtigen sind meistens dieselben:

• Delete Node (manchmal Delete Element). Löscht das aktuelle Element.
• Edit as HTML (manchmal Attribut hinzufügen/Text bearbeiten). Lässt Sie das HTML ändern und die Ergebnisse sofort sehen. Sehr nützlich zum Debuggen und Testen.
• :hover/:active/:focus. Erzwingt Zustandsänderungen auf Elementen, sodass Sie sehen können, wie ihre Stile dann aussehen würden.
• Copy/Copy as HTML. Kopiert das aktuell ausgewählte HTML.
• Einige Browser haben auch Copy CSS Path und Copy XPath verfügbar, um den CSS-Selektor oder das XPath-Ausdruck zu kopieren, das das aktuelle HTML-Element auswählen würde.

Versuchen Sie nun, einige Ihrer DOM-Elemente zu bearbeiten. Doppelklicken Sie auf ein Element oder klicken Sie mit der rechten Maustaste darauf und wählen Sie Edit as HTML aus dem Kontextmenü. Sie können beliebige Änderungen vornehmen, diese jedoch nicht speichern.

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

Diese Funktionen sind besonders praktisch:

• Die Regeln, die auf das aktuelle Element angewendet werden, werden in der Reihenfolge von am speziellsten zu am wenigsten spezifisch angezeigt.
• Klicken Sie die Kontrollkästchen neben jeder Deklaration an, um zu sehen, was passieren würde, wenn Sie die Deklaration entfernen.
• Klicken Sie auf den kleinen Pfeil neben jeder Kurzform-Eigenschaft, um die Langform-Entsprechungen der Eigenschaft anzuzeigen.
• Klicken Sie auf einen Eigenschaftsnamen oder Wert, um ein Textfeld aufzurufen, in dem Sie einen neuen Wert eingeben können, um eine Live-Vorschau einer Stiländerung zu erhalten.
• Neben jeder Regel steht der Dateiname und die Zeilennummer, in der die Regel definiert ist. Durch Klicken auf diese Regel springt das Entwicklerwerkzeug zu dieser Regel in seiner eigenen Ansicht, wo sie normalerweise bearbeitet und gespeichert werden kann.
• Sie können auch auf die schließende geschweifte Klammer einer Regel klicken, um auf einer neuen Zeile ein Textfeld aufzurufen, in dem Sie eine völlig neue Deklaration für Ihre Seite schreiben können.

Oben im CSS-Viewer sehen Sie eine Reihe von klickbaren Registerkarten:

• Computed: Zeigt die berechneten Stile für das aktuell ausgewählte Element an (die endgültigen, normalisierten Werte, die der Browser anwendet).
• Layout: Zeigt die Details für CSS Grid und Flexbox Layout-Modi an, wenn das Element, das Sie untersuchen, diese verwendet.
• Fonts: In Firefox und Safari zeigt die Registerkarte Fonts die Schriften an, die auf das aktuelle Element angewendet werden.

Die Box-Modell-Ansicht stellt visuell das aktuelle Box-Modell des Elements dar, sodass Sie auf einen Blick sehen können, welche Polsterung, Rand und Einfassung darauf angewendet ist und wie groß ihr Inhalt ist. In Firefox befindet sich dies in der Registerkarte Layout, in anderen Browsern in der Registerkarte Computed.

In einigen Browsern können auch die JavaScript-Details des ausgewählten Elements in diesem Panel angezeigt werden. In Safari sind diese unter der Registerkarte Node zusammengefasst, in anderen Browsern wie Chrome, Opera und Edge in separaten Registerkarten.

• Properties: Die Eigenschaften des Elementobjekts.
• Event Listeners: Die Ereignisse, die mit dem Element verknüpft sind.

Erfahren Sie mehr über den Inspektor in verschiedenen Browsern:

• Firefox Page inspector
• Chrome DOM inspector (Der Inspektor von Opera und Edge ist derselbe)
• Safari Elements tab

Der JavaScript-Debugger ermöglicht es Ihnen, den Wert von Variablen zu beobachten und Breakpoints zu setzen, Stellen in Ihrem Code, an denen Sie die Ausführung pausieren wollen, um die Probleme zu identifizieren, die Ihre Codeausführung behindern.

Um zum Debugger zu gelangen:

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

Der JavaScript-Debugger jedes Browsers ist in drei Bereiche unterteilt. Das Layout dieser Bereiche variiert je nach verwendetem Browser; dieser Leitfaden verwendet Firefox als Referenz.

Dateiliste

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

Quellcode

Setzen Sie Breakpoints, an denen Sie die Ausführung pausieren möchten. Im folgenden Bild zeigt die Hervorhebung auf Nummer 18, dass auf der Zeile ein Breakpoint gesetzt ist.

Überwachungsausdrücke und Breakpoints

Der rechte Bereich zeigt eine Liste der von Ihnen hinzugefügten Überwachungsausdrücke und gesetzten Breakpoints.

Im Bild zeigt der erste Abschnitt, Überwachungsausdrücke, dass die Variable listItems hinzugefügt wurde. Sie können die Liste erweitern, 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 bei der Anweisung listItems.push(inputNewItem.value); gesetzt.

Die letzten beiden Abschnitte erscheinen nur, wenn der Code ausgeführt wird.

Der Call stack-Abschnitt zeigt Ihnen, 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 der Code derzeit am Breakpoint pausiert ist.

Der letzte Abschnitt, Scopes, zeigt, welche Werte von verschiedenen Punkten in Ihrem Code aus sichtbar sind. Zum Beispiel können Sie im folgenden Bild die Objekte sehen, die dem Code in der addItemClick-Funktion zur Verfügung stehen.

Erfahren Sie mehr über den JavaScript-Debugger in verschiedenen Browsern:

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

Die JavaScript-Konsole ist ein unglaublich nützliches Werkzeug zum Debuggen von JavaScript, das nicht wie erwartet funktioniert. Sie ermöglicht es Ihnen, JavaScript-Zeilen gegen die aktuell im Browser geladene Seite auszuführen und berichtet die Fehler, die auftauchen, während der Browser versucht, Ihren Code auszuführen.

Um auf die Konsole in jedem Browser zuzugreifen, öffnen Sie die Entwicklerwerkzeuge und wählen Sie die Registerkarte Console. Dies gibt Ihnen ein Fenster, das wie folgt aussieht:

Um zu sehen, was passiert, versuchen Sie die folgenden Code-Snippets nacheinander in die Konsole einzugeben (und drücken Sie dann Enter):

alert("hello!");

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

const loginImage = document.createElement("img");
loginImage.setAttribute(
  "src",
  "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",
);
document.querySelector("h1").appendChild(loginImage);

Versuchen Sie nun, die folgenden fehlerhaften Versionen des Codes einzugeben und sehen Sie, was Sie erhalten.

alert("hello!);

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

const loginImage = document.createElement("img");
banana.setAttribute(
  "src",
  "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",
);
document.querySelector("h1").appendChild(loginImage);

Sie werden beginnen, die Art von Fehlern zu sehen, die der Browser zurückgibt. Oft sind diese Fehler ziemlich kryptisch, aber es sollte relativ einfach sein, diese Probleme zu lösen!

Erfahren Sie mehr über die JavaScript-Konsole in verschiedenen Browsern:

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

• Debugging HTML
• Debugging CSS