Ooit de bron van een webpagina willen bekijken vanaf een iPad of iPhone? Helaas bevat mobiele Safari de functie zelf niet en heeft het nog geen ingebouwde toolkit voor mobiele webinspecteurs, maar met behulp van een aangepaste bookmarklet kun je de bron van elke webpagina rechtstreeks in iOS en iPadOS bekijken.

Dit artikel laat je zien hoe je je kunt instellen zodat je de bron kunt bekijken in Safari voor iPad en iPhone door een bookmarklet en javascript-truc te gebruiken.

De bron bekijken in Safari voor iPad en iPhone

1. Open Safari als je dat nog niet hebt gedaan
2. Voeg een bladwijzer toe aan deze webpagina (of een andere) met Safari op een iPad, iPhone of iPod touch en geef de bladwijzer de naam "Bekijk bron"
3. Klik hier om de javascript van de bookmarklet te bekijken en kies vervolgens Alles selecteren -> Kopiëren
4. Tik op het bladwijzerpictogram in het scherm Safari nieuwe browser en tik op "Bewerken", en tik vervolgens op de bladwijzer die je in stap 2 hebt opgeslagen
5. Plak de JavaScript-code die u in stap 3 hebt gekopieerd in de URL-balk en sla de wijzigingen vervolgens op in de bladwijzer door op "Gereed" te tikken
6. Als u nu de bron van een webpagina op iPad of iPhone wilt bekijken, opent u het menu Bladwijzers en selecteert u "Bron weergeven"
7. De broncode verschijnt in gemarkeerde syntaxis met aanklikbare bron-URL's

Een belangrijk ding om op te merken is dat de javascript die hier wordt gebruikt, de pagina waarnaar u de bron bekijkt, naar de michelsen.dk-server stuurt voor verwerking. Als je je daar niet prettig bij voelt, zijn er andere oplossingen, maar die benadrukken de syntaxis niet en zijn over het algemeen lang niet zo elegant.

U kunt bijvoorbeeld het onderstaande Javascript gebruiken als een bookmarklet om ook de bron te bekijken, die niet via een externe server wordt verwerkt, maar er wordt geen syntaxisaccentuering gebruikt:

javascript:(function(){var a=window.open('about:blank').document;a.write('Bron van '+locatie. href+'');a.close();var b=a.body.appendChild(a.createElement('pre'));b.style.overflow='auto';b.style.whiteSpace='pre-wrap ';b.appendChild(a.createTextNode(document.documentElement.innerHTML))})();

Een vergelijkbare tip gebruikt een bewerkte bladwijzer om Firebug met Mobile Safari ook op een iPhone of iPad te laten draaien, wat voor sommige webontwikkelaars wat handiger kan zijn.

Deze geweldige tip komt van Michelsen.dk. Gevonden via Twitter, daar kun je ons ook volgen

Wie weet, misschien krijgt Safari in iOS en iPadOS op een dag de native mogelijkheid om de bron te bekijken? Tot die tijd moet je vertrouwen op de apps of tools van deze partij zoals deze.

Dit werkte prima tijdens het testen, maar sommige gebruikers rapporteren verschillende resultaten op verschillende latere versies van Safari en iOS. Laat ons in de reacties hieronder weten wat voor jou werkt en welke iOS-versie en iPad of iPhone je gebruikt.