Es gibt viele Möglichkeiten, die Chrome-Entwicklertools zu öffnen. Wählen Sie aus dieser umfassenden Referenz Ihre bevorzugte Methode aus.
Sie können über die Benutzeroberfläche oder Tastatur von Chrome auf die Entwicklertools zugreifen:
- Über Drop-down-Menüs in Chrome.
- Über spezielle Tastenkombinationen können Sie Elemente, die Konsole oder das zuletzt verwendete Steuerfeld öffnen.
Weitere Informationen zum automatischen Öffnen der Entwicklertools für jeden neuen Tab
Entwicklertools über das Chrome-Menü öffnen
Wenn Sie die UI bevorzugen, können Sie über die Drop-down-Menüs in Chrome auf die Entwicklertools zugreifen.
Öffnen Sie den Bereich „Elemente“, um das DOM oder CSS zu prüfen
Klicken Sie zum Prüfen 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. Im Bereich Styles sehen Sie CSS-Regeln, die auf das ausgewählte Element angewendet wurden.
Letztes von Ihnen verwendetes Steuerfeld im Hauptmenü von Chrome öffnen
Klicke zum Öffnen des letzten Entwicklertools-Bereichs rechts neben der Adressleiste auf die Schaltfläche und wähle Weitere Tools > Entwicklertools aus.
Alternativ können Sie das letzte Steuerfeld mit einer Verknüpfung öffnen. Weitere Informationen finden Sie im nächsten Abschnitt.
Steuerfelder mit Tastenkombinationen öffnen: Elemente, Konsole oder das letzte Steuerfeld
Wenn Sie die Tastatur bevorzugen, können Sie abhängig von Ihrem Betriebssystem die entsprechende Tastenkombination in Chrome drücken:
Betriebssystem | Elemente | Console | Dein letztes Panel |
---|---|---|---|
Windows oder Linux | Strg + Umschalttaste + C | Strg + Umschalttaste + J | F12 Strg + Umschalttaste + I |
Mac | Cmd + Option + C | Cmd + Option + J | Fn + F12 Cmd + Option + I |
So können Sie sich die Tastenkombinationen einfach merken:
- C steht für CSS.
- J für JavaScript.
- Mit I wird Ihre Auswahl festgelegt.
Mit dem Tastenkürzel C wird der Bereich Elemente im -Inspector-Modus 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 Element klicken, um dessen CSS-Code im Bereich Elemente > Stile aufzurufen.
Eine vollständige Liste der Tastenkombinationen für die Entwicklertools finden Sie hier.
Entwicklertools bei 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 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-tabs
Windows:
start chrome --auto-open-devtools-for-tabs
Linux:
google-chrome --auto-open-devtools-for-tabs
Die Entwicklertools werden automatisch für jeden neuen Tab geöffnet, bis du Chrome schließt.
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.
Weitere praktische Informationen finden Sie unter Entwicklertools anpassen.