Chrome DevTools Tips en Trucs

Deze pagina biedt een spiekbriefje met tips en trucs voor Chrome Developer Tools (DevTools), inclusief debugging-bewerkingen, netwerkbewaking, prestatieanalyse en meer.

Elements Paneel

Actie	Sneltoets
Open DevTools	`F12` of `Ctrl` + `Shift` + `I`
Apparaatwerkbalk in-/uitschakelen	`Ctrl` + `Shift` + `M`
Vernieuwen en cache wissen	`Ctrl` + `Shift` + `R`
Contextmenu van element bekijken	`Rechtermuisklik`
Element bewerken	`Enter`
Element verwijderen	`Delete`
Element kopiëren	`Ctrl` + `C`
Element plakken	`Ctrl` + `V`
CSS-regels van element bekijken	`Ctrl` + `Shift` + `C`

Console Paneel

Actie	Sneltoets
Open console	`Esc`
Console leegmaken	`Ctrl` + `L`
Geselecteerde tekst kopiëren	`Ctrl` + `C`
Tekst plakken	`Ctrl` + `V`
Commandohistorie bekijken	`Pijl omhoog` en `Pijl omlaag`
Gedetailleerde informatie van object bekijken	`Ctrl` + `Shift` + `C`

Network Paneel

Actie	Sneltoets
Opname van netwerkactiviteit starten/stoppen	`Ctrl` + `E`
Netwerklogboek leegmaken	`Ctrl` + `R`
Verzoeken filteren	`Ctrl` + `F`
Gedetailleerde informatie van verzoek bekijken	`Ctrl` + `Shift` + `C`

Performance Paneel

Actie	Sneltoets
Prestatie-opname starten/stoppen	`Ctrl` + `E`
Opgenomen prestatie exporteren	`Ctrl` + `S`
Gebeurtenissen filteren	`Ctrl` + `F`

Memory Paneel

Actie	Sneltoets
Momentopname (Snapshot) maken	`Ctrl` + `S`
Momentopname exporteren	`Ctrl` + `Shift` + `S`
Momentopnamen filteren	`Ctrl` + `F`

Application Paneel

Actie	Sneltoets
Applicatie vernieuwen	`Ctrl` + `R`
Opslag wissen	`Ctrl` + `Shift` + `R`
Gegevens filteren	`Ctrl` + `F`

Security Paneel

Actie	Sneltoets
Certificaat bekijken	`Ctrl` + `Shift` + `C`
Pagina herladen en cache omzeilen	`Ctrl` + `Shift` + `R`

Diversen (Misc)

Actie	Sneltoets
Instellingen openen	`F1`
Thema wijzigen	`Ctrl` + `Shift` + `P` en typ vervolgens `theme`
Sneltoetsen bekijken	`Ctrl` + `Shift` + `P` en typ vervolgens `shortcuts`