Website

Een must voor elke ontwikkelaar: development tools

2 min 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.

Een must voor elke ontwikkelaar: development tools

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!

Ook interessant

Wireframe, een solide basis voor je website
2 min leestijd

Wireframe, een solide basis voor je website

Website: De website ontwikkeling bij Nederdesign gaat via een structureel traject. Bij de website ontwikkeling starten we met een wireframe. Maar wat is dit precies en hoe ‘lees’ je deze?

Lees meer
Visuele hiƫrarchie
2 min leestijd

Visuele hiƫrarchie

Website: Hiërarchie is belangrijk in een website. Binnen één oogopslag moet duidelijk zijn wat het meest belangrijk is op de website. Visueel doe je dit met (tekst)grootte, kleuren en meer.

Lees meer
Iconen, musthaves op je website
5 min leestijd

Iconen, musthaves op je website

Website: Iconen zijn onderdeel van je website. Of het nu gaat over een idee op papier, een digitaal prototype of een website die live staat.

Lees meer
Bekijk alle berichten