Was sind Browser-Entwicklertools?

Die Entwicklertools befinden sich in einem Unterfenster Ihres Browsers, das je nach verwendetem Browser ungefähr so aussieht:

Wie öffnen Sie das? Auf drei Arten:

• Tastatur:

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

• Menüleiste:

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

  • Chrome: Mehr Werkzeuge ➤ Entwicklertools

  • Opera: Entwickler ➤ Entwicklertools

  • Safari: Entwickeln ➤ Web-Inspektor anzeigen.

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

• Kontextmenü: Drücken und halten oder rechtsklicken Sie ein Element auf einer Webseite (Ctrl-Klick auf dem Mac) und wählen Sie Element untersuchen aus dem erscheinenden Kontextmenü. (Ein zusätzlicher Bonus: Diese Methode hebt sofort den Code des Elements hervor, das Sie rechtsgeklickt haben.)

Die Entwicklertools öffnen sich normalerweise standardmäßig auf den Inspektor, der wie der folgende Screenshot aussieht. Dieses Tool zeigt, wie das HTML auf Ihrer Seite zur Laufzeit aussieht, sowie den CSS-Stil, der auf jedes Element der Seite angewendet wird. Sie können damit auch sofort sowohl HTML als auch CSS ändern und die Ergebnisse Ihrer Änderungen live im Browser-Viewport sehen.

Wenn Sie den Inspektor nicht sehen,

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

Rechtsklicken Sie für den Anfang (Ctrl-Klick) auf ein HTML-Element im DOM-Inspektor und sehen Sie sich das Kontextmenü an. Die verfügbaren Menüoptionen variieren je nach Browser, aber die wichtigsten sind weitgehend die gleichen:

• 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. Sehr nützlich zum Debuggen und Testen.
• :hover/:active/:focus. Erzwingt, dass Elementzustände umgeschaltet werden, sodass Sie sehen können, wie ihr Stil aussehen würde.
• Kopieren/Kopieren als HTML. Kopiert das aktuell ausgewählte HTML.
• Einige Browser bieten auch CSS-Pfad kopieren und XPath kopieren an, um den CSS-Selektor oder den XPath-Ausdruck zu kopieren, der das aktuelle HTML-Element auswählen würde.

Versuchen Sie nun, einige Ihrer DOM-Elemente zu bearbeiten. Doppelklicken Sie auf ein Element oder rechtsklicken Sie und wählen Sie Als HTML bearbeiten aus dem Kontextmenü. Sie können beliebige Änderungen vornehmen, aber Sie können Ihre Änderungen nicht speichern.

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

Diese Funktionen sind besonders nützlich:

• Die Regeln, die auf das aktuelle Element angewendet werden, werden in der Reihenfolge von der spezifischsten zur allgemeinsten 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-Äquivalente der Eigenschaft anzuzeigen.
• Klicken Sie auf einen Eigenschaftsnamen oder -wert, um ein Textfeld anzuzeigen, in dem Sie einen neuen Wert eingeben können, um eine Live-Vorschau einer Stiländerung zu erhalten.
• Neben jeder Regel befinden sich der Dateiname und die Zeilennummer, in der die Regel definiert ist. Beim Klicken auf diese Regel springen die Entwicklertools zu dieser Regel in einer eigenen Ansicht, wo sie bearbeitet und gespeichert werden kann.
• Sie können auch auf die schließende geschweifte Klammer jeder Regel klicken, um ein Textfeld in einer neuen Zeile zu öffnen, 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 Tabs:

• Berechnet: Diese zeigt die berechneten Stile für das aktuell ausgewählte Element (die endgültigen, normalisierten Werte, die der Browser anwendet).
• Layout: Diese zeigt die Details für die CSS-Layoutmodi grid und flexbox an, falls das von Ihnen untersuchte Element diese verwendet.
• Schriften: In Firefox und Safari zeigt der Tab Schriften die auf das aktuelle Element angewendeten Schriften an.

