Tips och tricks för Chrome DevTools

Denna sida innehåller ett cheat sheet med tips och tricks för Chrome Developer Tools (DevTools), inklusive felsökningsåtgärder, nätverksövervakning, prestandaanalys och mycket mer.

Panelen Elements (Element)

Åtgärd	Kortkommando
Öppna DevTools	`F12` eller `Ctrl` + `Shift` + `I`
Växla enhetsverktygsfältet	`Ctrl` + `Shift` + `M`
Uppdatera och rensa cacheminnet	`Ctrl` + `Shift` + `R`
Visa elementets snabbmeny	`Högerklick`
Redigera element	`Enter`
Ta bort element	`Delete`
Kopiera element	`Ctrl` + `C`
Klistra in element	`Ctrl` + `V`
Visa elementets CSS-regler	`Ctrl` + `Shift` + `C`

Panelen Console (Konsol)

Åtgärd	Kortkommando
Öppna konsolen	`Esc`
Rensa konsolen	`Ctrl` + `L`
Kopiera markerad text	`Ctrl` + `C`
Klistra in text	`Ctrl` + `V`
Visa kommandohistorik	`Uppåt-pil` och `Nedåt-pil`
Visa detaljerad information om objektet	`Ctrl` + `Shift` + `C`

Panelen Network (Nätverk)

Åtgärd	Kortkommando
Starta/Stoppa inspelning av nätverksaktivitet	`Ctrl` + `E`
Rensa nätverksloggen	`Ctrl` + `R`
Filtrera förfrågningar	`Ctrl` + `F`
Visa detaljerad information om förfrågan	`Ctrl` + `Shift` + `C`

Panelen Performance (Prestanda)

Åtgärd	Kortkommando
Starta/Stoppa prestandainspelning	`Ctrl` + `E`
Exportera inspelad prestanda	`Ctrl` + `S`
Filtrera händelser	`Ctrl` + `F`

Panelen Memory (Minne)

Åtgärd	Kortkommando
Ta en ögonblicksbild (Snapshot)	`Ctrl` + `S`
Exportera ögonblicksbild	`Ctrl` + `Shift` + `S`
Filtrera ögonblicksbilder	`Ctrl` + `F`

Panelen Application (Applikation)

Åtgärd	Kortkommando
Uppdatera applikationen	`Ctrl` + `R`
Rensa lagring	`Ctrl` + `Shift` + `R`
Filtrera data	`Ctrl` + `F`

Panelen Security (Säkerhet)

Åtgärd	Kortkommando
Visa certifikat	`Ctrl` + `Shift` + `C`
Ladda om sidan och kringgå cachen	`Ctrl` + `Shift` + `R`

Övrigt (Misc)

Åtgärd	Kortkommando
Öppna inställningar	`F1`
Växla tema	`Ctrl` + `Shift` + `P` och skriv sedan `theme`
Visa kortkommandon	`Ctrl` + `Shift` + `P` och skriv sedan `shortcuts`