In deze handleiding leert u hoe u Chrome DevTools gebruikt om de bronnen van een webpagina te bekijken. Bronnen zijn de bestanden die een pagina nodig heeft om correct weer te geven. Voorbeelden van bronnen zijn CSS-, JavaScript- en HTML-bestanden, evenals afbeeldingen.
In deze handleiding wordt ervan uitgegaan dat u bekend bent met de basisbeginselen van webontwikkeling en Chrome DevTools .
Open bronnen
Wanneer u de naam kent van de bron die u wilt inspecteren, biedt het Commandomenu een snelle manier om de bron te openen.
Druk op Control + P of Command + P (Mac). Het dialoogvenster Bestand openen wordt geopend.
Figuur 1 . Het dialoogvenster Bestand openen
Selecteer het bestand in de vervolgkeuzelijst of begin met het typen van de bestandsnaam en druk op Enter zodra het juiste bestand is gemarkeerd in het vak voor automatisch aanvullen.
Figuur 2 . Een bestandsnaam typen in het dialoogvenster Bestand openen
Open bronnen in het netwerkpaneel
Zie De details van een resource controleren .
Figuur 3 . Een bron inspecteren in het netwerkpaneel
Onthul bronnen in het netwerkpaneel van andere panelen
In het gedeelte Bladeren door bronnen hieronder ziet u hoe u bronnen uit verschillende delen van de DevTools-gebruikersinterface kunt bekijken. Als u ooit een bron in het netwerkpaneel wilt inspecteren, klikt u met de rechtermuisknop op de bron en selecteert u Onthullen in netwerkpaneel .
Figuur 4 . De optie Onthullen in netwerkpaneel
Blader door bronnen
Blader door bronnen in het netwerkpaneel
Zie Netwerkactiviteit registreren .
Figuur 5 . Paginabronnen in het netwerklogboek
Blader per map
Om de bronnen van een pagina te bekijken, geordend per map:
- Klik op het tabblad Bronnen om het paneel Bronnen te openen.
Klik op het tabblad Pagina om de bronnen van de pagina weer te geven. Het paginavenster wordt geopend.
Figuur 6 . Het paginavenster
Hier is een overzicht van de niet voor de hand liggende items in Figuur 6 :
- top is de belangrijkste context voor het bladeren door documenten.
- airhorner.com vertegenwoordigt een domein. Alle bronnen die eronder zijn genest, komen uit dat domein. De volledige URL van het bestand comlink.global.js is bijvoorbeeld waarschijnlijk
https://airhorner.com/scripts/comlink.global.js. - scripts is een map.
- (index) is het belangrijkste HTML-document.
- iu3 is een andere browsercontext. Deze context is waarschijnlijk gecreëerd door een
<iframe>-element dat is ingebed in de HTML van het hoofddocument. - sw.js is een uitvoeringscontext voor servicemedewerkers.
Klik op een bron om deze in de Editor te bekijken.
Figuur 7 . Een bestand bekijken in de Editor
Blader op bestandsnaam
Standaard groepeert het paginavenster bronnen op map. Om deze groepering uit te schakelen en de bronnen van elk domein als een platte lijst te bekijken:
- Open het paginavenster . Zie Bladeren per map .
Klik op Meer opties
en schakel Groeperen op map uit. 
Figuur 8 . De optie Groeperen op map
Bronnen zijn geordend op bestandstype. Binnen elk bestandstype zijn de bronnen alfabetisch geordend.
Figuur 9 . Het paginavenster na het uitschakelen van Groeperen op map
Blader op bestandstype
Om bronnen te groeperen op basis van hun bestandstype:
Klik op het tabblad Toepassing . Het applicatiepaneel wordt geopend. Standaard wordt het manifestvenster meestal als eerste geopend.
Figuur 10 . Het applicatiepaneel
Blader omlaag naar het deelvenster Frames .
Figuur 11 . Het deelvenster Frames
Vouw de secties uit waarin u geïnteresseerd bent.
Klik op een bron om deze te bekijken.
Figuur 11 . Een bron bekijken in het toepassingspaneel
Blader door bestanden op type in het netwerkpaneel
Zie Filteren op resourcetype .
Figuur 12 . Filteren op CSS in het netwerklogboek