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 licht ik je graag toe 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. Niet gevreesd als je dit niet doet! Deze hulpprogramma’s zijn alsnog nuttig om te bekijken. Zo krijg je meer inzicht in de werking van je website.

In dit geval gebruik ik de Developers Tools in Google Chrome. Microsoft Internet Explorer en Mozilla Firefox bieden dezelfde functionaliteit en gebruik je op vergelijkbare wijze. Verder ga ik met name in op de basisfunctionaliteit die je helpt achterhalen hoe je website werkt. Daarnaast toon ik aan de hand van een voorbeeld hoe je ziet waarom iets binnen het ontwerp van je website niet juist laadt.

Heb je nog geen webhostingpakket?

Zit je er ook aan te denken om een website op te zetten? Bekijk onze webhostingpakketten, zodat je snel aan de slag kunt!

Bekijk webhostingpakketten →

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 netwerkpaneel

In het netwerkpaneel 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-paneel

In 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 elementenpaneel

Met het elementenpaneel 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 inspecteren

Zoals 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? We zoeken talentvolle en gedreven webontwikkelaars. Geïnteresseerd? Kom solliciteren als developer!

P.S. Blijf op de hoogte en volg ons via Facebook, Twitter, Instagram, e-mail en RSS. Heb je vragen, tips of opmerkingen? Laat het achter als reactie. Vond je het artikel nuttig? Deel het dan met anderen!

Deel App Tweet Mail Deel

2 thoughts on “Hulpprogramma’s voor ontwikkelaars: het verborgen pareltje in je webbrowser!

  1. Stien op zei:

    Ik moet voor een cursus javascript een html bestand openen in die console. Maar HOE dan, de leraar is niet bereikbaar en ik kom in de console wel bij die puntjes en bestand openen maar dan kan ik.niet naar het juiste bestand schrollen, blijft ” hangen” op de map. Er moet ook nog een andere manier zijn het bestand openen in de browser of zo iets, maar ik krijg het bestand links te zien in de browser maar niet rechts in de console, snap er niets van . Kunt u het mij uitleggen?. Dank

    • Bedankt voor je reactie, Stien! Als je een HTML-bestand op je computer opent in je browser (Open met … en dan je browser kiezen) en dan de Inspector Tools start, dan hoor je de code van de pagina in je console te zien. Als leverancier van webhosting kunnen we je hier helaas verder niet inhoudelijk mee helpen. Hopelijk kan degene die de cursus geeft het je stap voor stap uitleggen. In elk geval veel succes gewenst!

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.