Anta at du besøker et nettsted du har jobbet på og ser noen feil. Du må se sidekilden på iPhone eller iPad for å finne buggykoden og fikse den. Du åpner Safari og blir gal for å finne HTML-kildekodevisningsknappen på Safari til ingen nytte. Hva gjør du nå? Det er enkelt, bare les denne artikkelen!
Hver nettstedsutvikler, programmerer, programvaredesigner, App Store-apputvikler, innholdsskaper og webmaster vet hvor avgjørende kildekoden er. I denne delen av arbeidet må du alltid se på en nettsides kildekode for å rette opp problemer, feilsøke, designe og tilføre verdi til nettstedet.
Selv om denne oppgaven er ganske enkel på Android- og Windows-enheter, er den like vanskelig på Apple-enheter som iPhone, iPad, MacBook og iMac. Skjønt, på macOS, er funksjonen tilgjengelig, men skjult, og du kan finne den ved å følge denne "Se HTML-kildekoden i Safari" artikkel. For iOS-enheter er det imidlertid en annen historie.
Apple gjorde det absolutt vanskelig å se sidekilder på iPad/iPhone. Det er ingen innfødte, eller jeg burde si, enkle metoder som du enten kan trykke eller berøre for å få HTML-kildekoden til nettsider. Men ikke bli for gal ennå. Les i stedet denne artikkelen til slutten for å finne de beste måtene å lære å se sidekilde på Safari på iPhone eller iPad.
Grunner til at du må se sidekilde på iPhone/iPad
Nedenfor finner du noen situasjoner og grunner til å se sidekilder på Safari på iPad/iPhone:
- Du må se sidekilden til en nettside for en bestemt enhet som iPhone eller iPad. Hvis du går inn på nettstedet på Mac og ser HTML-kildekoden, vil du se elementene for skrivebordsversjonen, ikke iPhone- eller iPad-versjonene.
- Du er på reise og vil investere tiden din i å se på nettsidekoder for å få nye ideer eller lage en feilsøkingsplan.
- Du foretrekker å gjøre nettstedsutvikling på iPaden din siden den kommer med mange multitasking-funksjoner som Scenesjef, delt visning osv.
Følg derfor metodene nedenfor for å være forberedt dersom behovet for å se sidekilden på iPhone eller iPad skulle dukke opp når som helst.
Beste metoder for å se sidekilde på iPhone/iPad
Nedenfor er de populære måtene å vise sidekilder i HTML-koder på en iPhone eller iPad uten å bruke noen tredjepartsapp. Disse metodene er egnet for personvern- og sikkerhetsberørte kodere og sluttbrukere:
1. Få HTML-kildekoden ved å bruke snarveier-appen
Denne metoden fungerer bare hvis du kjører iOS 12.0 (iPadOS 12.0) og nyere. Slik oppretter du en snarvei for visningssiden på iPhone eller iPad:
- Åpne Snarveier app fra startskjermen eller appskuffen.
- Trykk på pluss (+) ikonet for å opprette en ny tom snarvei.
- Skriv inn i søkefeltet HTML og plukke Lag HTML fra rik tekst.
- Igjen, se etter Rask kikk app i søkeboksen og legg den til i snarveisredigereren.
- Trykk nå på snarveiikonet øverst og velg Gi nytt navn.
- Gi det nytt navn til Se kildekoden og trykk på Ferdig.
- Trykk på (Jeg) knappen og slå på Vis i Share Sheet alternativ.
- Åpne nå Safari-nettleseren og besøk en nettside du ønsker.
- Trykk på Dele på Safari-appen og rull ned for å finne Se kildekoden snarvei.
- Trykk på snarveien og du får HTML-kildekoden i Quick Look.
2. Vis sidekilde ved hjelp av et bokmerkeskript
I denne metoden oppretter du et bokmerke og nettadressen vil være et visningskildeskript. Når du surfer på en nettside og trenger å se sidekilden på Safari, trykker du ganske enkelt på bokmerket. Du får en HTML-kildekode for siden. Slik gjøres det:
- Besøk et tilfeldig nettsted og bokmerk det i Safari-nettleseren din for iPad eller iPhone.
- Trykk på Safari-menyen øverst til venstre og gå til Bokmerker.
- Ta på Favoritter for å finne bokmerket du nettopp la til.
- Trykk lenge på bokmerket og velg deretter Redigere på kontekstmenyen.
- Fjern den eksisterende bokmerketittelen og gi den nytt navn til HTML-kildekode eller noe annet bare for å huske bokmerket.
- Trykk på Adresse og slett den eksisterende URL-en.
- Kopier og lim inn følgende kode som URL (Kodeskaper: 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))})();- Trykk på Ferdig på tastaturet for å lagre endringene du har gjort så langt.
- Gå nå til nettsiden du må inspisere kildekoden for.
- Gå til Bokmerker menyen og trykk på HTML-kildekode bokmerke du nettopp opprettet.
- Du bør se HTML-koden til siden du besøker i en ny Safari-fane.
Les også:Hvordan administrere bokmerker i Safari på iOS og Mac
3. Vis sidekilde ved hjelp av macOS-tilknytning
Safari-appen på iPhone og iPad kommer med et innebygd Web Inspector-verktøy. Dessverre fungerer ikke funksjonen direkte på iPhone- eller iPad-enheter. Du må koble enhetene til en MacBook eller iMac. Deretter kan du bruke kontroller på Mac Safari for å visualisere HTML-kildekoden. Prosessen fungerer i to faser som skissert nedenfor:
Aktiver Web Inspector
Følg disse trinnene for å slå på Webinspektør funksjonalitet på Safari for iPad og iPhone:
- Åpne på iPhone eller iPad Innstillinger app.
- Gå til Safari-innstillinger.
- Rull ned til bunnen av Safari Settings-vinduet for å finne Avansert Meny. Trykk på den.
- Aktiver Webinspektør ved å trykke på veksleknappen.
Se sidekilde på Mac Safari
Gå til Mac-en og følg disse trinnene:
- Koble til iPhone eller iPad med en MacBook eller iMac ved hjelp av USB-kabelen.
- Hvis enheten ikke har blitt autentisert tidligere, vil Mac be deg om å autentisere den med Apple ID.
- Åpne nå Safari-appen på Mac og besøk et hvilket som helst nettsted.
- Klikk på på Mac-verktøylinjen Utvikle.
- Se etter iPad eller iPhone i hurtigmenyen som åpnes.
- Klikk på iPad eller iPhone for å åpne et nytt vindu på Mac-en som viser Safari-skjermen til disse enhetene.
- Åpne nå målnettstedet på iPhone eller iPad og se kildekoden i Mac Safari-nettleseren.
Hvis du er ok med tredjepartsapper og -verktøy, kan det være lurt å se på disse tilleggsmetodene for å se HTML-kildekoder for nettsider:
4. Safari Extension – Web Inspector
Du kan installere Web Inspector-utvidelsen for Apple Safari-nettleseren på iPad og iPhone. Ring deretter utvidelsen når du surfer på en nettside for å se HTML-kildekoden. Her er trinnene du bør prøve:
- Åpne Innstillinger appen og gå til Safari-innstillinger seksjon.
- Rull ned til du finner Utvidelser alternativ. Trykk på den.
- Inne i Extensions, trykk Flere utvidelser.
- App Store-siden for Safari Extensions vil dukke opp.
- Trykk på Søk boks og type Webinspektør og trykk på Søk på tastaturet.
- Finn og installer Web Inspector-appen.
- Igjen gå til Innstillinger > Safari > Utvidelser > og trykk på Webinspektør.
- Bruk av/på-knappen for å aktivere denne utvidelsen for Safari.
- Åpne Safari og besøk et hvilket som helst nettsted.
- Trykk på Utvidelser ikonet i høyre hjørne av adressefeltet.
- Velg Webinspektør Utvidelse.
- Velg Tillat en dag alternativet i popup-vinduet som vises.
- Igjen, trykk på Utvidelser og trykk deretter på Web Inspector.
- HTML-kildekoden skal dukke opp fra bunnen av nettsiden du ser på.
- Du kan bytte mellom fanene som DOM, Elements, Console, Network og Resources.
- For å gå tilbake til normal visning, trykk ganske enkelt på Web Inspector-utvidelsen på Extensions-delen av Safari.
5. iOS-app – Se kilde
Du kan få det gratis i App Store. I søkeboksen skriver du Vis kilde og trykker på Søk. Du vil se flere resultater på App Store. Installer den som sier Vis kilde. Leverandøren av appen er Roman Tomjak.
Åpne appen fra startskjermen eller appskuffen. Deretter skriver du inn nettadressen i adressefeltet for å avsløre HTML-kildekoden.
Verktøyet gir en visning av kildekoden i iPhone-størrelse. Du kan imidlertid endre retning eller zoome inn ved å bruke de relevante knappene nederst til høyre på skjermen.
6. Se kildekoden gratis ved å bruke Google Web Cache
Du kan utføre følgende ryddige og kule triks på besøkte nettsteder for å se deres underliggende kildekode på Safari eller Chrome:
- Besøk nettsiden du trenger for å finne HTML-kildekoden.
- Trykk på adressen i Safari- eller Chrome-adresselinjen.
- Ta skrivemarkøren i begynnelsen av adressen som vist i bildet ovenfor.
- Nå, skriv inn følgende kode før https://
cache:
- Slå den Gå knappen på iOS-tastaturet.
- Øverst på siden må du se Se kilde alternativ. Trykk på den.
- Nå får du kildekoden til nettsiden du nettopp har besøkt.
Les også:Slik importerer du bokmerker, passord og mer
7. Se kildekoden på nettapper
Det er mange nettsteder som lar deg avsløre de underliggende kildekodene til nettsteder og nettsider gratis eller mot en liten avgift. Fra alle disse nettappene valgte jeg CodeBeautifys kildekodevisning. Slik fungerer det:
- Gå til denne lenken på iPhone eller iPad: Kildekodeviser ved å bruke Safari-nettleseren.
- I Skriv inn URL boks, skriv inn eller kopier og lim inn nettadressen til nettsiden du vil vise HTML-kildekoden for.
- Trykk på Utsikt -knappen for å se sidekilden på iPhone/iPad Safari-nettleseren.
Konklusjon
Så nå vet du alle triksene for å se sidekilde på iPhone- og iPad-enheter. Du oppdaget noen innfødte og ikke-innfødte metoder i denne artikkelen. Du kan ganske enkelt holde deg til de opprinnelige triksene på iPad eller iPhone for å se HTML-kildekoden til nettsider eller bruke apper som gjør oppgaven mye enklere.
Fortell meg hvilken metode du likte ved å legge igjen en kommentar nedenfor. Del også artikkelen på sosiale medier og WhatsApp for å hjelpe vennene dine som lærer nettsideutvikling og appkoding.
Neste, Hvordan lære Swift på Mac og iPad.