Open Chrome DevTools

Kayce Basken
Kayce Basques
Jecelyn Yeen
Jecelyn Yeen
Sofia Emelianova
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:

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 .

De optie Inspecteren in een vervolgkeuzemenu in Chrome.

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.

Een element dat is geselecteerd in het paneel Elementen.

Open het laatste paneel dat u hebt gebruikt vanuit het hoofdmenu van Chrome

Om het laatste DevTools-paneel te openen, klikt u op de Menu met drie stippen. knop rechts van de adresbalk en selecteer Meer tools > Ontwikkelaarstools .

De optie Ontwikkelaarstools geselecteerd in het menu met drie stippen.

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 Inspecteren. 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 .

Het Elementenpaneel in de infovenstermodus met knopinfo.

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:

  1. Sluit alle actieve Chrome-instanties.

  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?

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 .