Chrome-Entwicklertools öffnen

Kayce Basken
Kayce Basken
Jecelyn Yeen
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova

Es gibt viele Möglichkeiten, die Chrome-Entwicklertools zu öffnen. Wähle aus dieser umfassenden Referenz deinen bevorzugten Weg aus.

Sie können über die Chrome-Benutzeroberfläche oder die Tastatur auf die Entwicklertools zugreifen:

Weitere Informationen zum automatischen Öffnen von 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.

Steuerfeld „Elemente“ öffnen, 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.

Die Option „Prüfen“ in einem Drop-down-Menü in Chrome

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

Ein im Steuerfeld „Elemente“ ausgewähltes Element.

Letzten Bereich, den Sie im Hauptmenü von Chrome verwendet haben, ö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 aus.

Die Option „Entwicklertools“ aus dem Dreipunkt-Menü

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 in Chrome eine Tastenkombination drücken:

Betriebssystem Elemente Console Mein letzter Bereich
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 dem Tastenkürzel C wird das Steuerfeld Elemente im Inspector-Modus Untersuchen. geöffnet. In diesem Modus werden nützliche Kurzinfos angezeigt, wenn Sie den Mauszeiger auf Elemente auf einer Seite bewegen. Sie können auf ein beliebiges Element klicken, um dessen CSS-Code im Bereich Elemente > Stile aufzurufen.

Der Bereich „Elemente“ im Prüfmodus mit einer Kurzinfo.

Eine vollständige Liste der Tastenkombinationen für die Entwicklertools 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:

  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
    

Solange du Chrome nicht schließt, werden die Entwicklertools automatisch für jeden neuen Tab geöffnet.

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 Übungen finden Sie unter Entwicklertools anpassen.