Chrome DevTools Tipps und Tricks

Diese Seite bietet ein Cheat Sheet mit Tipps und Tricks für die Chrome Developer Tools (DevTools), einschließlich Debugging-Operationen, Netzwerküberwachung, Leistungsanalyse und mehr.

Elements Panel

Aktion	Tastenkürzel
DevTools öffnen	`F12` oder `Ctrl` + `Shift` + `I`
Geräte-Toolbar umschalten	`Ctrl` + `Shift` + `M`
Aktualisieren und Cache leeren	`Ctrl` + `Shift` + `R`
Kontextmenü des Elements anzeigen	`Rechtsklick`
Element bearbeiten	`Enter`
Element löшить	`Delete`
Element kopieren	`Ctrl` + `C`
Element einfügen	`Ctrl` + `V`
CSS-Regeln des Elements anzeigen	`Ctrl` + `Shift` + `C`

Console Panel

Aktion	Tastenkürzel
Konsole öffnen	`Esc`
Konsole leeren	`Ctrl` + `L`
Ausgewählten Text kopieren	`Ctrl` + `C`
Text einfügen	`Ctrl` + `V`
Befehlshistorie anzeigen	`Pfeil oben` und `Pfeil unten`
Detaillierte Informationen des Objekts anzeigen	`Ctrl` + `Shift` + `C`

Network Panel

Aktion	Tastenkürzel
Netzwerkaktivität aufzeichnen/stoppen	`Ctrl` + `E`
Netzwerk-Log leeren	`Ctrl` + `R`
Anfragen filtern	`Ctrl` + `F`
Detaillierte Informationen der Anfrage anzeigen	`Ctrl` + `Shift` + `C`

Performance Panel

Aktion	Tastenkürzel
Performance-Aufzeichnung starten/stoppen	`Ctrl` + `E`
Aufgezeichnete Performance exportieren	`Ctrl` + `S`
Ereignisse filtern	`Ctrl` + `F`

Memory Panel

Aktion	Tastenkürzel
Snapshot erstellen	`Ctrl` + `S`
Snapshot exportieren	`Ctrl` + `Shift` + `S`
Snapshots filtern	`Ctrl` + `F`

Application Panel

Aktion	Tastenkürzel
Anwendung aktualisieren	`Ctrl` + `R`
Speicher leeren	`Ctrl` + `Shift` + `R`
Daten filtern	`Ctrl` + `F`

Security Panel

Aktion	Tastenkürzel
Zertifikat anzeigen	`Ctrl` + `Shift` + `C`
Seite neu laden und Cache umgehen	`Ctrl` + `Shift` + `R`

Verschiedenes (Misc)

Aktion	Tastenkürzel
Einstellungen öffnen	`F1`
Theme umschalten	`Ctrl` + `Shift` + `P` dann `theme` eingeben
Tastenkürzel anzeigen	`Ctrl` + `Shift` + `P` dann `shortcuts` eingeben