Een must voor elke ontwikkelaar: development tools

6 september 20222 minuten leestijd

De ontwikkeling van webapplicaties staat nooit stil, de manier om deze te verbeteren dus ook niet. Omdat webapplicaties uitsluitend via browsers te benaderen zijn, is in de meeste browsers een functie ingericht die een website en webapplicatie (technisch) inzichtelijker maakt. Al jarenlang is de meest gebruikte browser Google Chrome. Daarom leggen we je uit hoe de Chrome development tools werken en hoe je deze kan gebruiken om je webapplicatie optimaal te houden.

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!

Hoe kan ik mijn website (grondig) inspecteren?

Sander Bruggeman

We helpen je graag met het realiseren van jouw online doelstellingen. Neem vandaag contact met ons op voor een kenningsmakingsgesprek!

Neem contact op

Ook interessant:

Maak jouw website slimmer met een API-koppeling
20 september 20223 minuten leestijd

Maak jouw website slimmer met een API-koppeling

Bespaar een hoop tijd én geld door jouw bedrijfsprocessen te automatiseren… Maak jouw website een stuk slimmer door een API-koppeling. Hoe? We helpen je graag!

Lees meer
3 tips voor het ontwerpen van een call-to-action knop
12 september 20222 minuten leestijd

3 tips voor het ontwerpen van een call-to-action knop

Het bedenken van een idee voor je website, dat is niet zo moeilijk. Maar hoe voeg je verschillende elementen samen, zodat je ontwerp optimaal is?

Lees meer
Haal meer omzet uit jouw website met funnels
30 augustus 20224 minuten leestijd

Haal meer omzet uit jouw website met funnels

Een goede funnel, het bepaalt het succes van jouw website. Maar wat is het precies én hoe maak je een goede funnel? We leggen het je uit en geven je drie tips zodat je direct aan de slag kunt.

Lees meer