Chrome-Entwicklertools öffnen

Kayce Basques
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

Es gibt viele Möglichkeiten, die Chrome-Entwicklertools zu öffnen. Wählen Sie aus dieser umfassenden Referenz Ihre bevorzugte Methode aus.

Du kannst über die Chrome-Benutzeroberfläche oder die Tastatur auf die Entwicklertools zugreifen:

Weitere Informationen zum automatischen Öffnen der Entwicklertools für jeden neuen Tab

Entwicklertools über Chrome-Menüs öffnen

Wenn Sie die Benutzeroberfläche bevorzugen, können Sie über die Drop-down-Menüs in Chrome auf die Entwicklertools zugreifen.

Öffnen Sie das Steuerfeld „Elemente“, um das DOM oder CSS zu überprüfen.

Klicken Sie zum Prüfen mit der rechten Maustaste auf ein Element auf einer Seite und wählen Sie Untersuchen aus.

Die Option „Untersuchen“ in einem Drop-down-Menü in Chrome.

In den Entwicklertools wird der Bereich Elements geöffnet und das Element in der DOM-Baumstruktur ausgewählt. Im Bereich Styles werden CSS-Regeln angezeigt, die auf das ausgewählte Element angewendet wurden.

Ein im Steuerfeld „Elemente“ ausgewähltes Element

Im Hauptmenü von Chrome zuletzt verwendeten Bereich öffnen

Um den letzten Entwicklertools-Bereich zu öffnen, klicke rechts neben der Adressleiste auf die Schaltfläche Dreipunkt-Menü. und wähle Weitere Tools > Entwicklertools.

Im Dreipunkt-Menü ist die Option „Entwicklertools“ ausgewählt.

Alternativ können Sie den letzten Bereich mit einer Verknüpfung öffnen. Weitere Informationen finden Sie im nächsten Abschnitt.

Steuerfelder mit Tastenkombinationen öffnen: „Elemente“, „Konsole“ oder Ihr letztes Steuerfeld

Wenn Sie die Tastatur bevorzugen, drücken Sie je nach Betriebssystem eine Tastenkombination in Chrome:

Betriebssystem Elemente Console Letztes Steuerfeld
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 ganz einfach merken:

  • C steht für CSS.
  • J für JavaScript.
  • I kennzeichnet Ihre Auswahl.

Mit der Tastenkombination C wird der Bereich Elemente im Untersuchen.-Inspector-Modus geöffnet. In diesem Modus werden hilfreiche Kurzinfos angezeigt, wenn du den Mauszeiger auf Elemente auf einer Seite bewegst. Sie können auch auf ein Element klicken, um dessen CSS-Code unter Elements > Stile:

Das Steuerfeld „Elemente“ im Inspector-Modus mit einer Kurzinfo.

Eine vollständige Liste der Tastenkombinationen in den Entwicklertools findest du 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:

  1. Beenden Sie alle laufenden Chrome-Instanzen.

  2. Führen Sie Ihre bevorzugte Terminal- oder Befehlszeilenanwendung aus.

  3. 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 findest du im Artikel zum Anpassen von Entwicklertools.