Safari voor iOS bevat een optionele foutopsporingsconsole waarmee webontwikkelaars problemen met webpagina's op iPhone en iPad kunnen opsporen en oplossen.

Nog beter, met de nieuwste versies van iOS gebruikt het eigenlijk dezelfde Web Inspector die Safari op desktop ook gebruikt, wat betekent dat als je de iPhone of iPad op de computer aansluit, je de foutopsporingstools van Safari rechtstreeks kunt gebruiken met uw iOS- of iPadOS-apparaat

Oudere versies van iOS hebben deze mogelijkheid ook, en hoewel niet zo uitgebreid als de desktop-Safari-tools voor foutopsporing en ontwikkelaars, is het nog steeds nuttig en gemakkelijk in- of uit te schakelen op de iPhone en iPad.

Laten we eens kijken hoe we deze functie kunnen inschakelen op zowel nieuwe als oude versies van iOS, en ook leren wat er tussen de versies verschilt.

Web Inspector inschakelen en gebruiken in Safari voor iPhone en iPad

Op moderne iOS- en iPadOS-versies werkt Safari-webinspecteur als volgt:

1. Open Instellingen > Safari > Geavanceerd en tik vervolgens om 'Webinspecteur' in te schakelen
2. Sluit de iPhone of iPad aan op een Mac, ga vervolgens naar Safari en schakel het ontwikkelaarsmenu in als je dat nog niet hebt gedaan door naar Safari te gaan > Voorkeuren > Geavanceerd > Toon menubalk Ontwikkelen
3. Trek de menubalk "Ontwikkelen" naar beneden en zoek de iPhone of iPad, en open vervolgens de webpagina die u wilt debuggen
4. Safari Web Inspector wordt geopend waar u webelementen kunt debuggen en inspecteren vanaf het iOS- of IPadOS-apparaat rechtstreeks in Safari op de Mac

Als je nu navigeert op de iPhone of iPad, zul je zien dat de Web Inspector in Safari op de Mac wordt bijgewerkt.

Je hebt toegang tot de foutopsporingsconsole via het tabblad Console in de webinspecteur en je hebt toegang tot de debugger via het tabblad Foutopsporing. En natuurlijk zijn de gebruikelijke webinspecteur-tools voor elementen, bronnen, netwerk, enz. ook beschikbaar voor gebruik.

Je kunt ook een View Source-truc voor iOS en iPadOS gebruiken terwijl je onderweg bent, indien nodig.

Debug-console inschakelen op oudere iOS-versies

Als je een oudere versie van iOS op een oudere iPhone of iPad hebt, staat de hele foutopsporingservaring op het apparaat en heb je niet de mogelijkheid om het te verbinden met Safari op een Mac. Desalniettemin is het nog steeds best nuttig, zo werkt het:

1. Start "Instellingen" en tik op "Safari"
2. Tik op “Geavanceerd”
3. Schuif "Debug Console" naar AAN

Eenmaal ingeschakeld, tikt u op de foutopsporingsconsole boven aan een willekeurig Safari-scherm om webpaginafouten te zien.

De standaardlijst toont alle fouten, maar u kunt inzoomen op meer specifieke HTML-, JavaScript- en CSS-fouten door ze afzonderlijk aan te raken.

Een andere handige tool voor mobiele webontwikkelaars is Firebug Lite voor iOS, dat een javascript-bookmarklet gebruikt om een ​​eenvoudigere versie van de populaire Firebug-ontwikkelingstool te laden. Die functionaliteit is waarschijnlijk ook het handigst voor de oudere iOS-versies, aangezien nieuwere releases nieuwe mogelijkheden hebben.

Gebruik je tools voor webontwikkelaars voor iPhone of iPad? Deel tips, trucs, apps of technieken met ons in de reacties hieronder.