Er zijn veel manieren om Chrome DevTools te openen. Kies uw favoriete manier uit deze uitgebreide referentie.
U kunt DevTools openen via de Chrome-gebruikersinterface of het toetsenbord:
- Vanuit vervolgkeuzemenu's in Chrome .
- Met speciale snelkoppelingen die Elements , Console of het laatste paneel dat u hebt gebruikt openen.
Leer bovendien hoe u DevTools automatisch opent voor elk nieuw tabblad .
Open DevTools vanuit Chrome-menu's
Als u de voorkeur geeft aan een gebruikersinterface, heeft u toegang tot DevTools via vervolgkeuzemenu's in Chrome.
Open het paneel Elementen om de DOM of CSS te inspecteren
Om te inspecteren klikt u met de rechtermuisknop op een element op een pagina en selecteert u Inspecteren .
DevTools opent het paneel Elementen en selecteert het element in de DOM-structuur. In het deelvenster Stijlen ziet u CSS-regels die op het geselecteerde element zijn toegepast.
Open het laatste paneel dat u hebt gebruikt vanuit het hoofdmenu van Chrome
Om het laatste DevTools-paneel te openen, klikt u op de 
knop rechts van de adresbalk en selecteer Meer tools > Ontwikkelaarstools .
Als alternatief kunt u het laatste paneel openen met een snelkoppeling. Zie het volgende gedeelte voor meer informatie.
Open panelen met snelkoppelingen: Elementen, Console of uw laatste paneel
Als u de voorkeur geeft aan een toetsenbord, drukt u op een snelkoppeling in Chrome, afhankelijk van uw besturingssysteem:
| Besturingssysteem | Elementen | Troosten | Je laatste paneel |
|---|---|---|---|
| Windows of Linux | Ctrl + Shift + C | Ctrl + Shift + J | F12 Ctrl + Shift + I |
| Mac | Cmd + Optie + C | Cmd + Optie + J | Fn + F12 Cmd + Optie + I |
Hier is een eenvoudige manier om de snelkoppelingen te onthouden:
- C staat voor CSS.
- J voor JavaScript.
- Ik geef jouw keuze aan.
De C- snelkoppeling opent het paneel Elementen in 
inspecteurmodus. Deze modus toont u nuttige tooltips wanneer u over elementen op een pagina beweegt. U kunt ook op een element klikken om de CSS ervan te bekijken in het deelvenster Elementen > Stijlen .
Zie Sneltoetsen voor de volledige lijst met DevTools-sneltoetsen.
Open DevTools automatisch op elk nieuw tabblad
Voer Chrome uit vanaf de opdrachtregel en geef de vlag --auto-open-devtools-for-tabs door:
Sluit alle actieve Chrome-instanties.
Voer uw favoriete terminal- of opdrachtregeltoepassing uit.
Afhankelijk van uw besturingssysteem voert u de volgende opdracht uit:
MacOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsRamen:
start chrome --auto-open-devtools-for-tabsLinux:
google-chrome --auto-open-devtools-for-tabs
DevTools wordt automatisch geopend voor elk nieuw tabblad totdat u Chrome sluit.
Wat is het volgende?
Bekijk vervolgens de volgende video om enkele handige snelkoppelingen en instellingen te leren voor snellere DevTools-navigatie.
Voor een meer praktische leerervaring, zie hoe u DevTools kunt aanpassen .