Broncode van webpagina's bekijken op iPhone en iPad
Diversen / / December 02, 2021
Ook al zijn iOS-apps niet helemaal de ontwikkelingsmachines toch vind je over het algemeen een iPhone of een iPad in de toolkit van een webdesigner/ontwikkelaar. Hoewel als je een ontwikkelaar/uitgever bent of gewoon iemand die de broncode van een pagina wil bekijken of alle middelen die erop zijn geïmplementeerd, je dit meestal vanaf de computer doet.
![Dsc 0433](/f/cad76343272a761931799e47924b8c8b.jpg)
Nu heeft iOS 8 het veel gemakkelijker gemaakt om de bron, middelen en DOM-bronnen van een pagina te bekijken. En dankzij geweldige apps van derden met ondersteuning voor extensies, kun je het goed doen in Safari (Chrome wordt niet ondersteund omdat extensies toegang hebben tot DOM alleen in Safari).
Laten we het hebben over de twee apps waarmee u de broncode voor elke website kunt bekijken en opslaan wanneer u onderweg bent.
Bronextensie voor Safari bekijken
Bron bekijken ($ 0,99) is een eenvoudige en krachtige app met een Safari-extensie. Het kost $ 0,99, maar wordt geleverd met veel functies.
Nadat de app is geïnstalleerd, gaat u naar Safari, tikt u op de
Deel knop, veeg naar rechts op de onderste rij en tik op Meer. Van hier wisselen: Bron bekijken. Hiermee wordt de extensie ingeschakeld.Meer over iOS 8-extensies: iOS 8-extensies worden snel een krachtig gereedschap. Kijk eens naar hoe ze werken, de beste extensies voor delen, en hoe één extensie u kan helpen Safari te draaien in een volwaardige downloader.
Ga nu naar de pagina, tik op de Deel knop, en kies Bron bekijken. Je ziet de broncode van de pagina in al zijn glorie. Druk op Deel knop om het native share-blad te openen. Vanaf hier kun je de code naar een notities-app sturen of e-mailen.
![Afb 2418](/f/e49aedc99552deb9eecf66ead536de44.png)
![Afb 2419](/f/3b2b6992425db2c5067e8eadd5d3c007.png)
Hieronder ziet u vier knoppen: Activa, DOM, Script en Info.
Middelen geven een overzicht van alle afbeeldingen op de pagina. U kunt op een link tikken om een voorbeeld te zien en de afbeelding op te slaan.
De DOM knop toont u een boommodel met een hiërarchische structuur van de HTML-, XML- en SVG-documenten. U kunt op elk element tikken om het uit te vouwen.
![Afb 2421](/f/c7559589a97db587646c1c6caccb3bee.png)
![Afb 2422](/f/db4f5e31b6d7e4bdfd1c52cdba47aed2.png)
De Script knop laat je Javascript schrijven en injecteren op elke pagina (lokaal). De Info paneel toont informatie over de pagina.
Srcfari
Srcfari ($ 0,99) is een alternatief voor Bron weergeven. Hoewel de app je de broncode en items zoals afbeeldingen, CSS-stylesheets en scripts die op de pagina worden uitgevoerd, laat zien, moet je dit vanuit de app zelf doen. Er is geen Safari-extensie voor Srcfari.
![Afb 2426](/f/493aff8a6dc703d96eedcdfa1d2362e6.png)
![Afb 2428](/f/85e46e1bf946f8ebd9aa79ccdf1dcc66.png)
Dat gezegd hebbende, het gebruik van Srcfari is helemaal geen slechte ervaring. De app heeft een mooie typografie en het is veel beter in het opsplitsen van activa op basis van scripts, CSS en afbeeldingen dan de View Source-app. Een klacht die ik heb met Srcfari is dat het tekstterugloop voor CSS-stylesheets mogelijk maakte, maar niet wanneer je de volledige bron bekijkt (wat de View Source-app doet). Dit betekent dat er behoorlijk wat pannen en zoomen bij komt kijken, althans op de iPhone.
![Afb 2429](/f/0f8a9f380a884ee749ae420798229800.png)
![Afb 2430](/f/a6a7e9c50bdbd650aebcd8e88313392b.png)
Verder is Srcfari de gebruikelijke aangelegenheid. U kunt de broncode naar uw klembord kopiëren of naar iemand e-mailen. U kunt ook afbeeldingen opslaan met behulp van de app.
Conclusie
Safari is waarschijnlijk al uw favoriete browser op iOS (voornamelijk omdat u in iOS niet standaard Chrome kunt selecteren). Als je de broncode vrij vaak moet bekijken, is de View Source-app van $ 0,99 met zijn Safari-extensie de prijs waard.
Gebruik je je iPhone of iPad meestal om problemen met websites op te lossen? Of om te kijken wat er met ze aan de hand is? Laat het ons weten in de reacties hieronder.