Hulpprogramma’s voor ontwikkelaars: het verborgen pareltje in je webbrowser!

In elke goede webbrowser zitten verborgen tools, die bijzonder handig kunnen zijn wanneer je een website bouwt. Deze hulpprogramma’s voor ontwikkelaars, ook wel de ‘Developer Tools’ genoemd, zijn een nuttig middel om je eigen gebouwde website te analyseren en te verbeteren. Je wilt immers graag een website die binnen iedere webbrowser zo snel en goed mogelijk werkt!

Hulpprogramma's voor ontwikkelaars: het verborgen pareltje in je webbrowser!

Een woord vooraf

In dit artikel wil ik je graag toelichten hoe je de Developer Tools kunt gebruiken. Het is voornamelijk bedoeld voor webbouwers die ook zelf met HTML, JavaScript en CSS aan de slag gaan bij het bouwen en onderhouden van hun website.

Als je dit niet doet, wees niet gevreesd! Ook dan is het alsnog interessant om deze hulpprogramma’s te bekijken, zodat je meer inzicht krijgt in de werking van je website.

Voor dit artikel kies ik ervoor om gebruik te maken van de Developers Tools in Google Chrome. Microsoft Internet Explorer en Mozilla Firefox bieden dezelfde functionaliteit en kun je op vergelijkbare wijze gebruiken.

Ik zal met name ingaan op de basisfunctionaliteit die je helpt achterhalen hoe je website werkt. Verder licht ik aan de hand van een voorbeeld ook graag toe, hoe je kunt achterhalen waarom iets binnen het ontwerp van je website niet juist laadt.

Developer Tools starten

Je opent de Developer Tools door in Google Chrome rechts bovenaan op de menu-knop te klikken. Daar ga je naar ‘Meer hulpprogramma’s’ en kies je voor de optie ‘Hulpprogramma’s voor ontwikkelaars’.

Hulpprogramma's voor ontwikkelaars: hoe open je het?

Er opent zich nu een extra venster binnen je browser met daarin vele handige panelen. Veel opties! Het kan wat overweldigend zijn. Graag licht ik daarom toe waar je deze verschillende panelen voor kunt gebruiken

TIP!
Je kunt de Developer Tools in Google Chrome ook openen via een toetsenbordcombinatie. Bij MacOS is deze combinatie cmd + opt + i en bij Windows is dit ctrl + shift + i.

Het netwerk-paneel

In het netwerk-paneel kun je direct zien wat er gebeurt als je website laadt. Je kunt hierdoor achterhalen welke elementen van je website er lang over doen om in te laden en hoeveel kilobyte de overdracht van elk bestand aan data in beslag neemt. Tevens zie je welke status er wordt gegeven op elk bestand dat wordt geladen.

Hulpprogramma's voor ontwikkelaars: het netwerk-paneel

Als je goed kijkt naar de afbeelding hierboven, dan zie je dat de afbeelding ‘foto.jpg’ de status ‘404’ heeft. Dit betekent dat deze afbeelding niet kan worden ingeladen, aangezien deze niet kan worden gevonden. Vaak betekent dit dat de afbeelding niet (meer) op je webhostingpakket staat of dat het pad naar de afbeelding niet meer klopt.

TIP!
Mocht je zien dat een groot aantal PHP-bestanden trager laden, dan helpt het toevoegen van een cachingplugin. Ook het ophogen van de PHP-versie naar de laatste versie, PHP 7.0 op het moment, kan de snelheid van je website aanzienlijk verbeteren.

Het console-paneel

Het console-paneel biedt diagnostische informatie en inzicht in de werking van JavaScript binnen je website. In het console-paneel kun je direct communiceren met de achterliggende JavaScript van je website door direct commando’s in de ‘shell prompt’ van de console in te voeren. Ook kun je direct zien of er iets mis is met de JavaScript-code binnen je website.

Hulpprogramma's voor ontwikkelaars: het console-paneelIn de door mij gebruikte console vallen de volgende foutmeldingen op:

  • op regel 59 van de HTML-code kan de door mij gedefinieerde afbeelding ‘foto.jpg’ niet laden, omdat het bestand niet wordt gevonden;
  • op regel 21 van de HTML-code zit een ‘syntax-fout’ in de geschreven JavaScript-code.

Hierdoor weet ik dat deze twee punten binnen de website dienen te worden gecontroleerd. In dit voorbeeld dient ‘foto.jpg’ naar de juiste plek op de server te worden geüpload, zodat deze wel binnen de website laadt. Daarnaast dient de achterliggende JavaScript-code te worden gecontroleerd, aangezien ik in dit voorbeeld op regel 21 bewust 😉 een syntax-fout heb gemaakt.

Tevens kun je direct commando’s in de console uitvoeren. Als voorbeeld heb ik het eerste DOM-element opgevraagd van de body van mijn website met de functie:

document.body.firstElementChild

Het elementen-paneel

Met het elementen-paneel kun je direct de DOM-structuur van een webpagina inzien. ‘DOM’ staat voor ‘Document Object Model’ en kun je zien als een verzameling regels over hoe een browser een webpagina interpreteert. Via dit paneel kun je wijzigingen maken aan alle DOM-elementen en de achterliggende HTML en CSS binnen je website. Zo kun je direct zien wat een verandering aan je website doet, zonder dat je achterliggende bestanden hoeft te bewerken op de server.

Door op een bepaald gedeelte van je website op de rechtermuisknop te klikken en dan de optie ‘Inspecteren’ te kiezen kun je gelijk achterhalen welk HTML-fragment verantwoordelijk is voor een bepaald gedeelte van de pagina.

Hulpprogramma's voor ontwikkelaars: een element inspecterenZoals je in de bovenstaande afbeelding kunt zien, kan ik de kleur van de navigatiebalk aanpassen van lichtblauw naar donkerbruin in het achterliggende stylesheet van mijn website. Zo zie je, dankzij de elementen-optie, direct wat er gebeurt als je de kleur van je website aanpast.

TIP!
Op zoek naar de foutmeldingen van PHP? Deze worden bijgehouden op de server en kun je via DirectAdmin bekijken. Door de logboeken in DirectAdmin te gebruiken, kun je programmeerfouten in PHP-code achterhalen.

Ga voor een nóg betere website!

Als je de bovenstaande panelen van de Developers Tools onder de knie hebt, kun je werken naar een nóg mooiere, snellere en betere website. Door als webbouwer op de details van je website te blijven letten, zal dit uiteindelijk ook leiden tot meer en tevreden bezoekers.

Is alles wat ik hierboven beschreef voor jou koek en ei? Goed nieuws in dat geval, we zijn namelijk op zoek naar talentvolle en gedreven webontwikkelaars. Geïnteresseerd? Kom solliciteren als developer!

Zit je er ook aan te denken om een website op te zetten, maar heb je nog geen webhostingpakket? Check hier onze Slim-, Plus- en Pro-pakketten, zodat je snel aan de slag kunt!

Bestel je webhostingpakket →

P.S. Wil je op de hoogte blijven van alle artikelen, updates, tips en trucs die verschijnen op ons blog? Dat kan! Rechts bovenin via RSS, e-mail, het liken op Facebook, het +1’en op Google+ of het volgen op Twitter.

Deel App Tweet Mail Deel

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *