Gebruik de Google Chrome Developer tools

Waarvoor gebruik je Google Chrome Developer tools 

Er zijn honderden manieren te bedenken waarop je de devtools van Google kunt gebruiken. Maar als het gaat om het verduurzamen van een website dan zijn dit wat ons betreft de belangrijkste functionaliteiten:

1. Controleer welke bestanden er ingeladen worden
2. Controleer het kleurcontrast op je website
3. Kijk onder de motorkap bij andere websites

Controleer welke bestanden er ingeladen worden

Met de Google Chrome Developer tools kun je gemakkelijk controleren welke bestanden er worden ingeladen wanneer je een bepaalde website bezoekt. Dit is handig als je bijvoorbeeld wilt weten welke afbeeldingen er gebruikt worden en hoe groot het bestandsformaat is dat ingeladen moet worden. Daarnaast kun je ook zien welke scripts er allemaal draaien en welke CSS bestanden de pagina gebruikt.

Zo bekijk je de bestanden die ingeladen worden:

1. Allereerst open je de Developer tools door op de drie puntjes rechtsboven te klikken en vervolgens “Meer tools” en “Developer tools” te selecteren.
2. Ga nu naar het tabblad “Netwerk” en ververs de pagina (CTRL + R of CMD + R).

Je ziet nu alle bestanden die worden ingeladen, inclusief de grootte, het type bestand en hoe lang het duurde voordat het bestand was geladen. Door te klikken op een bestandsnaam kun je de details ervan bekijken en controleren of het goed is ingeladen. Deze functie van de Developer tools is niet alleen handig voor webdesigners en -developers, maar ook voor iedereen die geïnteresseerd is in wat er allemaal gebeurt achter de schermen van een website. 

Controleer het kleurcontrast op je website

Een goede toegankelijkheid op je website is belangrijk. Kleurcontrast is daar een belangrijk onderdeel van. Je wilt ervoor zorgen dat mensen met een visuele beperking de content op je website optimaal kunnen ervaren. Het is belangrijk om te weten dat een goed kleurcontrast niet alleen belangrijk is voor mensen met een visuele beperking, maar ook voor mensen zonder visuele beperking. Wanneer kleurcontrast niet in orde is, kan het bijvoorbeeld ook lastig zijn om tekst te lezen in de zon. 

Zo controleer je het kleurcontrast op je website:

1. Allereerst selecteer je de tekst waarvan je het kleurcontrast wilt controleren.
2. Klik hier vervolgens met je rechtermuisknop op en kies voor inspecteren.
3. In de developertools klik je in het styles tabblad op de kleur van de tekst.

Contrast ratio geeft met vinkjes aan of het kleurcontrast voldoende is.  

Kijk onder de motorkap bij andere websites

Een leuke bijkomstigheid van de devtools is dat ze op alle websites werken. Dus ook op de websites van je concurrenten. Hierdoor kun je een kijkje nemen onder de motorkap en zien hoe de website opgebouwd is. Dit doe je door simpelweg de website van je concurrent te openen en vervolgens de Developer Tools te activeren.

Je kunt onder andere de opbouw van de website bekijken, de gebruikte techniek analyseren en zien welke scripts gebruikt worden voor bepaalde functionaliteiten. Dit is heel handig als je concurrent bijvoorbeeld een functionaliteit gebruikt, waarvoor je (nog) geen goede plug-in hebt kunnen vinden.