Was sind Browser-Entwicklertools?

Die Entwicklertools befinden sich in einem Unterfenster Ihres Browsers und sehen ungefähr so aus, je nachdem, welchen Browser Sie verwenden:

Wie rufen Sie es auf? Es gibt drei Möglichkeiten:

• Tastenkombinationen:

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

• Menüleiste:

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

  • Chrome: Weitere Werkzeuge ➤ Entwicklertools

  • Opera: Entwickler ➤ Entwicklertools

  • Safari: Entwickeln ➤ Web-Inspektor anzeigen.

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

• Kontextmenü: Halten Sie einen Gegenstand auf einer Webseite gedrückt oder klicken Sie mit der rechten Maustaste (Ctrl-Klick auf dem Mac) und wählen Sie Element untersuchen aus dem erscheinenden Kontextmenü. (Ein zusätzlicher Vorteil: Mit dieser Methode wird gleich der Code des Elements hervorgehoben, auf das Sie geklickt haben.)

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

Falls Sie den Inspektor nicht sehen,

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

Zunächst einmal 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:

• Knoten löschen (manchmal Element löschen). Löscht das aktuelle Element.
• Als HTML bearbeiten (manchmal Attribut hinzufügen/Text bearbeiten). Ermöglicht das Ändern von HTML und das sofortige Betrachten der Ergebnisse. Sehr nützlich zum Debuggen und Testen.
• :hover/:active/:focus. Erzwingt, dass Elementzustände aktiviert werden, damit Sie sehen, wie deren Stylings aussehen würden.
• Kopieren/Kopieren als HTML. Kopiert das aktuell ausgewählte HTML.
• Einige Browser bieten auch CSS-Pfad kopieren und XPath kopieren an, um Ihnen zu ermöglichen, den CSS-Selektor oder den XPath-Ausdruck zu kopieren, der das aktuelle HTML-Element auswählen würde.

Versuchen Sie jetzt, etwas in Ihrem DOM zu bearbeiten. Doppelklicken Sie auf ein Element oder klicken Sie mit der rechten Maustaste darauf und wählen Sie Als HTML bearbeiten aus dem Kontextmenü. Sie können beliebige Änderungen vornehmen, aber Sie können Ihre Änderungen 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 spezifisch bis weniger spezifisch angezeigt.
• Klicken Sie auf die Kontrollkästchen neben jeder Deklaration, um zu sehen, was passieren würde, wenn Sie die Deklaration entfernen.
• Klicken Sie auf den kleinen Pfeil neben jeder Kurzschreibweise, um die ausführlichen Äquivalente 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. Wenn Sie auf diese Regel klicken, springen die Entwicklertools zu einer Ansicht, in der sie bearbeitet und gespeichert werden kann.
• Sie können auch auf die schließende geschweifte Klammer einer Regel klicken, um ein Textfeld in einer neuen Zeile aufzurufen, in dem Sie eine vollständig neue Deklaration für Ihre Seite schreiben können.

Sie werden eine Reihe von anklickbaren Registerkarten am oberen Rand des CSS-Viewers bemerken:

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

Die Boxmodell-Ansicht stellt das aktuelle Element-Boxmodell visuell dar, sodass Sie auf einen Blick sehen können, welche Polster, Rahmen und Ränder darauf angewendet werden und wie groß der Inhalt ist. In Firefox befindet sich dies auf der Registerkarte Layout, und in anderen Browsern im Register Berechnet.

In einigen Browsern können auch die JavaScript-Details des ausgewählten Elements in diesem Panel angezeigt werden. In Safari sind diese im Knoten-Tab vereint, in Chrome, Opera und Edge sind sie in separaten Tabs untergebracht.

• Eigenschaften: Die Eigenschaften des Elementobjekts.
• Ereignis-Listener: Die Ereignisse, die mit dem Element verbunden sind.

Erfahren Sie mehr über den Inspektor in verschiedenen Browsern:

• Firefox Seiteninspektor
• Chrome DOM-Inspektor (Operas und Edges Inspektor ist derselbe)
• Safari Elemente-Tab

Der JavaScript-Debugger ermöglicht es Ihnen, den Wert von Variablen zu beobachten und Haltepunkte festzulegen, Stellen in Ihrem Code, an denen Sie die Ausführung pausieren und die Probleme identifizieren möchten, die Ihre Fehlerbehebung verhindern.

Um zum Debugger zu gelangen:

Firefox: Öffnen Sie die Entwicklertools und wählen Sie den Debugger-Tab. Andere Browser: Öffnen Sie die Entwicklertools und wählen Sie den Quellen-Tab.

Der JavaScript-Debugger in jedem Browser ist in drei Fenster unterteilt. Das Layout dieser Fenster ist abhängig vom verwendeten Browser unterschiedlich; dieser Leitfaden verwendet Firefox als Referenz.

Datei-Liste

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

Quellcode

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

Beobachtungsausdrücke und Haltepunkte

Das rechte Fenster zeigt eine Liste der von Ihnen hinzugefügten Beobachtungsausdrücke und gesetzten Haltepunkte.

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

Der nächste Abschnitt, Haltepunkte, listet die gesetzten Haltepunkte auf der Seite auf. In example.js wurde ein Haltepunkt in der Anweisung listItems.push(inputNewItem.value); gesetzt.

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

Der Abschnitt Call-Stack 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 behandelt, und dass der Code derzeit an dem Haltepunkt pausiert ist.

Der letzte Abschnitt, Bereiche, zeigt, welche Werte von verschiedenen Punkten innerhalb Ihres Codes sichtbar sind. Zum Beispiel können Sie im Bild unten die im addItemClick-Funktion verfügbaren Objekte sehen.

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

• Firefox JavaScript Debugger)
• Chrome Debugger (Operas und Edges Debugger ist derselbe)
• Safari Quellen-Tab

Die JavaScript-Konsole ist ein unglaublich nützliches Tool 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 meldet die Fehler, auf die der Browser beim Versuch, Ihren Code auszuführen, stößt.

Um die Konsole in einem beliebigen Browser zu öffnen, öffnen Sie die Entwicklertools und wählen Sie den Konsole-Tab. Dies gibt Ihnen ein Fenster wie das Folgende:

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

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 falschen Versionen des Codes einzugeben und zu sehen, 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 anfangen zu sehen, welche Art von Fehlern der Browser zurückgibt. Oft sind diese Fehler ziemlich kryptisch, aber es sollte ziemlich einfach sein, diese Probleme herauszufinden!

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

• Firefox Webkonsole
• Chrome JavaScript-Konsole (Operas und Edges Konsole ist dieselbe)
• Safari Console Objekt-API und Console-Befehlszeilen-API

• Debugging von HTML
• Debugging von CSS