Die Boxmodell-Ansicht stellt das aktuelle Boxmodell des Elements visuell dar, sodass Sie auf einen Blick sehen können, welche Polsterung, welcher Rahmen und welcher Rand darauf angewendet werden und wie groß der Inhalt ist. In Firefox befindet sich dies im Tab Layout, in anderen Browsern im Tab Berechnet.

In einigen Browsern können die JavaScript-Details des ausgewählten Elements auch in diesem Panel eingesehen werden. In Safari sind diese unter dem Tab Knoten vereinheitlicht, aber in separaten Tabs in Chrome, Opera und Edge.

• Eigenschaften: Die Eigenschaften des Elementobjekts.
• Ereignislistener: Die Ereignisse, die dem Element zugeordnet sind.

Erfahren Sie mehr über den Inspektor in verschiedenen Browsern:

• Firefox Page Inspektor
• Chrome DOM Inspektor (Der Inspektor von Opera und Edge ist der gleiche)
• Safari Elemente-Tab

Der JavaScript-Debugger ermöglicht es Ihnen, den Wert von Variablen zu überwachen und Haltepunkte zu setzen, also Stellen in Ihrem Code, an denen Sie die Ausführung anhalten möchten, um die Probleme zu identifizieren, die verhindern, dass Ihr Code ordnungsgemäß ausgeführt wird.

Um zum Debugger zu gelangen:

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

Der JavaScript-Debugger jedes Browsers ist in drei Bereiche unterteilt. Die Anordnung 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. Klicken Sie auf eine Datei, um sie auszuwählen und ihren Inhalt im mittleren Paneel des Debuggers anzuzeigen.

Quellcode

Setzen Sie Haltepunkte, an denen Sie die Ausführung anhalten möchten. Im folgenden Bild zeigt die Hervorhebung auf der Nummer 18, dass die Zeile einen Haltepunkt enthält.

Überwachungs-Ausdrücke und Haltepunkte

Der rechte Bereich zeigt eine Liste der Überwachungs-Ausdrücke, die Sie hinzugefügt haben, und der Haltepunkte, die Sie gesetzt haben.

Im Bild zeigt der erste Abschnitt, Überwachungs-Ausdrü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 Haltepunkte auf, die auf der Seite gesetzt wurden. In example.js wurde ein Haltepunkt auf der Anweisung listItems.push(inputNewItem.value); gesetzt.

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

Der Abschnitt Aufrufliste zeigt Ihnen, welcher Code ausgeführt wurde, um zur aktuellen Zeile zu gelangen. Sie können sehen, dass der Code in der Funktion ist, die einen Mausklick behandelt, und dass der Code derzeit am Haltepunkt angehalten ist.

Der letzte Abschnitt, Geltungsbereiche, zeigt, welche Werte von verschiedenen Punkten innerhalb Ihres Codes sichtbar sind. Beispielsweise können Sie auf dem folgenden Bild die Objekte sehen, die dem Code in der Funktion addItemClick 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 der gleiche)
• Safari Quellen-Tab

Die JavaScript-Konsole ist ein unglaublich nützliches Werkzeug zum Debuggen von JavaScript, das nicht wie erwartet funktioniert. Es ermöglicht Ihnen, JavaScript-Zeilen gegen die derzeit im Browser geladene Seite auszuführen und die Fehler zu melden, auf die der Browser stößt, während er versucht, Ihren Code auszuführen.

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

Um zu sehen, was passiert, versuchen Sie, die folgenden Code-Snippets nacheinander in die Konsole einzugeben (und dann Enter 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 fehlerhaften Versionen des Codes einzufügen und zu sehen, was Sie bekommen.

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, die Art von Fehlern zu sehen, die der Browser zurückgibt. Oft sind diese Fehler ziemlich kryptisch, aber es sollte ziemlich 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 die gleiche)
• Safari Console Object API und Console Command Line API

• Debugging von HTML
• Debugging von CSS