Was sind Entwicklerwerkzeuge für Browser?

So öffnen Sie die Entwicklertools in Ihrem Browser

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

Wie rufen Sie es auf? Drei Möglichkeiten:

• Tastatur:

  • Windows: Strg + Umschalt + I oder F12
  • macOS: ⌘ + ⌥ + I

• Menüleiste:

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

  • Chrome: Weitere Tools ➤ Entwicklertools

  • Opera: Entwickler ➤ Entwicklertools

  • Safari: Entwickeln ➤ Web-Inspektor anzeigen.

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

• Kontextmenü: Drücken und halten bzw. rechtsklicken Sie ein Element auf einer Webseite (Strg-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, auf das Sie geklickt haben.)

Der Inspektor: DOM-Explorer und CSS-Editor

Die Entwicklerwerkzeuge werden standardmäßig meist im Inspektor geöffnet, der etwa so aussieht wie der folgende Screenshot. Dieses Werkzeug zeigt, wie das HTML Ihrer Seite zur Laufzeit aussieht und welche CSS-Styles auf jedes Element der Seite angewendet werden. Es ermöglicht Ihnen auch, das HTML und CSS sofort zu ändern und die Ergebnisse Ihrer Änderungen live im Browser-Ansichtsfenster zu sehen.

Wenn Sie den Inspektor nicht sehen:

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

Den DOM-Inspektor erkunden

Zu Beginn, klicken Sie mit der rechten Maustaste (Strg-Klick) auf ein HTML-Element im DOM-Inspektor und sehen Sie sich das Kontextmenü an. Die verfügbaren Menüoptionen variieren zwischen den Browsern, aber die wichtigen sind größtenteils gleich:

• Knoten löschen (manchmal Element löschen). Löscht das aktuelle Element.
• Als HTML bearbeiten (manchmal Attribut hinzufügen/Text bearbeiten). Ermöglicht Ihnen, das HTML zu ändern und die Ergebnisse im Handumdrehen zu sehen. Sehr nützlich zum Debuggen und Testen.
• :hover/:active/:focus. Erzwingt das Toggeln von Elementzuständen, sodass Sie sehen können, wie deren Styling aussehen würde.
• Kopieren/Als HTML kopieren. Kopieren Sie das derzeit ausgewählte HTML.
• In einigen Browsern sind auch CSS-Pfad kopieren und XPath kopieren verfügbar, um Ihnen das Kopieren des CSS-Selectors oder des XPath-Ausdrucks zu ermöglichen, der das aktuelle HTML-Element auswählen würde.

Versuchen Sie nun, etwas von 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.

Den CSS-Editor erkunden

Standardmäßig zeigt der CSS-Editor die auf das derzeit ausgewählte Element angewendeten CSS-Regeln an:

Diese Funktionen sind besonders praktisch:

• Die auf das aktuelle Element angewendeten Regeln werden in der Reihenfolge von der spezifischsten zur am wenigsten spezifischen 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 Kurzform-Eigenschaft, um die Langform-Äquivalente der Eigenschaft anzuzeigen.
• Klicken Sie auf einen Eigenschaftsnamen oder Wert, um ein Textfeld einzublenden, in das 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. Ein Klick auf diese Regel zeigt sie in einem eigenen Fenster der Entwicklertools an, wo sie in der Regel 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 anzuzeigen, in dem Sie eine völlig neue Deklaration für Ihre Seite schreiben können.

Oben im CSS-Viewer werden Ihnen verschiedene anklickbare Tabs auffallen:

• Berechnet: Dies zeigt die berechneten Stile für das derzeit ausgewählte Element an (die endgültigen, vom Browser angewendeten normalisierten Werte).
• Layout: Dies zeigt die Details für die CSS-Raster- und Flexbox-Layout-Modi, wenn das von Ihnen untersuchte Element diese verwendet.
• Fonts: In Firefox und Safari zeigt der Fonts-Tab die auf das aktuelle Element angewendeten Schriftarten an.

Die Boxmodell-Ansicht stellt auf visuelle Weise das Boxmodell des aktuellen Elements dar, sodass Sie auf einen Blick sehen können, welche Abstände, Ränder und Randeigenschaften darauf angewendet werden und wie groß der Inhalt ist. In Firefox befindet sich dies im Layout-Tab; in anderen Browsern befindet es sich im Berechnete-Tab.

In einigen Browsern können die JavaScript-Details des ausgewählten Elements ebenfalls in diesem Panel betrachtet werden. In Safari sind diese unter dem Node-Tab vereinheitlicht, befinden sich jedoch in separaten Tabs in Chrome, Opera und Edge.

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

Mehr erfahren

Erfahren Sie mehr über den Inspektor in verschiedenen Browsern:

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

Der JavaScript-Debugger

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

So gelangen Sie zum Debugger:

• 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.

Den Debugger erkunden

Jeder Browser hat seinen JavaScript-Debugger in drei Bereiche unterteilt. Das Layout unterscheidet sich je nach Browser; dieser Leitfaden verwendet Firefox als Referenz.

Dateiliste

Der erste Bereich auf der linken Seite enthält die Liste der mit der Seite verbundenen Dateien, 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 Bereich des Debuggers anzuzeigen.

Quellcode

Setzen Sie Haltepunkte dort, wo Sie die Ausführung anhalten möchten. Im folgenden Bild zeigt die Hervorhebung bei der Nummer 18, dass in dieser Zeile ein Haltepunkt gesetzt ist.

Überwachungs-Ausdrücke und Haltepunkte

Der rechte Bereich zeigt eine Liste der hinzugefügten Überwachungs-Ausdrücke und der festgelegten Haltepunkte.

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 auf der Seite festgelegten Haltepunkte auf. In example.js wurde ein Haltepunkt bei der Anweisung listItems.push(inputNewItem.value); gesetzt.

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

Der Callstack-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 behandelt, und dass der Code derzeit bei einem Haltepunkt angehalten ist.

Der letzte Abschnitt, Scopes, zeigt, welche Werte von verschiedenen Punkten innerhalb Ihres Codes sichtbar sind. Im folgenden Bild können Sie beispielsweise die Objekte sehen, die dem Code in der addItemClick-Funktion zur Verfügung stehen.

Mehr erfahren

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

Die JavaScript-Konsole ist ein unglaublich nützliches Werkzeug zur Fehlersuche in JavaScript, das nicht wie erwartet funktioniert. Sie ermöglicht es Ihnen, Zeilen von JavaScript gegen die aktuell im Browser geladene Seite auszuführen und berichtet die Fehler, die auftreten, wenn der Browser versucht, Ihren Code auszuführen.

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-Ausschnitte 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 jetzt, die folgenden falschen 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 ziemlich einfach sein, diese Probleme zu erkennen!

Mehr erfahren

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

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

Siehe auch

• Debugging von HTML
• Debugging von CSS