Entdecken Sie die vielfältigen und intuitiven Möglichkeiten, die Chrome DevTools zu öffnen und zu nutzen. Ob Sie ein erfahrener Entwickler sind oder gerade erst mit dem Webdesign beginnen, dieser Leitfaden führt Sie durch die effizientesten Methoden, um auf dieses leistungsstarke Werkzeug zuzugreifen und Ihre Webseitenoptimierung auf das nächste Level zu heben. Von einfachen Menüoptionen bis hin zu speziellen Tastenkombinationen – wir decken alles ab, was Sie wissen müssen, um das volle Potenzial der Chrome DevTools auszuschöpfen.
Die verschiedenen Wege zu den Chrome DevTools
Die Chrome DevTools sind ein unverzichtbares Werkzeug für jeden, der die Leistung, das Design und die Funktionalität von Webseiten analysieren und verbessern möchte. Glücklicherweise bietet Google Chrome mehrere benutzerfreundliche Methoden, um auf diese Tools zuzugreifen. Sie können entweder die Benutzeroberfläche von Chrome nutzen oder Tastenkombinationen verwenden, die oft den Workflow beschleunigen. Für diejenigen, die eine konsistente Überwachung wünschen, gibt es sogar die Möglichkeit, die DevTools automatisch für jeden neuen Tab zu öffnen.
Zugriff über die Chrome-Menüs
Wenn Sie die visuelle Navigation bevorzugen, lassen sich die DevTools einfach über die Dropdown-Menüs in Chrome aufrufen.
Das Element-Panel: Inspizieren von DOM und CSS
Um ein bestimmtes Element auf einer Webseite zu untersuchen, klicken Sie mit der rechten Maustaste auf das Element und wählen Sie im Kontextmenü die Option “Untersuchen“.
Das Kontextmenü mit der Option "Untersuchen" in Chrome.
Daraufhin öffnet sich das DevTools-Fenster und wählt automatisch das von Ihnen ausgewählte Element im DOM-Baum des “Elemente“-Panels aus. Im Reiter “Styles” können Sie direkt die CSS-Regeln einsehen, die auf dieses Element angewendet werden, und diese bei Bedarf bearbeiten.
Ein Element, das im Elemente-Panel ausgewählt ist und dessen CSS-Stile angezeigt werden.
Öffnen des zuletzt verwendeten Panels über das Hauptmenü
Eine weitere komfortable Möglichkeit, das zuletzt geöffnete Panel der DevTools aufzurufen, ist über das Hauptmenü von Chrome. Klicken Sie auf das Drei-Punkte-Menü (⋮) rechts neben der Adressleiste und navigieren Sie zu “Weitere Tools” > “Entwicklertools“.
Die Option "Entwicklertools" im Drei-Punkte-Menü von Chrome.
Alternativ können Sie das zuletzt geöffnete Panel auch mit einer Tastenkombination öffnen. Die nächste Sektion erklärt die entsprechenden Shortcuts für Ihr Betriebssystem.
Panels mit Tastenkombinationen öffnen: Elemente, Konsole oder das zuletzt verwendete Panel
Für Tastatur-Enthusiasten bietet Chrome eine Reihe von Shortcuts, um die DevTools schnell zu öffnen:
| Betriebssystem | Elemente-Panel | Konsolen-Panel | Zuletzt verwendetes Panel |
|---|---|---|---|
| Windows oder Linux | Strg + Umschalt + C | Strg + Umschalt + J | F12 / Strg + Umschalt + I |
| Mac | Cmd + Option + C | Cmd + Option + J | Fn + F12 / Cmd + Option + I |
Hier eine kleine Eselsbrücke, um sich die Shortcuts leichter zu merken:
- C steht für CSS.
- J steht für JavaScript.
- I steht für “Inspect” (Untersuchen) oder Ihre Wahl des zuletzt geöffneten Panels.
Der Shortcut Strg + Umschalt + C (oder Cmd + Option + C auf dem Mac) öffnet das “Elemente“-Panel im sogenannten Inspektor-Modus. In diesem Modus sehen Sie hilfreiche Tooltips, wenn Sie mit der Maus über Elemente auf der Webseite fahren. Sie können auch direkt auf ein Element klicken, um dessen CSS-Stile im “Elemente” > “Styles“-Tab anzuzeigen.
Das Elemente-Panel im Inspektionsmodus mit einem Tooltip.
Eine vollständige Übersicht über alle Tastenkombinationen der DevTools finden Sie in der Dokumentation zu den Tastenkombinationen.
Automatische Öffnung der DevTools für jeden neuen Tab
Wenn Sie möchten, dass sich die DevTools automatisch für jeden neu geöffneten Tab anzeigen, können Sie Chrome mit einem speziellen Kommandozeilenflag starten.
Beenden Sie alle laufenden Chrome-Instanzen.
Öffnen Sie Ihr bevorzugtes Terminal oder Ihre Eingabeaufforderung.
Führen Sie je nach Betriebssystem den folgenden Befehl aus:
- macOS: