Deze pagina is vertaald door de Cloud Translation API.

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 .

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 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 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:

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 in Windows, zorg er dan voor dat u alle aanwezige Chrome-processen beëindigt vanuit Taakbeheer.
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-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 .