Hoe doe je inspecteren op een macbook?

Diep duiken in je MacBook’s webpagina’s: Een gids voor inspecteren

Je hebt een website op je MacBook bekeken en je vraagt je af hoe bepaalde elementen zijn opgebouwd, of waarom iets er niet helemaal zoals verwacht uitziet. Gelukkig hoef je geen programmeur te zijn om de broncode van een webpagina te bekijken. Met de ingebouwde ontwikkeltools van Safari kun je eenvoudig de HTML, CSS en JavaScript inspecteren. Hieronder leggen we stap voor stap uit hoe je dit doet.

Stap 1: Het Ontwikkelmenu activeren

De functie om webpagina’s te inspecteren zit standaard verborgen in Safari. Om toegang te krijgen, moet je het ontwikkelmenu eerst zichtbaar maken:

1. Open Safari op je MacBook.
2. Ga naar het menu Safari in de menubalk bovenaan het scherm.
3. Selecteer Voorkeuren.
4. Klik op het tabblad Geavanceerd.
5. Vink het vakje aan bij “Toon ontwikkelmenu in menubalk”.

Nu verschijnt er een nieuw menu, “Ontwikkelen”, in de menubalk van Safari.

Stap 2: Elementen inspecteren

Nu je het ontwikkelmenu hebt geactiveerd, kun je eindelijk de elementen van een webpagina inspecteren:

1. Open de webpagina die je wilt inspecteren in Safari.
2. Klik met de rechtermuisknop (of Ctrl-klik met één muisknop) ergens op de pagina.
3. Selecteer “Element inspecteren” in het contextmenu.

Hiermee opent zich de Web Inspector, een krachtig hulpmiddel dat je de volledige HTML-, CSS- en JavaScript-code van de pagina laat zien. Je kunt hier navigeren door de codeboom, elementen selecteren om hun eigenschappen te bekijken en te wijzigen (in de meeste gevallen alleen voor de huidige sessie), en zelfs JavaScript code debuggen.

Stap 3: Navigeren in de Web Inspector

De Web Inspector is op zichzelf een complex programma, maar de basisprincipes zijn gemakkelijk te begrijpen. Je ziet de HTML-structuur van de pagina in een boomstructuur. Door op een element in de boom te klikken, wordt het corresponderende element op de pagina gemarkeerd. In andere tabbladen kun je de CSS-stijlen, de JavaScript-code en de netwerkactiviteit van de pagina bekijken. Dit biedt een schat aan informatie voor webontwikkelaars, maar is ook bruikbaar voor gebruikers die meer willen begrijpen over hoe websites werken.

Conclusie:

Het inspecteren van webpagina’s op je MacBook met behulp van Safari’s ingebouwde tools is een eenvoudige en krachtige manier om de achterliggende code te begrijpen. Met een beetje oefening zul je snel vertrouwd raken met de Web Inspector en in staat zijn om de structuur en functionaliteit van websites te analyseren. Dit is nuttig voor zowel probleemoplossing als voor het begrijpen van hoe websites in elkaar zitten.