Er zijn verschillende waardevolle webdevelopment resources te vinden, van boeken, video’s tot online cursussen en meer. Leren hoe je de Inspect Element tool van je browser kan gebruiken is ook zo’n waardevol instrument. Je kan hiermee een hoop leren, en je hebt er altijd toegang toe.

Met de Inspect Element feature kan je zien hoe een website gebouwd is. Alhoewel je alleen de code van de frontend kan zien, zoals HTML, CSS en soms JavaScript, biedt het wel een hoop inzicht in hoe de developers een bepaalde website hebben gebouwd.

In dit artikel laten we je zien hoe je de Inspect Element kan gebruiken, naast een aantal gerelateerde technologieën, features en functionaliteiten. Laten we eerst even bekijken hoe je de Inspect Element tool zelf precies kan gebruiken.

De Inspect Element tool

In de begindagen van het internet was er maar één manier om de code van een website te bekijken, namelijk de View source feature.

Kinsta.com’s “View Source” pagina.
Kinsta.com’s “View Source” pagina.

Dit was de standaard voordat we overal Cascading Style Sheets (CSS) en JavaScript gebruikten. Webdevelopers gebruikten HTML voor alle elementen van een website, inclusief content, design, functies… eigenlijk alles dus.

Naarmate het internet zich verder ontwikkelde, en de onderliggende technologie krachtiger werd, werd het ook tijd om betere tools te maken. Firebug van Firefox was één van de eerste oplossingen en werkte als tool om onder de motorkap te kijken:

De logo's van Firefox en Firebug.
De logo’s van Firefox en Firebug.

Na verloop van tijd werd deze functionaliteit ingevoerd bij bijna alle browsers. Vandaag de dag kennen we die feature als de Inspect Element tool:

De Inspect Element tool op de Kinsta website.
De Inspect Element tool op de Kinsta website.

Het is een krachtige en handige manier om de onderliggende technologie en code van een website te bekijken. Je kan het dan ook op verschillende plekken openen, bijvoorbeeld via een toolbarmenu, door te rechtsklikken op een pagina, of via een sneltoets.

Alhoewel de HTML en CSS van een pagina het belangrijkste doel is van de Inspect Element tool, zijn er nog meer mogelijkheden.

Met de Inspect Element tool van je browser kan je eenvoudig de werking van een website zien, van HTML tot CSS 👀 Lees hier hoe je het kan gebruiken ⬇️Click to Tweet

Het Inspect Element scherm

Brave's DevTools.
Brave’s DevTools.

De Inspect Element tool is veel meer dan een manier om code te tonen. Er zijn verschillende panelen die je kan gebruiken:

  • Inspector — Dit wordt Elements genoemd in sommige browsers. Dit is het belangrijkste scherm in de Inspect Element tool en toont alle code, samen met element-specifieke CSS. Je ziet ook meer informatie over het “grid system” van een website, naast nog enkele andere zaken.
  • Console — Dit is een frontend logboek met meldingen voor een website, en ook een plek waar je snel kleine stukjes code kan invoeren om ideeën te testen.
  • Network — Hier zie je de verzoeken die door en aan de server zijn gedaan, zoals alle POST en GET requests.
  • Performance —Uiteraard moeten de prestaties van een website goed zijn. Daarom is er een speciale tool om de belangrijkste indicatoren van een website te tonen. Hierbij zie je grote verschillen tussen browsers.
  • Memory —In dit scherm zie je hoe de website gebruik maakt van geheugen, en ook hier bieden sommige browsers erg uitgebreide informatie, en anderen niet.
  • Application —In dit scherm kan je allerlei informatie over een website zien, met name over de cache, achtergrond diensten en meer.

Daarnaast kan je zelf nog schermen toevoegen:

Een lijst met andere panelen in de DevTools van Brave.
Een lijst met andere panelen in de DevTools van Brave.

Er zijn eenvoudige panelen, zoals Media, en complexere opties, zoals JavaScript Profiler en de Performance monitor. We kunnen dus wel concluderen dat de naam van de Inspect Element tool alle onderliggende functies weinig eer aan doet. Er zit een hoop kracht in en zou centraal moeten staan in de workflow van elke webdeveloper.

