Chrome-Entwicklertools öffnen

Kayce Basques
Kayce Basques
Jecelyn Yeen
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova

Es gibt viele Möglichkeiten, die Chrome-Entwicklertools zu öffnen. In dieser umfassenden Referenz finden Sie die passende Option.

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

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 die Drop-down-Menüs in Chrome auf die Entwicklertools zugreifen.

Elementbereich öffnen, 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.

Die Option „Inspect“ (Prüfen) in einem Drop-down-Menü in Chrome.

In DevTools wird der Bereich Elemente geöffnet und das Element im DOM-Baum ausgewählt. Auf dem Tab Stile sehen Sie CSS-Regeln, die auf das ausgewählte Element angewendet wurden.

Ein Element, das im Elementbereich ausgewählt ist.

Ü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.

Die Option „Entwicklertools“ ist über das Dreipunkt-Menü ausgewählt.

Alternativ können Sie das letzte Steuerfeld auch mit einem Tastenkürzel öffnen. Weitere Informationen finden Sie im nächsten Abschnitt.

Steuerfelder mit Tastenkombinationen öffnen: „Elemente“, „Konsole“ oder Ihr letztes 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 Cmd + Option + C Befehlstaste + Wahltaste + J Fn + F12
Befehl + Wahltaste + I

So können Sie sich die Tastenkürzel 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.

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

Eine vollständige Liste der Tastenkombinationen für DevTools finden Sie unter Tastenkombinationen.

Entwicklertools in 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 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.

Weitere Informationen finden Sie unter Entwicklertools anpassen.