Debugging tools - Chrome developer tools

Bij het ontwikkelen van websites is het essentieel om te begrijpen hoe browsers de content renderen. Een uitstekende manier om dit inzicht te verkrijgen, is door gebruik te maken van de Chrome Developer Tools, een reeks hulpmiddelen die al standaard in de Google Chrome-browser zijn ingebouwd. Deze tools stellen je in staat om de achterliggende code van webpagina's te inspecteren en te debuggen, prestaties te analyseren, en nog veel meer.

Hoe open je Chrome developer tools?

Met de Muis:
- Klik met de rechtermuisknop op een element op de webpagina die je wilt inspecteren.
- Kies vervolgens 'Inspecteren' uit het contextmenu. Dit opent de Developer Tools, meestal aan de rechterkant of onderkant van je browser.
Met een Sneltoets:
- Je kunt ook de sneltoets Ctrl+Shift+I (Windows/Linux) of Cmd+Opt+I (Mac) gebruiken om de Developer Tools direct te openen.

Aan de slag met Chrome developer tools

Eenmaal geopend, biedt Chrome Developer Tools je een schat aan mogelijkheden. Hier zijn enkele kernfuncties die je als ontwikkelaar kunt benutten:

Elements Paneel: Hier kun je de HTML-structuur van de webpagina inspecteren en wijzigingen in realtime aanbrengen. Het is ideaal voor het testen van snelle aanpassingen zonder de broncode te hoeven wijzigen.
Console: Gebruik de console om JavaScript-code uit te voeren, fouten te bekijken, en met de webpagina te interacteren via JavaScript.
Network Paneel: Dit paneel toont alle netwerkverzoeken die door de webpagina worden gedaan, inclusief de laadtijd van de verschillende onderdelen. Het is uitermate geschikt voor het analyseren van de prestaties en het opsporen van laadproblemen.
Performance Paneel: Hiermee kun je de prestaties van je website analyseren en ontdekken wat de snelheid beïnvloedt.

Caching uitschakelen

Wanneer je website of webapplicatie updates ondergaat, kunnen browsers nog steeds oudere, gecachte versies van bestanden laden. Dit kan ertoe leiden dat de weergave niet overeenkomt met de nieuwste versie van je site, wat verwarrend kan zijn tijdens het testen of ontwikkelen. Gelukkig biedt Chrome Developer Tools een eenvoudige oplossing om dit probleem te omzeilen door het cachen van bestanden tijdelijk uit te schakelen.

Het Uitschakelen van Caching via Chrome Developer Tools

Open Chrome Developer Tools:
- Dit doe je door met de rechtermuisknop op een willekeurig element op je pagina te klikken en 'Inspecteren' te selecteren, of door de sneltoets Ctrl+Shift+I (Windows/Linux) of Cmd+Opt+I (Mac) te gebruiken.
Navigeer naar het Tabblad 'Network':
- Binnen de Developer Tools vind je bovenaan een reeks tabbladen. Klik op 'Network' (Netwerk) om naar dit paneel te gaan.
Vink 'Disable Cache' Aan:
- In het 'Network'-paneel vind je een checkbox met de tekst 'Disable Cache' (Cache Uitschakelen) vlak onder de tabbladbalk, vaak naast andere opties zoals 'Preserve Log'. Zorg ervoor dat deze optie is aangevinkt. Dit zorgt ervoor dat zolang de Developer Tools geopend zijn, de browser geen bestanden zal cachen. Hierdoor worden steeds de nieuwste versies van bestanden geladen.

Het uitschakelen van de cache via Developer Tools werkt alleen zolang deze open zijn. Zodra je de Developer Tools sluit, zal de browser weer beginnen met het cachen van bestanden.

Zie eventueel ook:

Browser cache legen

HTTP Headers

Om inzicht te krijgen in de HTTP-headers van je website, biedt Chrome Developer Tools een krachtige functionaliteit binnen het 'Network' (Netwerk) tabblad. HTTP-headers bevatten cruciale informatie over de uitwisseling tussen de webbrowser en de server, zoals de status van het verzoek, de inhoudstype van het antwoord, cookies, en de bestemming van het verzoek. Hier volgt een stapsgewijze handleiding om deze informatie te bekijken:

Open Chrome Developer Tools

Via de Interface: Klik met de rechtermuisknop op een willekeurig element van de website en selecteer 'Inspecteren'.
Via Sneltoets: Gebruik Ctrl+Shift+I (Windows/Linux) of Cmd+Opt+I (Mac).