Waarvoor je Inspect Element kan gebruiken

De Inspect Element tool zou eigenlijk je vaste oplossing moeten zijn die je constant open hebt tijdens de ontwikkeling. We zullen alle technische details bespreken gedurende dit artikel. Maar allereerst is het de moeite waard om na te denken waarom je Inspect Element zou willen gebruiken.

Daar zijn namelijk een hoop redenen voor:

  • Je kan andere websites bekijken voor inspiratie voor je eigen website.
  • Je kan leren hoe websites of developers bepaalde technieken toepassen.
  • Je kan hiermee experimenten in je eigen website zonder enige consequentie.
  • In de meeste Inspect Element tools krijg je de mogelijkheid om website te debuggen.
  • Het is handig om meer informatie over de betreffende website mee te krijgen.

Kort gezegd gaat het leren over webdevelopment over het kijken naar goede voorbeelden van andere websites, en erachter komen hoe ze in elkaar steken.

De Inspect Element tool geeft je de precieze HTML en CSS die op een website gebruikt is, waardoor je een unieke mogelijkheid hebt die aspecten en technieken in je eigen werk te gebruiken.

Zo vind je de Inspect Element tool van je browser

Het goede nieuws is dat de Inspect Element tool eenvoudig te vinden is. In de meeste browsers kan je gewoon rechts-klikken op een pagina en Inspect of Inspect Element selecteren:

De Inspect Element tool.
De Inspect Element tool.

Standaard zal de tool geopend worden in een gesplitst venster. Dit opent meestal aan de rechterkant. Maar je kan dit eventueel aanpassen en de tool ook uit het venster halen:

De Inspect Element tool in een eigen venster.
De Inspect Element tool in een eigen venster.

Natuurlijk kan je de Inspect Element tool ook openen via een toolbar of sneltoets. De precieze locatie hangt af van de browser. Bijvoorbeeld in Firefox kan je de Web Developer Tools vinden in het menu Tools > Browser Tools. Daarentegen hebben Brave (en andere Chromium-based browsers) de Developer Tools optie in het View > Developer menu:

Toolbar menu van Brave met developer tools.
Toolbar menu van Brave met developer tools.

De sneltoets is wel meestal hetzelfde voor verschillende browsers: Command + Shift + C (Control + Shift + C voor Windows). Deze sneltoets maakt het makkelijk om meteen de gewenste tools te openen.

Als je nog nooit eerder de Inspect Element tool hebt geopend, wordt het aan de rechterkant weergegeven. Om dit te veranderen klik je op het stoplicht menu in de toolbar van Inspect Element. Hier kan je bepalen aan welke kant de tool wordt getoond.

De “Dock side” opties in de Inspect Element tool.
De “Dock side” opties in de Inspect Element tool.

Firefox gebruikt standaard een “triple pane” view, waarmee je zoveel mogelijk informatie in de Inspect Element tool tegelijkertijd kan bekijken:

Firefox’s “triple pane” view.
Firefox’s “triple pane” view.

Nu je de tool open hebt, is het hoog tijd om te zien wat je er allemaal mee kan. Daar gaan we nu mee bezig.

3 momenten om de Inspect Element tool te gebruiken

We hebben al enkele manieren aangestipt waarop je de Inspect Element tool kan gebruiken, maar we zullen enkele specifieke use cases bespreken om dit verder uit te diepen. We kijken kort naar verschillende scenario’s.

1. Zoeken naar specifieke elementen binnen een webpagina

Het belangrijkste doel van de Inspect Element tool zit al in de naam, namelijk het inspecteren van elementen. Om dit te doen ga je naar de gewenste webpagina en kies je een manier om de development tools te openen.

Zodra het venster open is, klik je op de pijl die werkt als een selector voor het gewenste element:

Het Inspector Arrow icoon.
Het Inspector Arrow icoon.

