Open Chrome DevTools

Kayce Basques

Jecelyn Yeen

Sofia Emelianova

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. Op het tabblad 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 more_vert rechts van de adresbalk en selecteert u Meer tools > Developer Tools .

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 de modus Ink_Selection Inspector. 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 op het tabblad 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 :

1. Sluit alle actieve Chrome-instanties.

   Belangrijk punt: deze vlag werkt alleen voor de eerste Chrome-instantie die u opent. Als het voor u niet werkt, bijvoorbeeld op Windows, zorg er dan voor dat u alle aanwezige Chrome-processen beëindigt vanuit Taakbeheer.

2. Voer uw favoriete terminal- of opdrachtregeltoepassing uit.

3. Afhankelijk van uw besturingssysteem voert u de volgende opdracht uit:

• macOS:

  open -a "Google Chrome" --args --auto-open-devtools-for-tabs
  

• Ramen:

  start chrome --auto-open-devtools-for-tabs
  

• Linux:

  google-chrome --auto-open-devtools-for-tabs
  

DevTools wordt automatisch geopend voor elk nieuw tabblad totdat u Chrome sluit.

Wat is het volgende?

Succes: gefeliciteerd! Je hebt met succes de kracht van Chrome DevTools ontgrendeld.

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 .