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.
Bekijk onze videogids over hoe je een website bewerkt met Inspect Element
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.
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:
Na verloop van tijd werd deze functionaliteit ingevoerd bij bijna alle browsers. Vandaag de dag kennen we die feature als de Inspect Element tool:
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.
Het Inspect Element scherm
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:
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.
Waarom zou je Inspect Element willen 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.
Hoe 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.
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.
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.
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.
Firefox gebruikt standaard een “triple pane” view, waarmee je zoveel mogelijk informatie in de Inspect Element tool tegelijkertijd kan bekijken:
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:
Vanuit hier kan je hoveren over een gewenst element op de pagina, waarna je het gemarkeerd ziet worden in het venster Inspector/Elements:
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:
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:
Door op dit icoon te klikken ziet je website eruit zoals op het gekozen apparaat:
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:
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:
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:
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.
1. 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.
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:
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:
Als je de knop selecteert met de pointer, zie je de bijbehorende CSS in het Styles paneel aan de rechterkant:
Net als bij de HTML elementen, kan je ook de waarden van CSS veranderen:
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:
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:
Je kan zelfs de URL’s van afbeeldingen veranderen. Op de homepage van Kinsta laten we een screenshot zien van het MyKinsta dashboard:
Door het element te vinden en de bron URL van de afbeelding te wijzigen, kun je verschillende andere afbeeldingen uitproberen:
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.
2. 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:
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:
In andere browsers kan je deze functie ergens anders vinden. Zo biedt Firefox bijvoorbeeld een search veld bovenaan de 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:
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:
Met deze combinatie zou het niet heel lastig moeten zijn om te vinden wat je zoekt, met de combinatie van deze twee.
3. 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.
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:
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:
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.
4. 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:
Bij Safari is dat echter wat anders. Daarbij vind je een schakelaar Enter/Exit Responsive Design Mode in het Develop menu:
Hoe je er ook komt, wanneer je deze optie gebruikt, zal de webpagina weergegeven worden zoals op een kleiner, mobiel apparaat naar keuze:
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:
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:
Firefox doet het hier veruit het beste, met een mooie selectie aan netwerkmogelijkheden:
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:
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.
5. 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 property is geselecteerd, verlaag je de waarde met tien | 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.
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!
Laat een reactie achter