Vanuit hier kan je hoveren over een gewenst element op de pagina, waarna je het gemarkeerd ziet worden in het venster Inspector/Elements:

Markeren van een element in de development tools.
Markeren van een element in de development tools.

Het is erg eenvoudig: één van de redenen waarom de Inspect Element tool zo populair en belangrijk is voor webdevelopers.

2. Nabootsen van een apparaat, display of browser

Inspect Element kan ook gebruikt worden om apparaten te emuleren, als een soort device emulator. Je kan dus zien hoe de website eruit ziet op verschillende apparaten. De mogelijkheden zijn eindeloos:

Een lijst van emuleerbare apparaten in Brave.
Een lijst van emuleerbare apparaten in Brave.

Deze emulator is erg handig of je mobile-first strategie of responsive design goed werkt. Dit is erg belangrijk, en natuurlijk ook veel kosteneffectiever dan een stuk of 200 apparaten in je bureaula bewaren.

Je kan de emulator meestal openen via een klein icoon binnen het Inspect Element scherm:

Emuleren van een apparaat met de Inspect Element tool.
Emuleren van een apparaat met de Inspect Element tool.

Door op dit icoon te klikken ziet je website eruit zoals op het gekozen apparaat:

Kiezen van een apparaat dat je wil emuleren in de Inspect Element tool.
Kiezen van een apparaat dat je wil emuleren in de Inspect Element tool.

We zullen hier zometeen nog verder op ingaan, maar het is een erg handige en effectieve manier om je ontwerp op verschillende apparaten te controleren.

3. De prestaties van een webpagina controleren

De Inspect Element tool kan je ook helpen bij het beoordelen van de snelheid en prestaties van een website via het scherm Performance:

Het Inspect Element Performance panel.
Het Inspect Element Performance panel.

Deze feature werkt door het bijhouden van laadtijden van specifieke elementen en scripts. Chromium-based browsers bieden deze informatie op een bijzonder handige manier aan. De pagina wordt gemeten tijdens het laden, en je kan vervolgens de resultaten zien op volgorde van tijd.

Dit is een uitstekende manier om te controleren of een pagina goede prestaties biedt. Vervolgens kun je met een gespecialiseerde tool zoals Google PageSpeed Insights of Lighthouse werken om de prestaties nog verder te optimaliseren. Chromium-based browsers hebben een ingebouwde Lighthouse report generator:

Een ingebouwd Google Lighthouse rapport.
Een ingebouwd Google Lighthouse rapport.

Je kan ook een overzicht van de prestaties zien in enkele andere tabblad. Zo kan je bijvoorbeeld een Call Tree openen, een algemeen overzicht, en een Event Log:

Het Inspect Element’s Event Log.
Het Inspect Element’s Event Log.

Er zijn dan ook genoeg opties dat je wellicht geen andere tools nodig hebt om de prestaties en functies van je website te controleren. Tijd om te bekijken hoe de tool in de praktijk werkt.

Tips voor het gebruik van de Inspect Element tool

We hebben het net gehad over het feit dat de Inspect Element tool veel meer mogelijkheden biedt dan je op het eerste oog zou denken. We kijken nu naar enkele tips om het maximale uit alle features te halen, te beginnen met de basis.

Het veranderen van elementen, waarden en states

Tot nu toe hebben we het alleen kort gehad over de mogelijkheden van de Inspect Element tool om tijdelijke wijzigingen te maken. Laten we dit eens nader bekijken.

De stappen zijn vrij eenvoudig. Allereerst gebruik je het pijltje om het gewenste element te selecteren. Je ziet een overlay met de verschillende componenten.

Selecteren van elementen in de Inspect Element tool.
Selecteren van elementen in de Inspect Element tool.

Nadat je het gewenste element gevonden hebt, kan je overal dubbelklikken waar je een tag ziet in het Elements paneel, en een wijziging intypen. Stel dat we de originele hero-tekst op de Kinsta homepage willen wijzigen:

Veranderen van de tekst op de homepage van Kinsta.
Veranderen van de tekst op de homepage van Kinsta.

