Was sind Browser-Entwicklertools?

Was sind DevTools?

Die DevTools Ihres Browsers zeigen Ihnen den aktuellen Zustand des Codes, den Ihr Browser für die sichtbare Webseite verarbeitet hat. Dieser kann sich von Ihrem ursprünglichen Quellcode unterscheiden: Der Browser korrigiert fehlerhaftes HTML, führt JavaScript aus, das möglicherweise das Markup oder CSS verändert, und so weiter.

Die DevTools können jedoch weit mehr, als nur Code anzuzeigen: Sie können HTML und CSS bearbeiten und sehen, wie sich dadurch die Benutzeroberfläche verändert, JavaScript auf der geladenen Seite ausführen und das Ergebnis beobachten, JavaScript debuggen (einschließlich der Anzeige von Fehlermeldungen), Netzwerkanfragen untersuchen, unterschiedliche Viewport-Größen emulieren, Informationen zur Barrierefreiheit anzeigen und vieles mehr.

Dieser Artikel bietet grundlegende Informationen zu den am häufigsten verwendeten Funktionen der DevTools. Weitere Informationen finden Sie in den Ressourcen der jeweiligen Browser:

• Benutzerdokumentation der Firefox DevTools
• Chrome DevTools (Opera und Edge verwenden denselben Inspektor)
• Safari Web Inspector

So öffnen Sie die DevTools in Ihrem Browser

Die DevTools befinden sich in einem Teilfenster Ihres Browsers, das etwa wie folgt aussieht. Das genaue Erscheinungsbild hängt vom verwendeten Browser ab:

Sie können die DevTools auf drei Arten öffnen:

• Tastatur:

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

• Menüleiste:

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

  • Chrome und Edge: Weitere Tools ➤ Entwicklertools

  • Opera: Entwickler ➤ Entwicklertools

  • Safari: Entwickler ➤ Web-Inspektor einblenden

    Hinweis: Die Entwicklertools von Safari sind standardmäßig nicht aktiviert. Um sie zu aktivieren, öffnen Sie Safari ➤ Einstellungen ➤ Erweitert und aktivieren Sie das Kontrollkästchen Funktionen für Webentwickler anzeigen.

• Kontextmenü: Klicken Sie mit der rechten Maustaste auf ein Element einer Webseite (auf einem Mac mit gedrückter Ctrl-Taste) und wählen Sie im angezeigten Kontextmenü Element untersuchen/Untersuchen. (Ein Vorteil: Bei dieser Methode wird der Code des ausgewählten Elements sofort hervorgehoben.)

Der Inspektor: DOM-Explorer und CSS-Editor

Die Entwicklertools öffnen sich normalerweise standardmäßig mit dem Inspektor, der etwa so aussieht:

Dieses Tool zeigt, wie das HTML Ihrer Seite zur Laufzeit aussieht und welches CSS auf die einzelnen Elemente der Seite angewendet wird. Sie können damit außerdem HTML und CSS unmittelbar ändern und die Auswirkungen Ihrer Änderungen direkt im Browser sehen.

Falls Sie den Inspektor nicht sehen:

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

Den DOM-Inspektor erkunden

Klicken Sie zunächst im DOM-Inspektor mit der rechten Maustaste (oder mit gedrückter Ctrl-Taste) auf ein HTML-Element und sehen Sie sich das Kontextmenü an.

Die verfügbaren Menüoptionen unterscheiden sich je nach Browser, die wichtigsten sind jedoch weitgehend gleich:

• Knoten löschen (manchmal Element löschen): Löscht das aktuelle Element.
• Als HTML bearbeiten (manchmal Attribut hinzufügen/Text bearbeiten): Hiermit können Sie das HTML ändern und die Ergebnisse sofort sehen. Das ist besonders hilfreich beim Debuggen und Testen.
• :hover/:active/:focus: Erzwingt die Aktivierung von Elementzuständen, damit Sie sehen können, wie das Element in diesen Zuständen dargestellt wird.
• Kopieren/Als HTML kopieren: Kopiert das aktuell ausgewählte HTML.
• Manche Browser bieten außerdem CSS-Pfad kopieren und XPath kopieren an. Damit können Sie den CSS-Selektor oder XPath-Ausdruck kopieren, der das aktuelle HTML-Element auswählt.

Versuchen Sie nun, Ihr DOM zu bearbeiten. Doppelklicken Sie auf ein Element oder klicken Sie mit der rechten Maustaste darauf und wählen Sie im Kontextmenü Als HTML bearbeiten. Sie können beliebige Änderungen vornehmen, diese aber nicht speichern.

Den CSS-Editor erkunden

Standardmäßig zeigt der CSS-Editor die CSS-Regeln an, die auf das untersuchte Element angewendet werden. In manchen Browsern gibt es dafür einen eigenen Bereich, in anderen befinden sich die Regeln im Tab Styles.

