Hoe kunnen we aan de juiste data komen?
In de meeste webbrowser zitten tools, die bijzonder handig kunnen zijn wanneer je een website wilt analyseren. Deze hulpprogramma’s voor ontwikkelaars, ook wel de ‘Developer Tools’ genoemd, zijn een nuttig middel om de requests en responses te analyseren en te loggen.
Per tabblad kan je het hulpprogramma opstarten. Meestal is de voor ons relevante informatie te vinden onder het tabje ‘Netwerk’. Zorg ervoor dat je de opties voor cache & logging aan hebt staan:
Nu wordt er bijgehouden welke verzoeken (requests) er allemaal plaatsvinden.
Wanneer er fouten optreden in zaaksysteem zullen de betreffende regels in de netwerktab zichtbaar zijn. Deze informatie is voor ons erg van belang.
Neem contact met ons op als je deze foutmeldingen tegenkomt op de omgeving en ziet staan in het hulpprogramma
Hoe kan je de Developer tool openen?
De DevTools kunnen op verschillende manieren geopend worden. Hieronder worden de vier meest gebruikte manieren uitgelegd.
- De DevTools kunnen geopend worden wanneer er op de pagina op rechtermuis klik wordt gedrukt. Hierbij wordt een menu geopend waarbij de DevTools onder “Element inspecteren” staat.
- De DevTools kunnen ook geopend worden wanneer er op F12 wordt gedrukt.
- Een andere ‘shortcut’ voor de DevTools zijn Ctrl+Shift+I voor Windows en Cmd+Opt+I voor de Mac.
- Als laatste kunnen de DevTools benaderd worden via het menu van Google Chrome. Hierbij staat het onder “Tools > Developer Tools” of “Meer hulpprogramma’s > Hulpprogramma’s voor ontwikkelaars”.
De verschillende tabs in de Developer Tool
Google Chrome Developertool
Wanneer de Developer Tools geopend zijn, is er te zien dat er verschillende tabs zijn. Hieronder zullen de belangrijkste tabs toegelicht worden en wat hier allemaal mogelijk mee is.
- ELEMENTS
op dit tabblad zie je alle HTML en CSS van de pagina waarop je je bevind. - CONSOLE
op dit tabblad zie je alle javascript (die in gebruik zijn) van de pagina waarop je je bevind. - SOURCES
Hier vind je de locatie waar de scripts staan - NETWORK PANEL
op dit tabblad zie je een overzicht van alle afbeeldingen, scripts en andere elementen die in de site geladen worden. Hier wordt ook getoond wat de laadtijden zijn van alle elementen.
In het NETWORK PANEL heb je de mogelijk om een aantal opties te selecteren:
- Preserve log > als dit aan staat dan worden alle request onthouden. Staat dit uit dan krijg je bij het navigeren naar een andere pagina een nieuwe set gegevens.
- Disable cache > als dit aan staat dan worden altijd verse gegevens opgehaald > staat dit uit dan wordt beschikbare data uit de cache gebruikt bij het laden van de pagina.
- Offline > hiermee forceer je het verbreken van de verbinding met de server.
De meest voorkomende type requests (van de browser naar de server) uit het NETWORK PANEL zijn:
XHR → XML HTTP Request (xml, http, json or txt).
CSS → Cascading Style Sheets, in deze bestanden staat beschreven hoe de verschillende elementen vorm gegeven moeten worden.
IMG → Images, alle afbeeldingen
MEDIA → alle vormen van media (anders dan afbeeldingen)
HTML status codes:
100 informational response
200 succesvolle acties
300 redirections
400 client errors (aan de kant van de gebruiker, vaak heeft dit met rechten te maken, errors als FORBIDDEN, UNSUPPORTED)
500 server errors (aan de kant van de website, errors als UNAVAILABLE, TIME-OUT, AUTHENTICATION)
Klik HIER 1 voor de volledige lijst met codes
Welke informatie is nuttig en hoe moeten we deze interpreteren?
Wanneer we willen nagaan welke requests er niet goed gaan of lang duren dan kijken we naar de informatie onder NETWORK.
De requests die falen worden bijna altijd in rode letters weergegeven. Kijk hierbij ook naar de status code die bij het request staat.
Vervolgens kan je klikken op dit request, je krijg nu de informatie te zien over deze call. Deze informatie is uitgesplitst in:
Headers > info over de URL die aangeroepen wordt, de status van het request en de informatie over de gebruiker en zijn/haar sessie gegevens.
Preview > een voorvertoning van het request, dit kan een plaatje zijn of bijvoorbeeld een stuk script
Response > het antwoord op het request, in het geval van een foutmelding zal je hier vaak nuttige informatie zien.
Cookies > hier staan de randvoorwaarden, Dit tabblad is alleen beschikbaar als cookies worden verzonden.
Timing > hier is te zien hoe lang alle onderdelen van het request hebben geduurd.