Je kan ook op dezelfde manier met CSS werken als met HTML. Neem bijvoorbeeld de Call To Action (CTA) knoppen op de website van Kinsta:

Selecteren van een knop op de Kinsta homepage.
Selecteren van een knop op de Kinsta homepage.

Als je de knop selecteert met de pointer, zie je de bijbehorende CSS in het Styles paneel aan de rechterkant:

Het Styles paneel in de Inspect Element tool.
Het Styles paneel in de Inspect Element tool.

Net als bij de HTML elementen, kan je ook de waarden van CSS veranderen:

Veranderen van de kleur van de knop via Styles.
Veranderen van de kleur van de knop via Styles.

Bij elementen zoals knoppen, wil je natuurlijk met verschillende states kunnen werken. In dit geval is de :hover state de moeite waard om te veranderen. Dit doe je door op de :hov link in het Styles paneel te klikken. Hiermee krijg je een lijst te zien met verschillende states van het element, en je kan dan de gewenste hover-state kiezen:

Bekijken van de opties voor "States" in het paneel Styles.
Bekijken van de opties voor “States” in het paneel Styles.

De webpagina laat je vervolgens zien hoe de state eruitziet, zonder dat je iets hoeft te doen. Hier hebben we de hover-kleuren veranderd om het verschil met de normale knop te laten zien:

Veranderen van de hover-state kleur van de knop via Styles.
Veranderen van de hover-state kleur van de knop via Styles.

Je kan zelfs de URL’s van afbeeldingen veranderen. Op de homepage van Kinsta laten we een screenshot zien van het MyKinsta dashboard:

Het MyKinsta dashboard op de Kinsta homepage.
Het MyKinsta dashboard op de Kinsta homepage.

Door het element te vinden en de bron URL van de afbeelding te wijzigen, kun je verschillende andere afbeeldingen uitproberen:

In dit geval ging de verandering binnen enkele minuten live
In dit geval ging de verandering binnen enkele minuten live (Afbeelding: Pixabay).

Zoals je mag verwachten, zijn deze wijzigingen niet permanent en is alles weer terug naar het oude zodra je de pagina opnieuw laadt. Je zou er ook voor kunnen kiezen om alle HTML en CSS te kopiëren naar een editor en in je code te gaan gebruiken om de veranderingen wel permanent te maken.

Zoeken naar elementen

Om een element te kunnen wijzigen, moet je het natuurlijk wel kunnen vinden. De Inspect Element tool heeft een eenvoudige zoekfunctie waarmee je elk aspect binnen een webpagina kan vinden.

Maar het kan soms een beetje moeilijk te vinden zijn, als je niet weet waar het zit. De “officiële” manier in Chromium based browsers is door naar het verkeerslicht menu aan de rechterkant te gaan en de optie Search te openen:

Heb je uitzonderlijke, snelle en veilige hosting nodig voor je nieuwe website? Kinsta biedt razendsnelle servers en 24/7 wereldklasse ondersteuning door experts. Bekijk onze pakketten.

De “Search” optie in Brave’s DevTools.
De “Search” optie in Brave’s DevTools.

Hiermee open je de Console, en een tabblad Search. Hierin kan je de gewenste tag intypen, en krijg je alle bijbehorende elementen op de pagina te zien:

Zoeken op elementen in Brave’s DevTools.
Zoeken op elementen in Brave’s DevTools.

In andere browsers kan je deze functie ergens anders vinden. Zo biedt Firefox bijvoorbeeld een search veld bovenaan de Inspector:

Zoeken op elementen in Firefox Inspector.
Zoeken op elementen in Firefox Inspector.

Nog een andere snelle tip: je kan herhalend uitklappen van verschillende nodes en elementen door te rechtsklikken op het Elements paneel en Expand recursively te kiezen:

De optie Expand recursively in het Elements paneel.
De optie Expand recursively in het Elements paneel.

Als je kijkt naar het Styles paneel, zie je ook een Filter tekstveld. Hiermee kan je filteren op CSS eigenschappen, wat het een handige extra optie maakt bij het zoeken:

