Open Chrome DevTools

Kayce Basken
Jecelyn Yeen
Sofia Emelianova
Sofia Emelianova
GitHub

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 Developer Tools 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 .