Hoe schakel ik ‘element inspecteren’ in op een Mac?

Element Inspecteren op je Mac: Een gids voor Safari en Chrome

Het inspecteren van webpagina-elementen is een onmisbare vaardigheid voor webontwikkelaars, designers en iedereen die de innerlijke werking van websites wil begrijpen. Met de ‘Element Inspecteren’ functie kun je de HTML, CSS en JavaScript code van een website bekijken en aanpassen, waardoor je problemen kunt opsporen en de pagina kunt optimaliseren. Maar hoe activeer je deze handige tool op jouw Mac?

Dit artikel behandelt de meest populaire browsers: Safari en Google Chrome.

Safari:

Safari biedt een ingebouwde web inspector. Om deze te activeren, zijn er twee methoden:

Methode 1: Via het Ontwikkelen menu (sneltoets):

1. Activeer het Ontwikkelen menu: Dit menu is standaard verborgen. Om het te activeren, ga je naar Safari > Voorkeuren > Geavanceerd en vink je de optie “Toon ‘Ontwikkelen’ in de menubalk” aan.
2. Open de webpagina: Navigeer naar de website die je wilt inspecteren.
3. Activeer de Inspector: Klik op Ontwikkelen > Element Inspecteren (of gebruik de sneltoets ⌥⌘I – Option + Command + I). Dit opent de Web Inspector aan de onderkant van je scherm. Hier zie je de HTML-structuur, CSS-stijlen en JavaScript-code van de pagina.

Methode 2: Rechtsklikken:

1. Open de webpagina: Navigeer naar de website die je wilt inspecteren.
2. Rechtsklik: Rechtsklik op het specifieke element dat je wilt inspecteren.
3. Selecteer “Element Inspecteren”: In het contextmenu dat verschijnt, selecteer je de optie “Element Inspecteren”. Dit opent de Web Inspector direct op het geselecteerde element.

Google Chrome:

Google Chrome biedt ook een krachtige web inspector. De manier om deze te activeren is eenvoudiger dan in Safari:

1. Open de webpagina: Navigeer naar de website die je wilt inspecteren.
2. Rechtsklik: Rechtsklik op het element dat je wilt inspecteren.
3. Selecteer “Inspecteren”: In het contextmenu dat verschijnt, selecteer je de optie “Inspecteren”. Dit opent de Chrome DevTools, een uitgebreide set tools voor webontwikkeling, inclusief de Element Inspector. Je kunt de DevTools ook openen door rechts te klikken en “Inspecteren” te kiezen of door Command + Option + I te gebruiken.

Na het activeren:

Zodra de Element Inspector (of DevTools in Chrome) geopend is, kun je de HTML-code bewerken en de wijzigingen in realtime op de pagina zien. Dit is een enorm krachtig hulpmiddel voor debugging en het begrijpen van webpagina-structuur. Experimenteer met de verschillende opties in de Inspector om de volledige functionaliteit te ontdekken. Onthoud wel dat wijzigingen die je aanbrengt in de Inspector alleen van toepassing zijn op jouw lokale kopie van de pagina en niet op de live website.

Met deze methodes ben je goed op weg om de geheimen van websites te ontrafelen!