Filteren op eigenschappen in Styles.
Filteren op eigenschappen in Styles.

Met deze combinatie zou het niet heel lastig moeten zijn om te vinden wat je zoekt, met de combinatie van deze twee.

Een korte introductie over het Box Model

Eén van de beste manieren waarop de Inspect Element tool je kan helpen om meer te leren over hoe CSS met verschillende elementen omgaat, is het visuele “box model” venster.

The Box Model.
The Box Model.

Dit overzicht laat je zien hoe een bepaalde box, zoals een element of “div”, te zien is op het scherm. Oftewel, je krijgt een overzicht van de marges, witruimte, randen en content, en hoe die gecombineerd worden tot wat je te zien krijgt op je scherm.

Het uitleggen van de hele CSS box model en de interactie met de HTML van een webpagina gaat nu een beetje te ver voor dit artikel, maar Mozilla heeft een geweldige uitleg over alle aspecten van dit concept.

Je ziet het Box Model meestal in de Layout of Computer onderdelen in de Inspect Element tool:

Het "Box Model" paneel in de Inspect Element tool.
Het “Box Model” paneel in de Inspect Element tool.

Net als bij de elementen en eigenschappen, kan je ook de waarden en instellingen van een bepaalde box veranderen. Er is een lijst met eigenschappen om de positie van de box te bepalen, een a-z index te bepalen, instellingen voor weergave en nog veel meer.

Wanneer je met het Box model werkt, kan het handig zijn om het grid system op de pagina te zien. Dit doe je door in het Layout venster te kijken, waar je de opties kan vinden in het menu Grid:

Instellingen voor Grid.
Instellingen voor Grid.

Door op de gewenste weergave te klikken en een relevante overlay te kiezen, zie je de grid op het scherm, waardoor je makkelijker beslissingen kan maken over het box model om de elementen te verplaatsen.

Emuleren van apparaten via Inspect Element

Ze zijn van buzzwords naar standaard vaktermen gegaan: “responsive” en “mobile-friendly” zijn inmiddels belangrijke factoren binnen webdevelopment. Daarom biedt de Inspect Element tool hier ook enkele functies voor.

In de meeste browsers toont de Inspect Element tool een icoontje van een mobiel apparaat in de toolbar bovenaan:

Schakelen van weergave van mobile responsive in Brave.
Schakelen van weergave van mobile responsive in Brave.

Bij Safari is dat echter wat anders. Daarbij vind je een schakelaar Enter/Exit Responsive Design Mode in het Develop menu:

De “Exit Responsive Design Mode” optie in Safari.
De “Exit Responsive Design Mode” optie in Safari.

Hoe je er ook komt, wanneer je deze optie gebruikt, zal de webpagina weergegeven worden zoals op een kleiner, mobiel apparaat naar keuze:

De layout op een mobiel apparaat in Firefox.
De layout op een mobiel apparaat in Firefox.

Alhoewel Safari alleen enkele Apple apparaten te bieden heeft, kan je bij andere browsers alle tools krijgen die je nodig hebt om te ontwerpen met een mobile-first principe. Zo kan je bijvoorbeeld de oriëntatie veranderen, en kiezen welk apparaat je wil emuleren:

De “Device Emulation” lijst in Brave.
De “Device Emulation” lijst in Brave.

Er zijn nog twee andere interessante features te vinden. Allereerst kan je de geëmuleerde netwerksnelheid bepalen. Safari biedt ook hier geen opties voor, maar Chromium based browsers hebben enkele keuzes voor het beperken van de netwerksnelheid:

De netwerkopties in Brave.
De netwerkopties in Brave.

Firefox doet het hier veruit het beste, met een mooie selectie aan netwerkmogelijkheden:

De opties in Firefox.
De opties in Firefox.

Om alles af te ronden kan je ook haptic feedback en sensoren gebruiken. Dit is standaard bij Chromium-based browsers, en in Firefox kan je het inschakelen:

De optie voor haptic feedback in Firefox.
De optie voor haptic feedback in Firefox.

