Stel dat u een website bezoekt waarop u heeft gewerkt en enkele storingen ziet. U moet de paginabron op iPhone of iPad bekijken om de buggycode te vinden en te repareren. Je opent Safari en wordt gek om de HTML-broncodeweergaveknop op Safari tevergeefs te vinden. Wat doe je nu? Het is eenvoudig, lees dit artikel!
Elke website-ontwikkelaar, programmeur, software-ontwerper, App Store-app-ontwikkelaar, maker van inhoud en webmaster weet hoe cruciaal broncode is. In dit deel van het werk moet u altijd naar de broncode van een webpagina kijken om problemen op te lossen, fouten op te sporen, te ontwerpen en waarde toe te voegen aan de website.
Hoewel deze taak vrij eenvoudig is op Android- en Windows-apparaten, is het net zo moeilijk op Apple-apparaten zoals iPhone, iPad, MacBook en iMac. Hoewel, op macOS, de functie is beschikbaar maar verborgen en je kunt het vinden door dit te volgen "HTML-broncode bekijken in Safari" artikel. Voor iOS-apparaten is het echter een ander verhaal.
Apple heeft het absoluut moeilijk gemaakt om paginabronnen op iPad/iPhone te bekijken. Er zijn geen native, of ik zou zeggen, eenvoudige methoden waarop u kunt tikken of aanraken om de HTML-broncode van webpagina's te krijgen. Maar maak je nog niet te gek. Lees in plaats daarvan dit artikel tot het einde om de beste manieren te vinden om te leren hoe u de paginabron op Safari op iPhone of iPad kunt bekijken.
Redenen waarom u de paginabron op iPhone/iPad moet bekijken
Hieronder vindt u enkele situaties en redenen om paginabronnen op Safari op iPad/iPhone te bekijken:
- U moet de paginabron van een webpagina bekijken voor een specifiek apparaat zoals een iPhone of iPad. Als u de website op Mac opent en de HTML-broncode bekijkt, ziet u de elementen voor de desktopversie, niet de iPhone- of iPad-versies.
- U bent op reis en wilt uw tijd investeren in het bekijken van webpaginacodes om nieuwe ideeën op te doen of een foutopsporingsplan te maken.
- U geeft er de voorkeur aan om website-ontwikkeling op uw iPad te doen, omdat deze wordt geleverd met veel multitasking-functies, zoals Podiummanager, gesplitste weergave, enz.
Volg dus de onderstaande methoden om voorbereid te blijven als de noodzaak om de paginabron op iPhone of iPad te bekijken op enig moment verschijnt.
Beste methoden om paginabron op iPhone / iPad te bekijken
Hieronder staan de populaire manieren om paginabronnen in HTML-codes op een iPhone of iPad te bekijken zonder gebruik te maken van een app van derden. Deze methoden zijn geschikt voor codeerders en eindgebruikers die zich zorgen maken over privacy en veiligheid:
1. Download de HTML-broncode met behulp van de Shortcuts-app
Deze methode werkt alleen als u iOS 12.0 (iPadOS 12.0) en hoger gebruikt. Ga als volgt te werk om een snelkoppeling naar een weergavepaginabron op iPhone of iPad te maken:
- Open de Snelkoppelingen app vanuit het startscherm of de app-lade.
- Druk op plus (+) pictogram om een nieuwe lege snelkoppeling te maken.
- Typ in het zoekvak HTML en kies Maak HTML van Rich Text.
- Nogmaals, zoek naar de Snelle blik app in het zoekvak en voeg deze toe aan de snelkoppelingseditor.
- Tik nu op het snelkoppelingspictogram bovenaan en kies Hernoemen.
- Hernoem het naar Broncode bekijken en tik op Gereed.
- Druk op (i) knop en zet de Weergeven in deelblad keuze.
- Open nu de Safari-browser en bezoek een webpagina naar keuze.
- Raak de Deel knop in de Safari-app en scroll naar beneden om de Broncode bekijken snelkoppeling.
- Tik op de snelkoppeling en je krijgt de HTML-broncode in Quick Look.
2. Paginabron bekijken met behulp van een bladwijzerscript
Bij deze methode maakt u een bladwijzer en wordt de URL een weergavebronscript. Wanneer u door een webpagina bladert en de paginabron in Safari wilt bekijken, tikt u eenvoudig op de bladwijzer. U krijgt een HTML-broncode voor de pagina. Hier is hoe het gedaan is:
- Bezoek een willekeurige website en maak er een bladwijzer van in uw Safari-browser voor iPad of iPhone.
- Druk op Safari-menu in de linkerbovenhoek en ga naar Bladwijzers.
- Aanraken Favorieten om de zojuist toegevoegde bladwijzer te vinden.
- Tik lang op de bladwijzer en selecteer vervolgens Bewerking in het contextmenu.
- Wis de bestaande bladwijzertitel en hernoem deze naar HTML-broncode of iets anders om de bladwijzer te onthouden.
- Druk op Adres veld en wis de bestaande URL.
- Kopieer en plak de volgende code als de URL (codemaker: Rob Flaherty):
javascript:(function(){var a=window.open('about: blank').document; a.write('');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))})();- Kraan Klaar op het toetsenbord om de tot nu toe aangebrachte wijzigingen op te slaan.
- Ga nu naar de webpagina waarvoor u de broncode moet inspecteren.
- Ga naar de Bladwijzers menu en raak aan HTML-broncode bladwijzer die u zojuist hebt gemaakt.
- U zou de HTML-code van de pagina die u bezoekt op een nieuw Safari-tabblad moeten zien.
Lees ook:Bladwijzers beheren in Safari op iOS en Mac
3. Paginabron bekijken met behulp van macOS-tethering
De Safari-app op iPhone en iPad wordt geleverd met een ingebouwde Web Inspector-tool. Helaas werkt de functie niet rechtstreeks op iPhone- of iPad-apparaten. U moet de apparaten aan een MacBook of iMac koppelen. Vervolgens kunt u de bedieningselementen op de Mac Safari gebruiken om de HTML-broncode te visualiseren. Het proces werkt in twee fasen, zoals hieronder beschreven:
Activeer Web Inspector
Volg deze stappen om in te schakelen Web inspecteur functionaliteit op Safari voor iPad en iPhone:
- Open op je iPhone of iPad de Instellingen app.
- Ga naar Safari-instellingen.
- Scrol omlaag naar de onderkant van het venster Safari-instellingen om het Geavanceerd menu. Tik erop.
- Activeer de Web inspecteur door op de schakelknop te tikken.
Bekijk paginabron op Mac Safari
Ga naar je Mac en volg deze stappen:
- Sluit de iPhone of iPad aan op een MacBook of iMac met behulp van de USB-kabel.
- Als het apparaat niet eerder is geverifieerd, zal Mac je vragen om het te authenticeren met Apple ID.
- Open nu de Safari-app op Mac en bezoek een willekeurige website.
- Klik op de Mac-werkbalk Ontwikkelen.
- Zoek naar je iPad of iPhone in het contextmenu dat wordt geopend.
- Klik op je iPad of iPhone om een nieuw venster op je Mac te openen met het Safari-scherm van deze apparaten.
- Open nu de doelwebsite op uw iPhone of iPad en bekijk de broncode in de Mac Safari-browser.
Als u tevreden bent met apps en tools van derden, wilt u misschien ook deze aanvullende methoden bekijken om HTML-broncodes van webpagina's te bekijken:
4. Safari-extensie - Webinspecteur
U kunt de Web Inspector-extensie voor de Apple Safari-browser op iPad en iPhone installeren. Roep vervolgens de extensie aan tijdens het browsen op een webpagina om de HTML-broncode te bekijken. Dit zijn de stappen die u moet proberen:
- Open de Instellingen app en ga naar de Safari-instellingen sectie.
- Scroll naar beneden tot je de Extensies keuze. Tik erop.
- Tik in Extensies op Meer extensies.
- De App Store-pagina voor Safari-extensies verschijnt.
- Raak de Zoekopdracht doos en type Web inspecteur en tik op Zoeken op het toetsenbord.
- Zoek en installeer de Web Inspector-app.
- Nogmaals ga naar Instellingen > Safari > Extensies > en tik Web inspecteur.
- Gebruik de schakelknop om deze extensie voor Safari te activeren.
- Open Safari en bezoek een willekeurige website.
- Druk op Extensies pictogram in de rechterhoek van de adresbalk.
- Selecteer de Web inspecteur verlenging.
- Kies de Sta een dag toe optie in de pop-up die verschijnt.
- Tik nogmaals op de Extensies pictogram en raak vervolgens Web Inspector aan.
- De HTML-broncode zou onderaan de webpagina die u bekijkt, moeten verschijnen.
- U kunt schakelen tussen de tabbladen zoals DOM, Elements, Console, Network en Resources.
- Om terug te gaan naar de normale weergave, tikt u eenvoudig op de Web Inspector-extensie in het gedeelte Extensies van Safari.
5. iOS-app - Bron bekijken
Je kunt het gratis krijgen in de App Store. Typ in het zoekvak Bron weergeven en tik op Zoeken. Je ziet meerdere resultaten in de App Store. Installeer degene die zegt View Source. De aanbieder van de app is Roman Tomjak.
Open de app vanuit het startscherm of de app-lade. Typ vervolgens de website-URL in de adresbalk om de HTML-broncode te onthullen.
De tool geeft een weergave op iPhone-formaat van de broncode. U kunt echter de oriëntatie wijzigen of inzoomen met behulp van de relevante knoppen in de rechterbenedenhoek van het scherm.
6. Bekijk gratis de broncode met Google Web Cache
U kunt de volgende handige en coole truc uitvoeren op bezochte websites om hun onderliggende broncode in Safari of Chrome te bekijken:
- Bezoek de webpagina waarvoor u de HTML-broncode moet vinden.
- Tik op het adres in de adresbalk van Safari of Chrome.
- Neem de typcursor aan het begin van het adres zoals weergegeven in de bovenstaande afbeelding.
- Typ nu de volgende code ervoor https://
cache:
- Druk op de Gaan knop op het iOS-toetsenbord.
- Bovenaan de pagina moet u de Bron bekijken keuze. Tik erop.
- Nu krijg je de broncode van de webpagina die je net hebt bezocht.
Lees ook:Hoe u uw bladwijzers, wachtwoorden en meer kunt importeren
7. Bekijk broncode op web-apps
Er zijn veel websites die u gratis of tegen een kleine vergoeding de onderliggende broncodes van websites en webpagina's laten onthullen. Van al die web-apps heb ik CodeBeautify's Source Code Viewer gekozen. Dit is hoe het werkt:
- Ga op iPhone of iPad naar deze link: Broncode-viewer met behulp van de Safari-browser.
- In de URL invoeren typ of kopieer en plak de webpagina-URL waarvan u de HTML-broncode wilt onthullen.
- Druk op Weergave knop om de paginabron te bekijken in de iPhone/iPad Safari-browser.
Conclusie
Dus nu ken je alle trucs om de paginabron op iPhone- en iPad-apparaten te bekijken. Je hebt in dit artikel enkele native en niet-native methoden ontdekt. U kunt gewoon vasthouden aan de native trucs op iPad of iPhone om de HTML-broncode van webpagina's te bekijken of apps te gebruiken die de taak een stuk eenvoudiger maken.
Laat me weten welke methode je leuk vond door hieronder een reactie achter te laten. Deel het artikel ook op sociale media en WhatsApp om uw vrienden te helpen die website-ontwikkeling en app-codering leren.
Volgende, Hoe Swift te leren op Mac en iPad.