Was sind Entwicklerwerkzeuge für Browser?

So öffnen Sie die Entwicklerwerkzeuge in Ihrem Browser

Die Entwicklerwerkzeuge befinden sich in einem Unterfenster Ihres Browsers, das je nach verwendetem Browser in 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 Werkzeuge ➤ Entwicklerwerkzeuge

  • Opera: Entwickler ➤ Entwicklerwerkzeuge

  • Safari: Entwickeln ➤ Web-Inspektor anzeigen.

    Hinweis: Die Entwicklerwerkzeuge in 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ü: Halten Sie gedrückt oder klicken Sie mit der rechten Maustaste auf ein Element auf einer Webseite (Ctrl-Klick auf dem Mac) und wählen Sie Element untersuchen aus dem angezeigten 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 öffnen sich normalerweise standardmäßig im Inspektor, der etwa so aussieht wie der folgende Screenshot. Dieses Werkzeug zeigt, wie das HTML Ihrer Seite zur Laufzeit aussieht und welche CSS-Stile 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 die Registerkarte Inspektor.
• Andere Browser: Wählen Sie die Registerkarte Elemente.

Erforschen des DOM-Inspektors

Zu Beginn klicken Sie mit der rechten Maustaste (Ctrl-Klick) auf ein HTML-Element im DOM-Inspektor und schauen sich das Kontextmenü an. Die verfügbaren Menüoptionen variieren je nach Browser, aber die wichtigsten 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 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 deren 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 klicken Sie mit der rechten Maustaste darauf und wählen Sie Als HTML bearbeiten im Kontextmenü. Sie können beliebige Änderungen vornehmen, aber Sie können Ihre Änderungen nicht speichern.

Erforschen des CSS-Editors

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

Diese Funktionen sind besonders nützlich:

• Die auf das aktuelle Element angewendeten Regeln werden in der Reihenfolge von der spezifischsten zur unspezifischsten 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 zu öffnen, in das Sie einen neuen Wert eingeben können, um eine Live-Vorschau einer Stiländerung zu erhalten.
• Neben jeder Regel stehen der Dateiname und die Zeilennummer, in der die Regel definiert ist. Wenn Sie auf diese Regel klicken, zeigen die Entwicklerwerkzeuge sie in einer eigenen Ansicht an, in der sie in der Regel bearbeitet und gespeichert werden kann.
• Sie können auch die schließende geschweifte Klammer einer Regel anklicken, um in einem neuen Zeilen-Textfeld eine völlig neue Deklaration für Ihre Seite zu schreiben.

Sie werden mehrere klickbare Registerkarten oben im CSS-Viewer bemerken:

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

Die Box-Modell-Ansicht stellt das aktuelle Box-Modell des Elements visuell dar, sodass Sie auf einen Blick sehen können, welche Abstände, Rahmen und Ränder darauf angewendet werden und wie groß der Inhalt ist. In Firefox befindet sich das im Tab Layout, in anderen Browsern im Tab Berechnet.

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

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

Mehr erfahren

Erfahren Sie mehr über den Inspektor in verschiedenen Browsern:

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

Der JavaScript-Debugger

Der JavaScript-Debugger ermöglicht es Ihnen, den Wert von Variablen zu überwachen und Breakpoints festzulegen, um die Ausführung an bestimmten Stellen im Code anzuhalten und die Probleme zu identifizieren, die verhindern, dass Ihr Code ordnungsgemäß ausgeführt wird.

So gelangen Sie zum Debugger:

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

Erforschen des Debuggers

Jeder Browser-Debugger für JavaScript ist in drei Bereiche unterteilt. Die Anordnung dieser Bereiche variiert je nach Browser; dieser Leitfaden verwendet Firefox als Referenz.

Dateiliste

Der erste Bereich auf der linken Seite enthält die Liste der mit der zu debuggenden Seite verbundenen Dateien. Wählen Sie die Datei, 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, wo Sie die Ausführung pausieren möchten. Im folgenden Bild zeigt die Hervorhebung auf der Nummer 18 an, dass für die Zeile ein Breakpoint gesetzt ist.

Beobachtungsausdrücke und Breakpoints

Der rechte Bereich zeigt eine Liste der hinzugefügten Beobachtungsausdrücke und der gesetzten Breakpoints.

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, 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 Abschnitt Aufrufstapel zeigt, welcher Code ausgeführt wurde, um zur aktuellen Zeile zu gelangen. Sie können sehen, dass der Code sich in der Funktion befindet, die einen Mausklick behandelt, und dass der Code derzeit an einem Breakpoint angehalten ist.

Der letzte Abschnitt, Bereiche, zeigt, welche Werte von verschiedenen Punkten in Ihrem Code aus sichtbar sind. Zum Beispiel können Sie im Bild unten 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 derselbe)
• Safari Quellen-Tab

Die JavaScript-Konsole

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 die Fehler zu melden, 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 die Registerkarte Konsole. Dies wird Ihnen ein Fenster wie das folgende bieten:

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://mdn.github.io/shared-assets/images/examples/login-button.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://mdn.github.io/shared-assets/images/examples/login-button.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!

Mehr erfahren

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

Siehe auch

• Debugging von HTML
• Debugging von CSS