Firefox loopt hier enigszins achter, aangezien Chrome, Brave en anderen je cursor meteen in een soort vingertop omzetten. De functionaliteit is verre van perfect, maar geeft een goede indruk hoe je website werkt op andere apparaten.

Dit soort tests valt vaak weg bij veel webdevelopers. Maar aangezien browsers hier zulke eenvoudige en toch volledige oplossingen voor bieden, is er eigenlijk geen excuus meer voor.

Sneltoetsen bij het gebruiken van de Inspect Element tool

De meeste sneltoetsen zijn hetzelfde bij de verschillende browsers. Dat is erg fijn als je verschillende tools moet gebruiken om je websites te testen.

Een korte lijst van de belangrijke sneltoetsen:

Openen van de Inspect Element tool Command + Shift + C voor Mac, Control + Shift + C voor Windows
Wisselen tussen nodes Up en Down pijlen
Uitklappen van geselecteerde node Right pijl
Inklappen van geselecteerde node Left pijl
Herhalende inklappen en uitklappen van nodes Option + Click voor Mac, Alt + Click voor Windows
Een node openen om de attributen te bewerken Enter of Return
Vooruitgaan in de attributen van een node Tab
Terug gaan in de attributen van een node Shift + Tab
De geselecteerde node tonen of verbergen H
Een node als HTML bewerken of stoppen met bewerken F2
Wanneer een CSS eigenschap is geselecteerd kan je de waarde met één verhogen Up pijl
Wanneer een CSS eigenschap is geselecteerd kan je de waarde met tien verlagen Down pijl
Wanneer een CSS eigenschap is geselecteerd kan je de waarde met tien verhogen Shift + Up pijl
Wanneer een CSS eigenschap is geselecteerd kan je de waarde met tien verlagen Shift + Down pijl
Wanneer een CSS eigenschap is geselecteerd kan je de waarde met 0,1 verhogen Option + Up pijl voor for Mac, Alt + Up pijl voor Windows
Wanneer een CSS eigenschap is geselecteerd kan je de waarde met 0,1 verlagen Option + Down pijl voor Mac, Alt + Down pijl voor Windows

Er zijn natuurlijk nog meer sneltoetsen te vinden. Mozilla heeft uitstekende documentatie voor Firefox, terwijl Chrome, Brave, Edge en anderen sneltoetsen delen. Apple is minder nuttig met de sneltoetsen voor Safari developers, aangezien er geen duidelijke lijst te vinden is op hun helppagina’s. Daarom raden we daarvoor aan om de officiële documentatie voor de developer tools van Safari door te lezen.

Kijk eens goed naar de Inspect Element feature van je browser, en alle mogelijkheden daarmee, met deze uitgebreide gids 🔎Click to Tweet

Samenvatting

Webdevelopment gaat niet meer alleen over HTML. Er zitten allerlei andere technologieën in. Zelfs als je bij de heilige drie-eenheid van HTML, CSS en JavaScript blijft, kan je een hoop zien door te kijken hoe een website deze onderdelen samenvoegt.

De Inspect Element tool van de browser is daarmee een van de beste manieren om onder de motorkap van je website te kijken, en precies te zien hoe het werkt. Het is een erg handig hulpmiddel om mee te leren, maar je kan er ook gewoon allerlei veranderingen mee testen en zien hoe je website eruitziet op verschillende apparaten en bij verschillende internetsnelheden.

Gebruik jij Inspect Element al vaak? Zo ja, wat zijn dan je favoriete features? Deel het in de reacties hieronder!


Bespaar tijd en kosten en maximaliseer siteprestaties met:

  • Directe hulp van WordPress-hostingexperts, 24/7.
  • Cloudflare Enterprise integration.
  • Globaal bereik met 34 datacenters verspreid over de wereld.
  • Optimalisatie met onze ingebouwde Application Performance Monitoring.

Dat alles en nog veel meer, in één pakket zonder langlopende contracten, met migraties en een 30 dagen geld-terug-garantie. Bekijk onze pakketten of neem contact op met sales om het pakket te vinden dat bij je past.