Elementen inspecteren op Mac, Windows, iPhone en iPad: een complete gids

Inspect Element is in feite het Zwitserse zakmes van een ontwikkelaar, toch? Iedereen die ooit heeft geprobeerd om in de code van een website te snuffelen zonder de volledige ontwikkelmodus in te duiken, heeft waarschijnlijk ontdekt hoe nuttig (en een beetje verslavend) het kan zijn. Of het nu gaat om het opschonen van een lastige screenshot, het bewerken van grappen, het direct aanpassen van stijlen of het bespioneren van de SEO-tags van concurrenten – deze kleine tool is een levensredder. Maar eerlijk gezegd willen sommige mensen niet elke keer dat ze het nodig hebben een heleboel snelkoppelingen onthouden of door menu’s spitten. Dus hier is een kort overzicht van hoe je Inspect Element in verschillende browsers en apparaten kunt openen zonder het ingewikkelder te maken dan nodig is.

Elementen in Windows inspecteren

Chrome, Edge of Firefox gebruiken met een muis

Klik met de rechtermuisknop ergens op een webpagina.
Het contextmenu verschijnt; zoek naar de optie Inspecteren of Element inspecteren.
Als u hierop klikt, verschijnt er een ontwikkelaarspaneel, meestal aan de rechterkant.

Dit werkt perfect op vrijwel elke site. Waarom het zo handig is? Omdat het direct toegang geeft tot de HTML en CSS achter wat je ziet. In sommige configuraties, met name in Chrome of Edge, zie je mogelijk het paneel onderaan als je die lay-out prefereert. Soms is het gewoon een kwestie van het paneel verslepen of het lay-outpictogram wijzigen.

Open Inspect Element zonder rechtermuisknop (sneltoetsen)

Ctrl + Shift + C : Dit is een universele sneltoets in Chrome en Firefox. Hiermee opent u direct de elementeninspector, zodat u meteen items kunt selecteren.
U kunt ook op drukken F12: Dit is de klassieke sneltoets waarmee u in vrijwel elke browser de ontwikkeltools opent.

Pro tip: als de rechtermuisknop niet werkt (bijvoorbeeld omdat een site een script heeft dat contextmenu’s blokkeert) of als je een paar seconden wilt besparen, zijn deze sneltoetsen goud waard. Let op: sommige browsers hebben misschien een snelle aanpassing nodig als de sneltoetsen niet werken, maar meestal doen ze het prima.

Elementen inspecteren op een Mac

Chrome, Firefox of Edge

Hetzelfde idee als Windows: klik met de rechtermuisknop en kies ‘Inspecteren’, of druk op Cmd + Shift + C. Makkelijk. Over het algemeen werken deze sneltoetsen prima, op een paar vreemde randgevallen na waarbij extensies kunnen storen.

Met Safari (omdat dit natuurlijk de browser is waarbij het allemaal wat lastiger wordt)

Safari heeft ‘Element inspecteren’ niet standaard ingeschakeld. Je moet eerst Developer Tools activeren. Het is een behoorlijk proces, maar niet zo erg:

Open Safari en ga naar Safari > Voorkeuren > Geavanceerd.
Vink het vakje aan met de tekst Ontwikkelmenu weergeven in menubalk.

Eenmaal geactiveerd, zie je het menu Ontwikkelen in de bovenste menubalk. Klik daar met de rechtermuisknop op een pagina-element en selecteer Element inspecteren. Je kunt ook de snelkoppeling gebruiken Cmd + Option + Iom er direct in te springen.

En als je met een mobiel apparaat werkt, kun je je iPhone of iPad verbinden met een Mac met de ontwikkelaarsmodus ingeschakeld. Zo kun je mobiele webpagina’s inspecteren in Safari’s debugger. Omdat het bij Apple iets ingewikkelder is, is het wel te doen. Je hoeft alleen maar Web Inspector op iOS te activeren, verbinding te maken via USB en je apparaat te selecteren in het menu Ontwikkelen in Safari op Mac.

Inspecteren op Chromebooks of schoolapparaten

Omdat Chromebooks in principe standaard Chrome-technologie gebruiken, is het in principe hetzelfde proces: rechtsklikken > Inspecteren. Het addertje onder het gras? Sommige beheerdersaccounts op school of werk blokkeren ontwikkelaarstools om veiligheidsredenen. Als de optie Inspecteren ontbreekt, hebben geen enkele sneltoets zin, tenzij je beheerdersrechten hebt of de beheerder de ontwikkelaarsopties opnieuw heeft ingeschakeld.

Op mobiel? Niet zo snel…

Element inspecteren op iOS of Android is niet eenvoudig, tenzij je een desktop gebruikt. Op iPhones en iPads heb je Web Inspector van Mac en Safari nodig, of een app van derden met vergelijkbare mogelijkheden – en zelfs dan werkt het niet zo soepel als op een desktop. Dus als je een mobiele site wilt aanpassen, kun je dat beter eerst op een computer doen en vervolgens een preview ervan bekijken op je mobiel.

Conclusie

Dit zou geen hogere wiskunde moeten zijn, maar soms verbergen browsers of apparaten de functie ‘Element inspecteren’ achter een paar extra klikken of sneltoetsen. In Windows zijn Ctrl+Shift+C of F12 je beste vriend. Mac-gebruikers kunnen vertrouwen op Cmd+Shift+C en indien nodig de ontwikkelaarsmodus in Safari inschakelen. En in Chrome, Edge of Firefox is het meestal gewoon een kwestie van rechtsklikken op degene die je aanraakt.

Hopelijk helpt dit iemand om door de ruis heen te prikken en sneller bij die websitebestanden te komen. Soms is het gewoon een kwestie van de juiste snelkoppeling of menupad kennen om frustratie door klooien te voorkomen.

Samenvatting

Klik met de rechtermuisknop en kies Inspecteren of Inspecteer Element in desktopbrowsers.
Gebruik sneltoetsen: Ctrl+Shift+C of F12 voor Windows, Cmd+Shift+C of Cmd+Option+I voor Mac.
Schakel Developer Tools in Safari in via Voorkeuren op Mac om mobiele sites te inspecteren.
Op Chromebooks werkt Inspect hetzelfde, tenzij dit door beheerdersbeperkingen wordt geblokkeerd.
Mobiele inspecties zijn ingewikkeld en vereisen vaak een desktop- of externe debug-instelling.

Afronding

Inspect Element is geen geheime tool meer – het is ingebouwd in alle grote browsers. Zodra je de snelkoppeling of het menupad weet, kun je het snel openen en rondneuzen. Voor de meeste gebruikers is het een kwestie van rechtsklikken of een sneltoets gebruiken, en voilà, je bent binnen. Houd er rekening mee dat de dev tools in sommige configuraties mogelijk uitgeschakeld of verborgen zijn achter instellingen, dus houd daar rekening mee. Veel succes en ik hoop dat je webdebuggen soepel verloopt.