Een Overzicht van Geladen Scripts in Chrome met de Inspector Tools
Wanneer je werkt aan webontwikkeling of gewoon nieuwsgierig bent naar hoe een webpagina is opgebouwd, kan het handig zijn om te weten welke scripts er op een bepaalde pagina worden geladen. Dit kan je helpen om inzicht te krijgen in hoe de pagina functioneert en om eventuele prestatieproblemen op te sporen. Gelukkig biedt Google Chrome, een van de meest populaire webbrowsers, een krachtige tool genaamd ‘Inspector Tools’, waarmee je dit kunt doen. In dit artikel zullen we je laten zien hoe je met behulp van deze tools een overzicht kunt krijgen van de geladen scripts op een webpagina.
Stap 1: Open de Inspector Tools
Om te beginnen, open je Google Chrome en ga je naar de webpagina waarvan je de geladen scripts wilt bekijken. Klik vervolgens met de rechtermuisknop op ergens op de pagina en selecteer ‘Inspecteren’ of gebruik de sneltoets Ctrl+Shift+I (Windows/Linux) of Cmd+Option+I (Mac) om de Inspector Tools te openen.
Stap 2: Ga naar het Console Tabblad
In de Inspector Tools zie je verschillende tabbladen, zoals “Elements”, “Console”, “Sources”, enzovoort. Klik op het “Console”-tabblad om de console te openen. Hier kun je JavaScript-code invoeren en uitvoeren.
Stap 3: Voer de Code In
Kopieer en plak de onderstaande JavaScript-code in het consolevenster:
const rels = [
"preload",
"prefetch",
"preconnect",
"dns-prefetch",
"preconnect dns-prefetch",
"prerender",
"modulepreload",
];
rels.forEach((element) => {
const linkElements = document.querySelectorAll(`link[rel="${element}"]`);
const dot = linkElements.length > 0 ? "🟩" : "🟥";
console.log(`${dot} ${element}`);
linkElements.forEach((el) => console.log(el));
});
Dit stukje code zal alle <script>-elementen op de pagina selecteren die een src-attribuut hebben en informatie verzamelen over elk geladen script, zoals de bron (src), of het asynchroon (async) of uitgesteld (defer) wordt geladen, en of het het rendert blokkeert.
Stap 4: Bekijk het Overzicht
Nadat je de code hebt ingevoerd en op Enter hebt gedrukt, zal de console een tabel met informatie weergeven over de geladen scripts op de pagina. Je kunt nu eenvoudig controleren welke scripts worden geladen en of ze de pagina-rendering beïnvloeden.
- Het ‘src’-kolom geeft de bronnen weer van de geladen scripts.
- De ‘async’-kolom laat zien of een script asynchroon wordt geladen (true) of niet (false).
- De ‘defer’-kolom geeft aan of een script wordt uitgesteld (true) of niet (false).
- De ‘render blocking’-kolom laat zien of een script de pagina-rendering blokkeert (🟥) of niet.
Dit overzicht kan zeer nuttig zijn bij het optimaliseren van webpagina’s en het oplossen van problemen met de prestaties.
Met deze eenvoudige stappen kun je snel en gemakkelijk inzicht krijgen in de geladen scripts op een webpagina met behulp van de Inspector Tools in Google Chrome. Dit is een handige truc voor zowel webontwikkelaars als iedereen die meer wil weten over de opbouw van webpagina’s. Het kan je helpen bij het oplossen van problemen en het verbeteren van de prestaties van je websites. Veel plezier met het verkennen van de wereld van webontwikkeling!