Es gibt viele Möglichkeiten, die Chrome-Entwicklertools zu öffnen. Wählen Sie in dieser umfassenden Referenz Ihre bevorzugte Methode aus.
Sie können über die Chrome-UI oder die Tastatur auf die Entwicklertools zugreifen:
- Über Drop-down-Menüs in Chrome.
- Mit speziellen Tastenkombinationen, die Elemente, die Console oder das zuletzt verwendete Steuerfeld öffnen.
Außerdem erfahren Sie, wie Sie die Entwicklertools für jeden neuen Tab automatisch öffnen.
Entwicklertools über Chrome-Menüs öffnen
Wenn Sie die UI bevorzugen, können Sie über Drop-down-Menüs in Chrome auf die Entwicklertools zugreifen.
Bereich „Elemente“ öffnen, um DOM oder CSS zu untersuchen
Klicken Sie zum Untersuchen mit der rechten Maustaste auf ein Element auf einer Seite und wählen Sie Untersuchen aus.
In den Entwicklertools wird der Bereich Elemente geöffnet und das Element im DOM-Baum ausgewählt. Auf dem Tab Stile sehen Sie die CSS-Regeln, die auf das ausgewählte Element angewendet werden.
Zuletzt verwendetes Steuerfeld über das Hauptmenü von Chrome öffnen
Wenn Sie das zuletzt verwendete Entwicklertools-Steuerfeld öffnen möchten, klicken Sie rechts neben der Adressleiste auf die Schaltfläche „Mehr“ und wählen Sie Weitere Tools > Entwicklertools aus.
Alternativ können Sie das zuletzt verwendete Steuerfeld mit einer Tastenkombination öffnen. Weitere Informationen finden Sie im nächsten Abschnitt.
Steuerfelder mit Tastenkombinationen öffnen: „Elemente“, „Console“ oder das zuletzt verwendete Steuerfeld
Wenn Sie die Tastatur bevorzugen, drücken Sie in Chrome je nach Betriebssystem eine Tastenkombination:
| Betriebssystem | Elemente | Console | Zuletzt verwendetes Steuerfeld |
|---|---|---|---|
| Windows oder Linux | Strg + Umschalttaste + C | Strg + Umschalttaste + J | F12 Strg + Umschalttaste + I |
| Mac | Cmd + Wahltaste + C | Cmd + Wahltaste + J | Fn + F12 Cmd + Wahltaste + I |
So können Sie sich die Tastenkombinationen ganz einfach merken:
- C steht für CSS.
- J für JavaScript.
- I steht für Ihre Auswahl.
Mit der Tastenkombination C wird der Bereich Elemente im Modus „Untersuchen“ geöffnet. In diesem Modus werden hilfreiche Tooltips angezeigt, wenn Sie den Mauszeiger auf Elemente auf einer Seite bewegen. Sie können auch auf ein beliebiges Element klicken, um das zugehörige CSS auf dem Tab Elemente > Stile aufzurufen.
Die vollständige Liste der Tastenkombinationen für die Entwicklertools finden Sie unter Tastenkombinationen.
Seite mit geöffneten Entwicklertools mit oder ohne Cache neu laden
Wenn die Entwicklertools geöffnet sind, können Sie die Seite auf drei Arten neu laden. Halten Sie in der Hauptaktionsleiste des Chrome-Fensters die Schaltfläche „“ Neu laden gedrückt und wählen Sie eine der folgenden Optionen aus:
Normal neu laden. Verwendet den Cache, um die Ladezeit zu verkürzen.
Tastenkombination: Cmd+R (macOS) oder Strg+R (Windows/Linux).
Vollständig neu laden. Umgeht den Cache, leert ihn aber nicht.
Tastenkombination: Cmd+Umschalttaste+R (macOS) oder Strg+Umschalttaste+R (Windows/Linux).
Cache leeren und vollständig neu laden. Leert den Cache für alle Websites, bevor die Seite neu geladen wird.
Entwicklertools für jeden neuen Tab automatisch öffnen
Führen Sie Chrome über die Befehlszeile aus und übergeben Sie das Flag --auto-open-devtools-for-tabs:
Beenden Sie alle ausgeführten Chrome-Instanzen.
Führen Sie Ihre bevorzugte Terminal- oder Befehlszeilenanwendung aus.
Führen Sie je nach Betriebssystem den folgenden Befehl aus:
macOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsWindows:
start chrome --auto-open-devtools-for-tabsLinux:
google-chrome --auto-open-devtools-for-tabs
Die Entwicklertools werden für jeden neuen Tab automatisch geöffnet, bis Sie Chrome schließen.
Nächste Schritte
Sehen Sie sich als Nächstes das folgende Video an, um einige nützliche Tastenkombinationen und Einstellungen für eine schnellere Navigation in den Entwicklertools kennenzulernen.
Wenn Sie lieber selbst Hand anlegen möchten, erfahren Sie hier, wie Sie die Entwicklertools anpassen.