Es gibt viele Möglichkeiten, die Chrome-Entwicklertools zu öffnen. In dieser umfassenden Referenz finden Sie die passende Option.
Sie können über die Chrome-Benutzeroberfläche oder die Tastatur auf die DevTools zugreifen:
- Über das Drop-down-Menü in Chrome
- Mit speziellen Tastenkürzeln, mit denen Elements, Console oder das zuletzt verwendete Steuerfeld geöffnet werden.
Außerdem erfahren Sie, wie Sie die Entwicklertools für jeden neuen Tab automatisch öffnen.
Entwicklertools über Chrome-Menüs öffnen
Wenn Sie die Benutzeroberfläche bevorzugen, können Sie über Drop-down-Menüs in Chrome auf die Entwicklertools zugreifen.
Öffnen Sie das Steuerfeld „Elemente“, um das DOM oder CSS zu prüfen
Klicken Sie mit der rechten Maustaste auf ein Element auf einer Seite und wählen Sie Untersuchen aus.
In DevTools wird der Bereich Elemente geöffnet und das Element im DOM-Baum ausgewählt. Auf dem Tab Styles sehen Sie die CSS-Regeln, die auf das ausgewählte Element angewendet werden.
Über das Chrome-Hauptmenü die zuletzt verwendete Steuerfeld öffnen
Wenn Sie den letzten DevTools-Bereich öffnen möchten, klicken Sie rechts neben der Adressleiste auf das Dreipunkt-Menü und wählen Sie Weitere Tools > Entwicklertools aus.
Alternativ können Sie den letzten Bereich mit einer Verknüpfung öffnen. Weitere Informationen finden Sie im nächsten Abschnitt.
Steuerfelder mit Tastenkürzeln öffnen: „Elemente“, „Konsole“ oder das zuletzt geöffnete Steuerfeld
Wenn Sie lieber die Tastatur verwenden, drücken Sie je nach Betriebssystem eine Tastenkombination in Chrome:
| Betriebssystem | Elemente | Console | Ihr letzter Bereich |
|---|---|---|---|
| Windows oder Linux | Strg + Umschalttaste + C | Strg + Umschalttaste + J | F12 Strg + Umschalttaste + I |
| Mac | Befehlstaste + Wahltaste + C | Befehlstaste + Wahltaste + J | Fn + F12 Befehl + 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 Inspektormodus geöffnet. In diesem Modus werden hilfreiche Kurzinfos 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 > Styles aufzurufen.
Eine vollständige Liste der Tastenkombinationen für DevTools finden Sie unter Tastenkombinationen.
Entwicklertools auf jedem 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 aktuell 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
Im folgenden Video erfahren Sie mehr über nützliche Tastenkürzel und Einstellungen für eine schnellere Navigation in den DevTools.
Weitere praktische Informationen findest du im Artikel zum Anpassen von Entwicklertools.