Beachten Sie die folgenden Funktionen:

• Die Regeln, die auf das aktuelle Element angewendet werden, sind von der höchsten zur niedrigsten Spezifität geordnet.
• Klicken Sie auf die Kontrollkästchen neben den einzelnen Deklarationen, um zu sehen, was geschieht, wenn Sie die jeweilige Deklaration entfernen.
• Klicken Sie auf den kleinen Pfeil neben einer Kurzschreibweise-Eigenschaft, um die entsprechenden ausgeschriebenen Eigenschaften anzuzeigen.
• Klicken Sie auf den Namen oder Wert einer Eigenschaft, um ein Textfeld zu öffnen. Dort können Sie einen neuen Wert eingeben und die Änderung des Styles direkt in einer Vorschau sehen.
• Neben jeder Regel stehen der Dateiname und die Zeilennummer, an der sie definiert ist. Wenn Sie darauf klicken, zeigen die DevTools die Regel in einer eigenen Ansicht an, in der sie sich in der Regel bearbeiten und speichern lässt.
• Klicken Sie auf die schließende geschweifte Klammer einer Regel, um eine neue Zeile einzufügen. Dort können Sie eine weitere Deklaration hinzufügen, die auf die Seite angewendet wird.

Im CSS-Editor finden Sie mehrere weitere anklickbare Tabs, zum Beispiel:

• Computed: Zeigt die berechneten Styles für das aktuell ausgewählte Element an – also die endgültigen, normalisierten Werte, die der Browser anwendet.
• Layout: Zeigt gegebenenfalls Details zu Layout-Modi wie CSS Grid und Flexbox an, die auf das untersuchte Element angewendet werden.
• Fonts: In Firefox und Safari zeigt der Tab Fonts die Schriftarten an, die auf das aktuelle Element angewendet werden.

Die Ansicht des Box-Modells stellt das Box-Modell des aktuellen Elements grafisch dar. So können Sie auf einen Blick erkennen, welche Innenabstände, Rahmen und Außenabstände angewendet werden und wie groß der Inhalt ist. In Firefox befindet sich diese Ansicht im Tab Layout, in anderen Browsern im Tab Computed.

In manchen Browsern können Sie in diesem Bereich auch JavaScript-Details zum ausgewählten Element ansehen. In Safari sind diese im Tab Node zusammengefasst; in Chrome, Opera und Edge befinden sie sich in separaten Tabs.

• Properties: Die Eigenschaften des Elementobjekts.
• Event Listeners: Die Events, die mit dem Element verknüpft sind.

Weitere Informationen

Weitere Informationen über den Inspektor in verschiedenen Browsern:

• Firefox-Seiteninspektor
• Chrome-DOM-Inspektor (Opera und Edge verwenden denselben Inspektor)
• Elements-Tab in Safari

Der JavaScript-Debugger

Mit dem JavaScript-Debugger können Sie Variablenwerte beobachten und Breakpoints setzen. Das sind Stellen in Ihrem Code, an denen Sie die Ausführung anhalten können, um Probleme zu finden, die verhindern, dass Ihr Code korrekt ausgeführt wird.

So öffnen Sie den Debugger:

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

Den Debugger erkunden

Der JavaScript-Debugger ist in jedem Browser in drei Bereiche unterteilt. Deren Anordnung unterscheidet sich je nach Browser; dieser Leitfaden verwendet Firefox als Referenz.

Dateiliste

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

Quellcode

Setzen Sie Breakpoints an den Stellen, an denen Sie die Ausführung anhalten möchten. Im folgenden Bild zeigt die Hervorhebung von Zeile 18, dass dort ein Breakpoint gesetzt ist.

Überwachungsausdrücke und Breakpoints

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

• Der erste Abschnitt, Watch expressions, zeigt, dass die Variable listItems hinzugefügt wurde. Sie können die Liste aufklappen, um die Werte des Arrays anzuzeigen.
• Im nächsten Abschnitt, Breakpoints, sind die auf der Seite gesetzten Breakpoints aufgeführt. In example.js wurde ein Breakpoint für die Anweisung listItems.push(inputNewItem.value); gesetzt.
• Die letzten beiden Abschnitte erscheinen nur, wenn der Code ausgeführt wird.
  • Der Abschnitt Call stack zeigt, welcher Code ausgeführt wurde, um zur aktuellen Zeile zu gelangen. Sie können erkennen, dass sich der Code in der Funktion befindet, die einen Mausklick verarbeitet, und dass die Ausführung derzeit am Breakpoint angehalten ist.
  • Der letzte Abschnitt, Scopes, zeigt, welche Werte an verschiedenen Stellen Ihres Codes verfügbar sind. Im Bild sehen Sie beispielsweise die Objekte, auf die der Code in der Funktion addItemClick zugreifen kann.