Ga naar het 'Network' Tabblad

Vind het 'Network' tabblad bovenaan in de Developer Tools en klik hierop. Als je dit tabblad niet ziet, kun je mogelijk meer opties vinden door op de '>>' te klikken aan de rechterkant van de tabbladenbalk.

Herlaad de Pagina

Herlaad de webpagina terwijl het 'Network' tabblad geopend is. Dit zal ervoor zorgen dat alle netwerkverzoeken die tijdens het laden van de pagina gemaakt worden, worden vastgelegd.

Selecteer een Verzoek

In het 'Network' paneel zie je een lijst van alle netwerkverzoeken die de pagina heeft gemaakt. Klik op een specifiek verzoek om meer details te zien. De verzoeken zijn vaak genoemd naar de bestanden of API-eindpunten waarmee ze communiceren.

Bekijk de HTTP-Headers

Nadat je een verzoek hebt geselecteerd, worden aan de rechterkant van het paneel verschillende tabbladen weergegeven met details over het verzoek. Klik op het tabblad 'Headers' om de HTTP-headers te bekijken.
Binnen dit tabblad kun je allerlei nuttige informatie vinden, zoals:
- Request URL en Method: Waar het verzoek naartoe wordt gestuurd en of het een GET, POST, of een ander type verzoek is.
- Status Code: De HTTP-statuscode van het antwoord, zoals 200 (OK) of 404 (Not Found).
- Remote Address: Het IP-adres van de server waarmee verbinding is gemaakt.
- Response Headers: Informatie die door de server wordt teruggestuurd, zoals het type content en cookies.
- Request Headers: Informatie die vanuit de browser naar de server wordt gestuurd, inclusief gebruikte webtechnologieën en cookies.

Door het analyseren van HTTP-headers kun je een dieper inzicht krijgen in de werking en prestaties van je website, en kun je problemen zoals trage laadtijden, beveiligingskwesties, en configuratiefouten identificeren en oplossen.

Issues met bestanden en 404 meldingen

Wanneer een bestand zoals een afbeelding of een script niet gevonden kan worden, resulteert dit in een 404-fout, wat aangeeft dat de server het gevraagde bestand niet kan vinden. Dergelijke fouten worden duidelijk zichtbaar in de 'Console' tab van Chrome Developer Tools:

Open Chrome Developer Tools met een rechtermuisklik op de pagina en selecteer 'Inspecteren', of gebruik de sneltoets Ctrl+Shift+I (Windows/Linux) of Cmd+Opt+I (Mac).
Ga naar de 'Console' tab. Hier zie je een lijst met fouten die zijn opgetreden tijdens het laden van de pagina, waaronder 404-fouten.
Analyseer de Foutmeldingen. Klik op de foutmelding voor meer details, zoals het pad naar het ontbrekende bestand. Dit kan je helpen bij het opsporen en corrigeren van de fout.

Cache uitzetten

Caching kan soms problemen veroorzaken door ervoor te zorgen dat verouderde versies van bestanden worden geladen. Om dit probleem op te lossen, kun je caching tijdelijk uitschakelen:

Open Chrome Developer Tools en ga naar het 'Network' tabblad.
Vink 'Disable Cache' aan. Zorg ervoor dat je dit doet terwijl de Developer Tools geopend zijn; caching wordt alleen uitgeschakeld voor de duur van de sessie.

IP-adres opzoeken

Als je wilt controleren vanaf welk IP-adres externe bestanden worden geladen:

Open het 'Network' tabblad in de Developer Tools na het herladen van de pagina.
Selecteer een verzoek in de lijst om de details te zien, inclusief het IP-adres onder 'Headers' > 'General' of vergelijkbaar.

Caching Header Details Begrijpen

HTTP-caching headers bepalen hoe en wanneer een browser cache gebruikt. Enkele belangrijke headers om te kennen zijn:

Cache-Control : Specificeert de cachingstrategie (bijvoorbeeld no-cache, private, max-age ).
Expires : Geeft een specifieke tijd aan wanneer de cache verloopt.
ETag : Een unieke identifier voor een versie van het bestand, waardoor browsers kunnen bepalen of een bestand in de cache nog actueel is.

Je kunt deze headers bekijken in het 'Network' tabblad van de Developer Tools door een specifiek verzoek te selecteren en de 'Headers' tab te inspecteren.