Web Inspector gebruiken om mobiele Safari (iPhone of iPad) te debuggen

Het ontwikkelen van webpagina's voor mobiele apparaten of het debuggen van uw hybride app is vaak moeilijk. Maar gelukkig voor mensen die op iOS ontwerpen, al lang geleden met iOS 6, biedt Apple een externe webinspecteur-functie in iOS.

Met Web Inspector kunnen ontwikkelaars van web- en mobiele apps macOS en OS X Safari Developer Tools gebruiken om op afstand fouten op te sporen in webinhoud of hybride apps in mobiele Safari op iPad of iPhone.

Het is een gemakkelijke en praktische manier om uw webpagina's of hybride apps op iOS te debuggen, optimaliseren en wijzigen.

Om toegang te krijgen tot deze ontwikkelingshulpmiddelen, schakelt u het menu Ontwikkelen in de geavanceerde voorkeuren van Safari van uw Mac in.

Snelle tips

Volg deze snelle tips om de webinspecteur te laten werken, zodat u fouten kunt opsporen in uw site of app voor Safari

• Reset uw locatie- en privacy-instellingen op uw iPhone, iPad of iPod touch. Ga naar Instellingen > Algemeen > Reset > Locatie en privacy resetten
• Zorg ervoor dat u op de computer inlogt met dezelfde Apple ID als uw iPhone, iPad of iPod touch
• Schakel Safari iCloud-synchronisatie in voor zowel de computer als elke iPhone, iPad of iPod touch
• Ga op de iPhone of iPad naar Instellingen > Safari > Geavanceerd en schakel in Webinspecteur
• Open Safari op de computer en ga naar de Safari-menu > Voorkeuren > Geavanceerd en vinkje Toon Ontwikkel-menu in menubalk

gerelateerde artikelen

• Bekijk de HTML-broncode van de webpagina op iPad of iPhone. Geen app nodig!
• Hoe HTML-broncode in Safari te bekijken
• Hoe Favicons in Safari voor iPhones en Macs te zien

Mac-computer vereist

Sorry Windows-mensen, maar Safari's Web Inspector is alleen compatibel met Macs!

Gebruik dezelfde Apple ID en iCloud Sync!

Zorg ervoor dat zowel uw iDevice als uw Mac zijn ingelogd met dezelfde Apple ID en dat u Safari AAN zet in iCloud.

Voor uw iDevice: Instellingen > Apple ID-profiel > iCloud > Safari > AAN gezet

Voor je Mac: Apple Menu > Systeemvoorkeuren > Apple ID of iCloud > Safari > Aangevinkt

En controleer of Safari ook dezelfde versie is

Zorg ervoor dat Safari op uw Mac dezelfde versie is als Safari op uw iDevice. Mogelijk moet u uw iOS-versie of uw versie van Safari op uw Mac bijwerken.

Reset je locatie- en privacy-instellingen

1. Ga naar Instellingen > Algemeen
2. Selecteer Resetten
3. Kiezen om Locatie en privacy resetten

Pro Keyboard ShortCut-tip op Mac voor webontwikkelaars

Als u in Safari op CTRL+Command+R drukt, kunt u zien hoe een website eruit zou zien op een bepaald apparaat door het apparaat te selecteren.

Gebruik Web Inspector om mobiele Safari te debuggen

1. Tik op uw iPad, iPhone of iPod touch op Instellingen > Safari > Geavanceerd en schakel in Web Inspecteur. En schakel JavaScript in als dit nog niet is ingeschakeld

2. Start Safari op uw Mac en ga naar Safari-menu > Voorkeuren > Geavanceerd controleer dan "Toon Ontwikkel-menu in menubalk” als je dat nog niet hebt gedaan

3. Verbind uw iOS-apparaat met uw Mac met de USB-kabel. Dit is van cruciaal belang: u moet de apparaten handmatig aansluiten met een kabel. Via wifi werkt het niet!

4. Open nu op uw iPad de website die u wilt opsporen, open vervolgens op uw Mac Safari en ga naar de "Ontwikkelen”-menu. Je ziet nu je iDevice die je met je Mac hebt verbonden. Als u geen pagina op uw iDevice hebt geopend, ziet u een bericht met de tekst 'Geen inspecteerbare toepassingen'.

5. Debug nu de pagina die open is op mobiele Safari, net zoals u zou debuggen op Mac, inspecteer DOM-elementen, pas CSS aan, meet paginaprestaties en voer Javascript-commando's uit.

Gebruik de debugger-tool om u te helpen de oorzaak van eventuele JavaScript-fouten op uw webpagina te vinden. U kunt breekpunten toevoegen, het javascript debuggen en de waarde van de variabelen tijdens runtime inspecteren.

Safari zou ook eventuele CSS-, HTML- en JavaScript-fouten moeten detecteren. En u ziet de details van elke fout in de debugger.

iDevice verschijnt niet in het ontwikkelmenu in Safari?

•  Wis uw Safari-cache en cookies
• Update Safari op je Mac en iDevice als er een update beschikbaar is.
  • Als u een bètaversie van iOS of macOS gebruikt, moet u mogelijk de nieuwste bètaversie op alle apparaten uitvoeren
• Probeer een andere kabel en/of poort op je Mac. Zeker weten dat kabel is een echte Apple Lightning-kabel of MFI-gecertificeerd (Made For iPhone)
• Controleer of Web Inspector is ingeschakeld. iOS-updates schakelen dit soms terug naar de standaard UIT-instelling. Dus zorg ervoor dat u het controleert Instellingen > Safari > Geavanceerd > Web Inspector
  • Probeer Web Inspector uit te schakelen, wacht 10 seconden en schakel weer in
• Probeer in plaats daarvan Safari Technology Preview-browser
• Sluit Safari op je Mac af en start hem opnieuw. Kijk of Safari op je Mac je apparaat herkent en foutopsporing toestaat
• Controleer of u de privénavigatiemodus van Safari niet gebruikt if uw iDevice verschijnt slechts kort in het menu Ontwikkelen van Safari en verdwijnt vervolgens
• Open Activity Monitor en controleer wat er aan de hand is met Safari

Tips voor lezers 

• Als u een ouder iDevice met iOS 6 of eerder gebruikt, heeft de Safari-webbrowser van uw apparaat zijn eigen ingebouwde Debug Console! Ga gewoon naar Safari's Debug Console door naar Instellingen > Safari > Ontwikkelaar > Foutopsporingsconsole