Weitere Informationen

Weitere Informationen über den JavaScript-Debugger in verschiedenen Browsern:

• JavaScript-Debugger in Firefox
• JavaScript-Debugging in Chrome (Opera und Edge verwenden denselben Debugger)
• Sources-Tab in Safari

Die JavaScript-Konsole

In der JavaScript-Konsole können Sie JavaScript-Anweisungen auf der aktuell im Browser geladenen Seite ausführen. Außerdem zeigt sie Fehler an, die beim Ausführen Ihres Codes auftreten.

Um die Konsole in einem beliebigen Browser zu öffnen, öffnen Sie die Entwicklertools und wählen Sie den Tab Console. Daraufhin sehen Sie ein Fenster wie dieses:

Um zu sehen, was geschieht, geben Sie die folgenden Codeausschnitte nacheinander in die Konsole ein und drücken Sie jeweils die Eingabetaste:

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);

Geben Sie nun die folgenden fehlerhaften Codeausschnitte ein und sehen Sie sich die Ergebnisse an.

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 nun sehen, welche Arten von Fehlern der Browser meldet. Manche Fehlermeldungen sind zunächst recht schwer verständlich, werden Ihnen aber mit zunehmender Erfahrung vertrauter.

Weitere Informationen

Weitere Informationen über die JavaScript-Konsole in verschiedenen Browsern:

• Web-Konsole in Firefox
• Konsole in Chrome (Opera und Edge verwenden dieselbe Konsole)
• Console Object API in Safari und Console Command Line API

Der Netzwerk-Inspektor

Mit dem Netzwerk-Inspektor können Sie die Netzwerkanfragen und -antworten untersuchen, die beim Abrufen der HTML-Dokumente, Bilder, CSS-Dateien, JavaScript-Dateien und anderer Ressourcen anfallen, aus denen die im Browser dargestellte Website besteht.

Um ihn zu öffnen, öffnen Sie die Entwicklertools und wählen Sie den Tab Network. Daraufhin sehen Sie ein Fenster wie dieses:

Hier gibt es viele Informationen. Grundsätzlich ist es aber hilfreich zu sehen, welche Dateien Ihre Website anfordert und ob sie erfolgreich geladen werden.

Wenn Sie beispielsweise den Statuscode 200 sehen, wurde eine Ressource erfolgreich bereitgestellt. Der Code 404 bedeutet dagegen, dass die Ressource nicht gefunden wurde. Möglicherweise müssen Sie einen falschen Dateipfad oder Dateinamen korrigieren, oder Sie haben vergessen, die Datei auf den Server hochzuladen.

HTTP-Statuscodes

Server antworten jedes Mal mit einer Statusmeldung, wenn sie eine Anfrage erhalten. Dies sind die häufigsten Statuscodes:

200: OK

Die angeforderte Ressource wurde bereitgestellt.

301: Moved permanently

Die Ressource wurde dauerhaft an einen neuen Ort verschoben. Diesen Status sehen Sie im Browser nicht häufig. Es ist jedoch gut, „301“ zu kennen, da Suchmaschinen diese Information oft verwenden, um ihre Indizes zu aktualisieren.

304: Not modified

Die Datei hat sich seit Ihrer letzten Anfrage nicht geändert. Ihr Browser kann daher die Version aus seinem Cache anzeigen. Das führt zu kürzeren Antwortzeiten und einer effizienteren Nutzung der Bandbreite.

403: Forbidden

Sie dürfen nicht auf die Ressource zugreifen. Üblicherweise deutet dies auf einen Konfigurationsfehler hin (beispielsweise wenn Ihr Hosting-Anbieter Ihnen keine Zugriffsrechte für ein Verzeichnis erteilt hat).

404: Not found

Die angeforderte Ressource wurde am angegebenen Ort nicht gefunden.

500: Internal server error

Auf dem Server ist ein Fehler aufgetreten. Beispielsweise funktioniert die serverseitige Sprache (PHP, .Net usw.) nicht mehr oder der Webserver selbst hat ein Konfigurationsproblem. Melden Sie solche Probleme dem Support-Team Ihres Hosting-Anbieters.

503: Service unavailable

Dieser Status ist meist die Folge einer vorübergehenden Überlastung des Servers. Versuchen Sie es nach einer Weile erneut.

Weitere Informationen

Weitere Informationen über den Netzwerk-Inspektor in verschiedenen Browsern:

• Netzwerkmonitor in Firefox
• Network-Bereich in Chrome (Opera und Edge verwenden denselben Netzwerk-Bereich)
• Network-Tab in Safari

Siehe auch

• HTML debuggen
• CSS debuggen