Hoe krijg je toegang tot en hoe gebruik je de ontwikkelaarstools van Chrome?

Chrome Developer Tools (DevTools) voelt onmisbaar aan zodra je eraan gewend bent, maar in het begin kan het een beetje overweldigend zijn. Vooral als je in de code van een website wilt rondneuzen of problemen wilt oplossen zonder enige programmeerkennis. Soms werkt het niet zoals verwacht – misschien hebben de elementen niet de juiste stijl, of laadt de pagina erg traag. En natuurlijk is het frustrerend als je niet kunt uitvinden hoe je het moet openen zonder eindeloos door menu’s te moeten klikken. Gelukkig zijn er een aantal beproefde manieren om DevTools te openen en te gebruiken, zodat je niet elke keer hoeft te zoeken.

Hoe je de ontwikkelaarstools van Chrome snel en eenvoudig kunt openen

Toetsenbord sneltoetsen gebruiken

Dit is waarschijnlijk de snelste manier, vooral als je gewend bent aan toetsenbordcommando’s. Op Windows of Linux druk je gewoon op Ctrl + Shift + Com het tabblad Elementen te openen en dingen te inspecteren. Als je direct naar de consolelog wilt gaan, druk je op Ctrl + Shift + J. En voor een algemene snelle schakelaar, Ctrl + Shift + Idruk je gewoon op F12. Op een Mac? Het is vrijwel hetzelfde, maar verwissel Ctrlmet Commanden Shiftmet Option. Bijvoorbeeld, Command + Option + Copent Elementen. Soms werkt dit niet meteen, vooral als Chrome eigenwijs is of als je een ongebruikelijke toetsenbordindeling hebt — probeer het dan gewoon opnieuw of herstart Chrome indien nodig.

Eerlijk gezegd zijn deze sneltoetsen echt een uitkomst — het is een beetje vreemd dat ze niet prominenter aanwezig zijn, maar als je ze eenmaal kent, is het sneller dan door menu’s te klikken.

Het Chrome-menu gebruiken — geen sneltoets nodig

Minder stiekem, maar net zo handig: klik met de rechtermuisknop op een element op een webpagina en kies ‘Inspecteren’. In plaats van door menu’s te moeten bladeren, opent Chrome direct de ontwikkelaarstools en markeert het betreffende element in het tabblad Elementen. Of klik op het menu met de drie puntjes rechtsboven in Chrome, ga naar ‘ Meer tools’ en selecteer vervolgens ‘Ontwikkelaarstools’. Deze methode is handig als je geen fan bent van snelkoppelingen of als je niet door menu’s wilt hoeven klikken.

Als Chrome niet direct opent of als de ontwikkelaarstools niet laten zien wat je verwacht, controleer dan of je Chrome-browser up-to-date is. Soms kunnen bugs of verouderde versies de juiste werking van de ontwikkelaarstools belemmeren.

Het maximale uit Chrome DevTools halen

Veel ontwikkelaars en nieuwsgierigen gebruiken DevTools voor allerlei taken: het inspecteren van de HTML van een pagina, het debuggen van JavaScript, het controleren van netwerkverzoeken of zelfs het testen van hoe hun pagina er op verschillende apparaten uitziet. Maar onthoud: alle wijzigingen die je aanbrengt, zijn slechts tijdelijk. Als je de pagina opnieuw laadt, wordt alles gereset. Toch is het erg handig om snel oplossingen te testen of te zien wat er misgaat voordat je de daadwerkelijke code aanpast.

Het is handig om vertrouwd te raken met de belangrijkste tabbladen:

• Elementen : Bekijk en bewerk de HTML/CSS van de pagina live. Handig om snel stijlen aan te passen of te ontdekken waarom iets er vreemd uitziet.
• Console : Voer JavaScript-codefragmenten uit, bekijk foutmeldingen of debug scripts. Handig als JavaScript niet naar behoren werkt of als je snel oplossingen wilt uitproberen.
• Netwerk : Houd alle netwerkverzoeken in de gaten — afbeeldingen, scripts, lettertypen, enz.— en zie hoe lang ze duren. Handig om traag ladende bronnen of onnodige verzoeken op te sporen.
• Prestaties : Registreer hoe de pagina laadt en zie waar de knelpunten zitten. Want Chrome maakt het natuurlijk onnodig moeilijk.
• Lighthouse : Voer audits uit voor SEO, prestaties, toegankelijkheid en best practices. Een soort gezondheidscheck voor je website, zonder dat je extra plug-ins nodig hebt.

