Was sind Entwicklertools des Browsers?

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

Wie öffnet man es? Auf drei Arten:

• Tastatur:

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

• Menüleiste:

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

  • Chrome: Weitere 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 aktivieren Sie das Kontrollkästchen Entwicklermenü in Menüleiste anzeigen oder Funktionen für Webentwickler aktivieren.

• Kontextmenü: Halten Sie die rechte Maustaste gedrückt oder klicken Sie mit der rechten Maustaste auf ein Element einer Webseite (Ctrl-Klick auf dem Mac), und wählen Sie Element untersuchen aus dem erscheinenden Kontextmenü. (Ein zusätzlicher Vorteil: Diese Methode hebt sofort den Code des Elements hervor, auf das Sie rechts geklickt haben.)

Die Entwicklertools öffnen sich standardmäßig normalerweise zum Inspektor, der etwa wie der folgende Screenshot aussieht. Dieses Werkzeug zeigt, wie das HTML auf Ihrer Seite zur Laufzeit aussieht und welche CSS auf jedes Element der Seite angewendet wird. Es erlaubt Ihnen auch, das HTML und CSS sofort zu ändern und die Ergebnisse Ihrer Änderungen live im Browser anzusehen.

Wenn Sie den Inspektor nicht sehen,

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

Um zu beginnen, 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 je nach Browser, aber die wichtigsten sind größtenteils identisch:

• Node 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 sofort zu sehen. Sehr nützlich zum Debuggen und Testen.
• :hover/:active/:focus. Erzwingt das Umschalten von Elementzuständen, sodass Sie sehen können, wie ihre Stilisierung aussehen würde.
• Kopieren/Kopieren als HTML. Kopieren Sie das derzeit ausgewählte HTML.
• Einige Browser haben auch CSS-Pfad kopieren und XPath kopieren verfügbar, um Ihnen zu ermöglichen, den CSS-Selektor oder den XPath-Ausdruck, der das aktuelle HTML-Element auswählen würde, zu kopieren.

Versuchen Sie nun, einige Ihrer 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, können diese jedoch nicht speichern.

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 am spezifischsten zu am wenigsten 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 Kurzform-Eigenschaft, um die Langform-Ä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 befindet sich der Dateiname und die Zeilennummer, in der die Regel definiert ist. Ein Klick auf diese Regel veranlasst die Entwicklertools, sie in einer eigenen Ansicht anzuzeigen, wo sie im Allgemeinen bearbeitet und gespeichert werden kann.
• Sie können auch auf die schließende geschweifte Klammer einer beliebigen 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.

Sie werden einige anklickbare Tabs oben im CSS-Viewer bemerken:

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

Die Ansicht zum Box-Modell stellt das Box-Modell des aktuellen Elements visuell dar, sodass Sie auf einen Blick sehen können, welche Polsterung, welchen Rahmen und welchen Rand es hat und wie groß sein Inhalt ist. In Firefox befindet sich dies im Layout-Reiter, in anderen Browsern im Berechnet-Reiter.

In einigen Browsern können die JavaScript-Details des ausgewählten Elements ebenfalls in diesem Panel eingesehen werden. In Safari sind diese unter dem Knoten-Reiter vereint, in Chrome, Opera und Edge jedoch in separaten Reitern.

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

Erfahren Sie mehr über den Inspektor in verschiedenen Browsern:

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

Der JavaScript-Debugger ermöglicht es Ihnen, den Wert von Variablen zu beobachten und Haltepunkte festzulegen, an denen Sie die Ausführung unterbrechen möchten, um 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 Debugger-Reiter. Andere Browser: Öffnen Sie die Entwicklertools und wählen Sie den Quellen-Reiter.

Der JavaScript-Debugger jedes Browsers ist in drei Bereiche unterteilt. Das Layout dieser Bereiche unterscheidet sich 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, die Sie debuggen, verknüpft sind. Wählen Sie die Datei aus, mit der Sie arbeiten möchten, und klicken Sie darauf, um ihren Inhalt im mittleren Bereich des Debuggers anzuzeigen.

Quellcode

Setzen Sie Haltepunkte, an denen Sie die Ausführung unterbrechen möchten. Im folgenden Bild zeigt die Hervorhebung der Zahl 18, dass dort ein Haltepunkt gesetzt ist.

Ausdrücke beobachten und Haltepunkte

Der rechte Bereich zeigt eine Liste der beobachteten Ausdrücke, die Sie hinzugefügt haben, sowie der gesetzten Haltepunkte.

Im Bild zeigt der erste Abschnitt, Beobachtete 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 gesetzten 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 Abschnitt Aufrufstapel zeigt Ihnen, welcher Code ausgeführt wurde, um zu der 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 Haltepunkt pausiert ist.

Der letzte Abschnitt, Bereiche, zeigt, welche Werte von verschiedenen Punkten innerhalb Ihres Codes sichtbar sind. Zum Beispiel im unten dargestellten Bild können Sie 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 (Debugger von Opera und Edge ist derselbe)
• Safari Quellen-Reiter

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 meldet die Fehler, die bei dem Versuch des Browsers auftreten, Ihren Code auszuführen.

Um auf die Konsole in einem Browser zuzugreifen, öffnen Sie die Entwicklertools und wählen Sie den Konsole-Reiter. Dies gibt Ihnen ein Fenster wie das folgende:

Um zu sehen, was passiert, versuchen Sie, die folgenden Code-Snippets einzeln 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 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 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 (Konsole von Opera und Edge ist dieselbe)
• Safari Console Object API und Console Command Line API

• HTML-Debugging
• CSS-Debugging