Er zijn veel manieren om Chrome DevTools te openen. Kies de methode die u het prettigst vindt uit dit uitgebreide overzicht.
Je kunt de ontwikkelaarstools openen via de Chrome-interface of het toetsenbord:
- Vanuit de dropdownmenu's in Chrome .
- Met speciale sneltoetsen waarmee je Elements , Console of het laatst gebruikte paneel kunt openen.
Leer bovendien hoe je DevTools automatisch kunt openen bij elk nieuw tabblad .
Open de ontwikkelaarstools vanuit het Chrome-menu.
Als je de voorkeur geeft aan een gebruikersinterface, kun je de ontwikkelaarstools openen via de vervolgmenu's in Chrome.
Open het paneel Elementen om de DOM of CSS te inspecteren.
Om een element op een pagina te inspecteren, klikt u met de rechtermuisknop op het element en selecteert u 'Inspecteren' .
DevTools opent het paneel Elementen en selecteert het element in de DOM-structuur. Op het tabblad Stijlen kunt u de CSS-regels zien die op het geselecteerde element zijn toegepast.
Open het laatst gebruikte paneel vanuit het hoofdmenu van Chrome.
Om het laatste DevTools-paneel te openen, klikt u op de knop rechts van de adresbalk en selecteert u 'More Tools' > 'Developer Tools' .
U kunt het laatste paneel ook openen met een sneltoets. Zie het volgende gedeelte voor meer informatie.
Open panelen met sneltoetsen: Elementen, Console of je laatst geopende paneel.
Als je liever het toetsenbord gebruikt, druk dan op een sneltoets in Chrome, afhankelijk van je besturingssysteem:
| OS | Elementen | Troosten | Uw laatste paneel |
|---|---|---|---|
| Windows of Linux | Ctrl + Shift + C | Ctrl + Shift + J | F12 Ctrl + Shift + I |
| Mac | Cmd + Option + C | Cmd + Option + J | Fn + F12 Cmd + Option + I |
Hier is een eenvoudige manier om de sneltoetsen te onthouden:
- C staat voor CSS.
- J staat voor JavaScript.
- Ik geef jouw keuze aan.
Met de sneltoets C opent u het paneel Elementen in de inspectiemodus . In deze modus worden handige tooltips weergegeven wanneer u de muis over elementen op een pagina beweegt. U kunt ook op een element klikken om de CSS ervan te bekijken in het tabblad Elementen > Stijlen .
Voor een volledige lijst met sneltoetsen voor DevTools, zie Toetsenbord sneltoetsen .
Laad de pagina opnieuw met of zonder cache terwijl de ontwikkelaarstools geopend zijn.
Met de ontwikkelaarstools geopend kunt u uw pagina op drie manieren opnieuw laden. Houd in de hoofdactiebalk van het Chrome-venster de knop ' ingedrukt en kies een van de opties:
Normale herlaadfunctie . Maakt gebruik van de cache om de herlaadtijd te versnellen.
Sneltoets: Cmd + R (macOS) of Ctrl + R (Windows/Linux).
Hard Reload . Omzeilt de cache, maar leegt deze niet.
Sneltoets: Cmd + Shift + R (macOS) of Ctrl + Shift + R (Windows/Linux).
Cache legen en geforceerd herladen . Leegt de cache voor alle sites voordat de pagina opnieuw wordt geladen.
DevTools automatisch openen bij elk nieuw tabblad.
Start Chrome vanuit de commandoregel en geef de vlag --auto-open-devtools-for-tabs :
Sluit alle actieve Chrome-instanties af.
Start je favoriete terminal- of opdrachtregelprogramma.
Afhankelijk van uw besturingssysteem voert u de volgende opdracht uit:
macOS:
open -a "Google Chrome" --args --auto-open-devtools-for-tabsWindows:
start chrome --auto-open-devtools-for-tabsLinux:
google-chrome --auto-open-devtools-for-tabs
DevTools wordt automatisch geopend bij elk nieuw tabblad totdat je Chrome sluit.
Wat volgt?
Bekijk vervolgens de volgende video om handige sneltoetsen en instellingen te leren voor snellere navigatie in DevTools.
Voor een meer praktische leerervaring kunt u bekijken hoe u DevTools kunt aanpassen .