Debugging tools - Chrome developer tools

Tijdens het ontwikkelen kan het handig zijn om te controleren hoe de browser bepaalde dingen ziet. Een handige tool hiervoor is de Chrome Developer Tool die standaard al in de Chrome browser is ingebouwd. Je kunt deze openen door rechter muisknop op de pagina te doen en 'Inspect element' te selecteren. Aan de zijkant zal vervolgens een tab openen waar erg veel handige informatie in vermeld wordt. In deze handleiding zullen we je uitleggen hoe je slim gebruik kunt maken van deze tools bij het ontwikkelen van een website.

Caching uitschakelen
Wanneer er een update aan bestanden heeft plaatsgevonden is het mogelijk dat er vanuit de browser nog oude bestanden ingeladen worden. Hierdoor komt de weergave soms niet overeen met wat je zou verwachten. Een handige manier om dit te omzeilen is door caching uit te schakelen vanuit de developer tools.
Dev tools > Tabblad Network > Disable cache aanvinken

HTTP Headers
Om de HTTP headers van je website in te zien open het tabblad 'Network' en herlaad de pagina. Selecteer aan de linkerzijde een request om alle HTTP headers aan de rechterzijde te tonen. Vanaf hier kun je veel nuttige informatie uitlezen zoals bijvoorbeeld naar welk IP-adres het request gemaakt wordt.

IP-adres opzoeken
Soms worden bestanden vanaf een extern IP-adres ingeladen en wil je controleren of dit wel het juiste IP-adres is. Je kunt

Issues met bestanden en 404 meldingen
Wanneer je de Dev tools opent zie je bij het tabblad Console wanneer er fouten zijn opgetreden bij het laden van de website. Wanneer er een afbeelding ingeladen word die niet gevonden kan worden (een 404 melding) dan zul je dit direct tegenkomen in het overzicht. Hetzelfde geld voor JavaScript errors of andere ongeregeldheden

cache uitzetten