Wat zijn development tools?
Development tools is een gereedschap dat gebruikt kan worden tijdens, maar ook na, de ontwikkeling van websites en webapplicaties. De meeste browsers hebben tegenwoordig een functie ingebouwd die het mogelijk maakt om een website, webpagina of webapplicatie op meerdere manieren te bekijken. Deze functie is uitgebreid en in het eerste opzicht best indrukwekkend. Echter, wanneer je deze regelmatig gebruikt is het een must voor elke ontwikkelaar.
Hoe kan ik deze gebruiken?
Omdat niet iedere browser hetzelfde werkt, zijn de development tools niet in elke browser op dezelfde manier te starten. Daarom beperken we ons in dit artikel tot Google Chrome. Maak je gebruik van een andere browser? Dan kan je op deze site terecht voor informatie over andere browsers.
In Google Chrome open je simpelweg de browser en ga je naar de webpagina, -site of -applicatie en druk je op de toets ‘f12’ of gebruik je de toets combinatie ‘control’ + ‘shift’ + ‘i’. Aan de rechterzijde van het scherm wordt een venster geopend met boven in een overzicht van de verschillende categorieën waarvan je gebruik van kan maken.
Development tools in vogelvlucht
Het venster bestaat eigenlijk uit 2 verschillende vensters, waarbij er een splitsing wordt gemaakt tussen tabbladen voor informatie over de pagina en het gebruik van javascriptcode op de pagina.
Het bovenste deel
De bovenste deel bevat meerdere tabbladen waar je onder andere de htmlcode (Elements), bronnen (Sources), downloadsnelheden (Network) en overzichten van je webapplicatie zoals het gebruik van de cookies (Application) vindt. Hier kan je terecht om te kijken welke cookies worden gebruikt, van welke weblocaties er data nodig is of hoe de htmlcode van de pagina eruitziet. Wanneer een pagina er lang over doet om te laden, kan je hier achterhalen op welk onderdeel de pagina aan het wachten is.
Hoe kan dit mij helpen?
Standaard wordt het tabblad ‘Elements’ geopend. Deze laat je de -ingeklapte- htmlcode van de pagina zien met daaronder de styling van deze elementen. Je kan hierin zelfs de htmlcode en styling aanpassen om te zien hoe dit op de pagina wordt weergegeven. Let er wel op dat dit alleen op je lokale machine gebeurt en niet op de server, wijzigingen worden nooit opgeslagen en je kan dus geen aanpassingen doen aan de pagina. Het verversen van een pagina laat alle aanpassingen weer verdwijnen.
Ook kan je hier makkelijk zien hoe lang je pagina er over doet om te laden. Dit is zelfs terug te zien voor specifieke onderdelen van de pagina in het tabblad ‘Network’ of wanneer je nog preciezer wil kijken in het tabblad ‘Lighthouse’.
Preciezer weten hoe dit allemaal werkt? Google legt het uit in dit online document.
Het onderste deel
Tegenwoordig gebruikt bijna elke website javascript om de pagina interactief te maken. Het onderste deel van het venster bestaat daarom uit de console.
Hoe kan dit mij helpen?
De console is een scherm waar alle meldingen van javascript op worden getoond. Dit kunnen waarschuwingen zijn maar ook foutmeldingen of andere informatie. Dit scherm kan je dus informatie geven over het gebruik van de javascriptcode op de pagina en of deze nog juist werkt.
Conclusie
Development tools zijn bij de ontwikkeling van een webpagina, -site of -applicatie bijna niet meer weg te denken; op deze manier kan je knelpunten van je pagina bekijken en kan je foutmeldingen inzien. Maar ook wanneer je eigenaar of beheerder van een website of webapplicatie bent, kan je veel dingen inzien die je kunnen helpen om deze te verbeteren. Wil je meer weten over je webpagina, website of webapplicatie of hoe je deze tools kan gebruiken om deze te inspecteren? Wij staan voor je klaar!
