MacOS: Web Inspector In Safari Inschakelen

Als je de broncode van een webpagina in Apple Safari voor macOS Sierra wilt bekijken, moet je de Safari Web Inspector-tool inschakelen met de volgende methoden.

Webbrowserontwikkelaars zoals Apple, Google, enzovoort, bieden een ingebouwde tool om de onderliggende codes te bekijken. De ontwikkelaars gebruiken deze meestal om fouten op te sporen en wijzigingen aan te brengen op een live website zonder de werkelijke code op de server te verstoren. Deze tool is nu populair geworden bij contentcreators en technologisch onderlegde internetgebruikers die een live website willen bewerken voor persoonlijke of professionele doeleinden. Als jij een van die gebruikers bent, lees dan het artikel tot het einde om alles te leren over de Safari Web Inspector en hoe je elementen kunt inspecteren.

Inhoud

• 1 Wat Is Safari Web Inspector?
• 2 Hoe je de Safari Web Inspector in Safari 10 en hoger inschakelt
• 3 Hoe je de Safari Web Inspector op macOS gebruikt
• 4 Hoe je de Safari Web Inspector opent in oudere versies van macOS
  • 4.1 Safari Web Inspector: De laatste woorden

Wat Is Safari Web Inspector?

Web Inspector is een onderdeel van het pakket ontwikkelingshulpmiddelen dat Apple biedt aan website- en app-ontwikkelaars over de hele wereld. De tool is beschikbaar voor zowel macOS- als iOS-apparaten. Ontwikkelaars kunnen websites moeiteloos wijzigen, optimaliseren en debuggen om een optimale prestatie voor hun online eigendommen te krijgen.

De Web Inspector-tool op Safari biedt de meeste websitebronnen onder één uniforme interface. De tool scheidt ook de bronnen en hun parameters in speciale tabs, zodat je niet overweldigd wordt door te veel codes en opties. Web Inspector geeft je ook een tijdlijnweergave van het geheugen van de website, zodat je het geheugen eenvoudig kunt debuggen. Bovendien kun je als ontwikkelaar meer dan 150 populaire CSS-eigenschappen aanpassen en optimaliseren die je nodig hebt bij het ontwikkelen van een functionele website.

In de Web Inspector-tool vind je de volgende tabs voor websitebronnen:

• Elementen
• Console
• Bronnen
• Netwerk
• Tijdlijnen
• Opslag
• Grafieken
• Laag
• Audit

Hoe je de Safari Web Inspector in Safari 10 en hoger inschakelt

Standaard schakelt Apple Mac de Web Inspector uit in Safari. Dit is om onnodige rommel op de gebruikersinterface (UI) van de webbrowser te voorkomen. Als je echter een ontwikkelaar, contentcreator of ervaren Mac-gebruiker bent, wil je misschien de functie inschakelen door de volgende stappen te volgen:

• Open de Safari-app op je MacBook of iMac.
• Zorg ervoor dat je op de browser hebt geklikt om het Safari-pictogram op de Mac-toolbar te krijgen.

• Klik op Safari in de linkerbovenhoek en selecteer Voorkeuren.
• Alternatief kun je de sneltoets Command + , gebruiken om het Voorkeuren-menu te openen.
• Als je in het Voorkeuren menu bent, moet je op het Algemeen tabblad zijn.

• Navigeer naar het Geavanceerd tabblad.
• Net onder de optie Proxy's zou je de checkbox voor de optie Toon Ontwikkelmenu in menubalk moeten zien. Vink het vakje aan.

• Nu zal het Safari Ontwikkelmenu verschijnen op de Mac-toolbar.

Dit is hoe je de Web Inspector-functie kunt inschakelen op je Mac-browser Safari. De stappen zijn vergelijkbaar voor de nieuwste macOS-editie Ventura, en eerdere versies zoals Monterey, Big Sur, Catalina, enzovoort, tot Jaguar.

Lees ook: Html 4.01

Hoe je de Safari Web Inspector op macOS gebruikt

Vind hieronder de stappen om de Web Inspector-tool aan te roepen voor webontwikkeling, contentcreatie of andere doeleinden. In dit artikel laat ik de stappen zien met behulp van het macOS Monterey-besturingssysteem. De stappen zijn echter vrij vergelijkbaar van macOS Jaguar tot Ventura.

• Open Safari en bezoek een website die je wilt inspecteren.
• Er zijn twee manieren om de onderliggende HTML/CSS-codes van een website te inspecteren of wijzigingen aan te brengen met behulp van de Apple-ontwikkelaarstool Web Inspector. Dit zijn:
  • Ontwikkel > Toon Web Inspector.
  • Rechtermuisklik > Inspecteer element.
• Om de eerste te gebruiken, ga je naar de Mac-toolbar voor de Safari-browser en klik je op het Ontwikkel menu.

• Klik in het contextmenu dat verschijnt op Toon Web Inspector. De sneltoets voor deze actie is Optie + Command + I.

• Dit opent de Web Inspector-tool in de onderhelft van de webbrowser. De codes die je ziet, zijn voor de volledige URL of webpagina die je hebt bezocht.
• Als je de onderliggende code voor een specifiek element op de webpagina wilt visualiseren zonder de code voor de hele webpagina te openen, selecteer dan het element dat je wilt inspecteren.

• Rechtermuisklik en selecteer Inspecteer element in het contextmenu dat opent.
• De Web Inspector van Safari zal openen.

• Maar deze keer brengt Safari je rechtstreeks naar de onderliggende HTML- of CSS-code van het element dat je aan het controleren bent.
• In deze tool krijg je de HTML- en CSS-codes van het webpagina-element dat je inspecteert.

Lees ook: Technipages legt CSS uit

Hoe je de Safari Web Inspector opent in oudere versies van macOS

Stel dat je op een Mac werkt die ouder is dan Jaguar en je de Web Inspector-tool moet gebruiken. Als je de bovenstaande stappen niet kunt vinden op die Mac, kun je een eenvoudige code uitvoeren om Web Inspector in te schakelen. Dit is hoe je het doet:

• Open Toepassingen en ga naar de Hulpprogramma's map.
• In Hulpprogramma's zou je Terminal moeten vinden. Dit is de opdrachtprompt van macOS-computers.
• Start nu de Terminal opdrachtregelinterface en typ de volgende eenvoudige opdracht in:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• Druk op Return om de opdracht uit te voeren.
• Nu kun je een webpagina in Safari openen en met de rechtermuisknop klikken of de muisknop ergens op de pagina ingedrukt houden tot het contextmenu verschijnt.
• Klik daar op de optie Inspecteer element om de onderliggende CSS- en HTML-codes van de website te bekijken.

Safari Web Inspector: De laatste woorden

Dit zijn de methoden om Web Inspector in Safari moeiteloos in te schakelen. Je kunt de stappen zelf volgen en in een paar minuten beginnen met ontwikkelen of contentcreatie. Je hebt de methoden geleerd om de Inspecteur Element op Safari voor zowel nieuwe als oudere macOS-edities te activeren. Als ik een methode om Web Inspector te krijgen en te gebruiken heb gemist, aarzel dan niet om het me te laten weten door een reactie hieronder achter te laten.

Wat komt eraan: de beste codeer-apps voor iPad.