Test responsief design eens uit.

Wil je zien hoe je website eruitziet op telefoons of tablets? Klik dan in de ontwikkelaarstools op de knop om het apparaat te wisselen (het kleine smartphone-icoontje) of druk op Ctrl + Shift + M. Je kunt vooraf ingestelde apparaten selecteren in een keuzemenu, zoals iPhone of Pixel, of aangepaste afmetingen instellen om ongebruikelijke schermformaten te testen. Dit helpt je meestal om lay-outproblemen te ontdekken die je op een groot scherm misschien over het hoofd ziet.

Controleer de snelheid en het aantal verzoeken van uw website.

Vraag je je wel eens af waarom je website traag aanvoelt? Ga naar het tabblad Netwerk, vernieuw de pagina en je ziet alle verzoeken die worden gedaan om de pagina te laden. Kijk onderaan: de DOMContentLoaded- en laadtijden geven aan hoe lang het duurde om de HTML te laden in verhouding tot de rest. Als die tijden hoog zijn, zijn sommige afbeeldingen misschien te groot of is je hosting traag. Je kunt zelfs tragere verbindingen simuleren via het dropdownmenu voor bandbreedtebeperking. Dit is handig als je wilt zien hoe de website presteert op apparaten uit het middensegment.

Wat dacht je van SEO en een basisaudit?

Een andere handige tool is Lighthouse, toegankelijk via het menu (het pictogram met de dubbele pijl > Lighthouse ).Voer een snelle SEO-audit, prestatiecontrole of beoordeling van best practices uit. Het is vergelijkbaar met een gezondheidsrapport voor je website. Pas de instellingen aan je doelapparaat aan, selecteer categorieën zoals SEO en voer de audit uit. De resultaten zijn meestal binnen 30 seconden beschikbaar, maar kunnen waardevolle tips geven voor het oplossen van metatags, het verbeteren van de contentstructuur of het oplossen van laadproblemen.

Pro-tip: De documentatie van Chrome ([hier](https://developer.chrome.com/docs/devtools/)) is behoorlijk gedetailleerd als je verder wilt gaan dan de basis.

Over het algemeen geldt dat als je eenmaal vertrouwd bent met deze opties, het gebruik van DevTools een tweede natuur wordt. Het is niet perfect – soms is het traag of bevat het bugs – maar uiteindelijk is het de snelste manier om problemen op te sporen en je website te verbeteren zonder te hoeven wachten op ontwikkelaars of zelf code te schrijven.

Samenvatting

• De sneltoetsen — Ctrl + Shift + C, Ctrl + Shift + J, en F12— zijn snelle manieren om DevTools te openen.
• Rechtsklikken en ‘Inspecteren’ is een eenvoudige manier om snel elementen te controleren.
• De belangrijkste tabbladen zoals Elements, Console, Network en Lighthouse zijn je beste vrienden bij het oplossen van problemen.
• Met de apparaatwisselfunctie kunt u zien hoe uw website er op verschillende schermen uitziet.
• Het tabblad Netwerk toont trage bronnen en helpt bij het optimaliseren van laadtijden.

Samenvatting

Het onder de knie krijgen van de Chrome Developer Tools opent een hoop mogelijkheden, of het nu gaat om debuggen of gewoon om te ontdekken hoe websites in elkaar zitten. Het kan in het begin even wennen zijn – vooral op sommige systemen – maar als je er eenmaal aan gewend bent, scheelt het enorm veel tijd. En als een beetje experimenteren je uren frustratie bespaart, is het het absoluut waard. Ik hoop dat dit iemand helpt om zonder al te veel gedoe aan de slag te gaan.