In deze handleiding wil ik je een diepgaand inzicht geven in het gebruik van de Developer Tools van Safari. Hoewel de ontwikkelingshulpmiddelen in Safari enkele verschillen vertonen ten opzichte van die in Chrome en Firefox, blijft het basisprincipe hetzelfde. Je zult leren hoe je de Developer Tools activeert, de verschillende gebieden en functies gebruikt en essentiële debugging-processen uitvoert. Laten we meteen beginnen met de belangrijkste inzichten.
Belangrijkste inzichten
- De Developer Tools in Safari zijn niet zo gemakkelijk toegankelijk als in andere browsers, omdat ze via de instellingen moeten worden geactiveerd.
- De gebruikersinterface en de functies van de Developer Tools lijken op die van andere browsers, maar de specifieke implementaties variëren.
- Debuggen op iOS-apparaten is mogelijk met Safari door het apparaat via USB aan te sluiten.
Stap-voor-stap handleiding
1. Activeren van de Developer Tools in Safari
Om de Developer Tools in Safari te activeren, moet je de Safari-instellingen aanpassen. Start Safari en ga naar de menubalk. Kies daar "Safari" en vervolgens "Voorkeuren".
Wissel naar het tabblad "Geavanceerd" helemaal rechts. Daar vind je de optie "Ontwikkelingsfuncties voor webontwikkelaars weergeven". Activeer deze optie om de Developer Tools te activeren.
2. Toegang tot de Developer Tools
Zodra de Developer Tools zijn geactiveerd, kun je ze openen via het menu "Ontwikkelen" in de menubalk of door specifieke sneltoetsen te gebruiken. Directe toegang via de toetsen F12 of Alt-Cmd-I werkt niet, maar je kunt bijvoorbeeld met de rechtermuisknop op het element klikken en "Element bekijken" selecteren.
Je kunt ook de sneltoets Cmd+Option+C gebruiken om de console te openen en tussen verschillende weergaven te schakelen.
3. Navigatie door de Developer Tools
Hoewel de gebruikersinterface van de Developer Tools er bekend uitziet, hebben ze enkele specifieke afwijkingen. In de linker zijbalk kun je schakelen tussen de tabbladen "Elementen", "Console", "Bronnen", "Netwerk" en anderen.
Hier leer je meer over de elementen van de website om hun stijlen en lay-outs weer te geven en bewerken. Je kunt elke stijl bewerken door eenvoudigweg op de bijbehorende CSS-regels te klikken.
4. Werken met de console
De console in Safari stelt je in staat JavaScript-code uit te voeren en de gewenste uitvoer weer te geven. Een interessant aspect is dat de opmaak van de resultaten hier anders is. Het eerste argument wordt als tekst weergegeven, terwijl alle volgende argumenten als JavaScript-objecten worden weergegeven.
Als je extra logboekmeldingen weergeeft, let er dan op dat de weergave geen spaties tussen de afzonderlijke argumenten bevat, maar eerder door strepen worden gescheiden. Dit kan belangrijk zijn om misverstanden bij debugging te voorkomen.
5. Instellen van broncode en breakpoints
In het tabblad "Bronnen" kun je de originele en getranspileerde bestanden van je website bekijken. Hier is het ook mogelijk om breakpoints in te stellen om debugging te vergemakkelijken. Klik eenvoudig op de juiste regel code.
Vergeet niet om ook de verschillende bedieningselementen te gebruiken om het stappen door de code te vergemakkelijken. Bij Safari is de sneltoets voor stappen anders; in plaats daarvan gebruik je specifieke symbolen.
6. Uitvoeren van netwerkanalyses
Het tabblad "Netwerk" biedt uitgebreide informatie over alle verzoeken die je pagina tijdens het laden doet. Hier zie je de verzoeken die worden verzonden en ontvangen, evenals hun kopteksten en voorbeelden.
Een interessante functie hier is het onderscheid tussen de headers en de timings, die je een dieper inzicht geven in de prestaties van je site.
7. Gebruik van prestatie-metingen en tijdlijnen
In het tabblad "Tijdlijnen" kun je uitgebreide prestatieanalyses uitvoeren en opnames maken om de snelheid en de processen op je site beter te begrijpen.
Deze functie werkt op een vergelijkbare manier als de prestatieprofielen in andere browsers, maar je moet mogelijk wennen aan enkele verschillen in de weergave en benaming.
8. Debuggen op mobiele apparaten
Een bijzonder hoogtepunt van de Safari Developer Tools is de mogelijkheid om websites te debuggen op je iPhone of iPad. Sluit je apparaat aan via USB en activeer de juiste debugopties in de apparaatinstellingen.
Ga vervolgens naar het menu "Ontwikkelen" en kies je verbonden apparaat om toegang te krijgen tot de geopende vensters en hun developer tools.
Samenvatting
In deze uitgebreide handleiding heb je geleerd hoe je de Safari Developer Tools activeert, de verschillende functies en tabbladen gebruikt en debugt op mobiele apparaten. De meeste functies lijken op die van tools in andere browsers, maar er zijn specifieke verschillen, vooral in interface en sneltoetsen. Zodra je hiermee bekend raakt, gaat het debuggen in Safari snel en gemakkelijk.
Veelgestelde vragen
Hoe activeer ik de Developer Tools in Safari?Ga naar de Safari-instellingen onder "Geavanceerd" en activeer de optie "Ontwikkelingsfuncties voor webontwikkelaars tonen".
Hoe open ik de console in Safari?Je kunt de console openen met de toetsencombinatie Cmd+Option+C of door te klikken op "Element onderzoeken" in het contextmenu.
Wat zijn de verschillen in de Safari-console in vergelijking met andere browsers?In Safari wordt het eerste argument als tekst weergegeven en de volgende als JavaScript-objecten, zonder spaties tussen de uitvoer.
Kan ik debuggen op mijn iPhone met Safari uitvoeren?Ja, door je iPhone via USB aan te sluiten en de debugopties te activeren, kun je websites op je iPhone debuggen.
Is er in Safari dezelfde prestatieanalyse als in Chrome?Ja, de tijdslijnfunctie in Safari maakt vergelijkbare prestatieanalyses mogelijk, maar de weergave kan anders zijn.
