Anta att du besöker en webbplats som du arbetat på och ser några fel. Du måste se sidkällan på iPhone eller iPad för att hitta buggykoden och fixa den. Du öppnar Safari och blir galen för att hitta HTML-källkodsvyknappen på Safari utan resultat. Vad gör du nu? Det är enkelt, läs bara den här artikeln!
Varje webbplatsutvecklare, programmerare, mjukvarudesigner, App Store-apputvecklare, innehållsskapare och webbansvarig vet hur avgörande källkoden är. I den här delen av arbetet måste du alltid titta på en webbsidas källkod för att rätta till problem, felsöka, designa och lägga till mervärde till webbplatsen.
Även om den här uppgiften är ganska enkel på Android- och Windows-enheter, är den lika svår på Apple-enheter som iPhone, iPad, MacBook och iMac. Men på macOS är funktionen tillgänglig men dold och du kan hitta den genom att följa detta "Visa HTML-källkod i Safari" artikel. Men för iOS-enheter är det en annan historia.
Apple gjorde det absolut svårt att se sidkällor på iPad/iPhone. Det finns inga inbyggda, eller jag borde säga, enkla metoder som du antingen kan trycka på eller peka på för att få HTML-källkoden för webbsidor. Men bli inte för galen än. Läs istället den här artikeln till slutet för att hitta de bästa sätten att lära dig hur du visar sidkälla på Safari på iPhone eller iPad.
Anledningar till att du måste se sidkälla på iPhone/iPad
Nedan hittar du några situationer och anledningar till att visa sidkällor på Safari på iPad/iPhone:
- Du måste visa sidkällan för en webbsida för en specifik enhet som iPhone eller iPad. Om du går in på webbplatsen på Mac och tittar på HTML-källkoden kommer du att se elementen för skrivbordsversionen, inte iPhone- eller iPad-versionerna.
- Du reser och vill investera din tid i att titta på webbsidors koder för att få nya idéer eller skapa en felsökningsplan.
- Du föredrar att göra webbplatsutveckling på din iPad eftersom den kommer med många multitasking-funktioner som Scenansvarig, Split View, etc.
Följ därför metoderna nedan för att vara förberedd om behovet av att visa sidkälla på iPhone eller iPad dyker upp när som helst.
Bästa metoderna för att se sidkälla på iPhone/iPad
Nedan är de populära sätten att visa sidkällor i HTML-koder på en iPhone eller iPad utan att använda någon tredjepartsapp. Dessa metoder är lämpliga för kodare och slutanvändare som rör sekretess och säkerhet:
1. Hämta HTML-källkoden med appen Genvägar
Den här metoden fungerar bara om du kör iOS 12.0 (iPadOS 12.0) och senare. Så här skapar du en genväg för visningssidan på iPhone eller iPad:
- Öppna Genvägar app från hemskärmen eller applådan.
- Tryck på plus (+) ikon för att skapa en ny tom genväg.
- Skriv i sökrutan HTML och plocka Gör HTML från Rich Text.
- Återigen, leta efter Snabb titt app i sökrutan och lägg till den i genvägsredigeraren.
- Tryck nu på genvägsikonen längst upp och välj Döp om.
- Byt namn på den till Se källkoden och tryck på Klar.
- Tryck på (i) knappen och slå på Visa i Share Sheet alternativ.
- Öppna nu webbläsaren Safari och besök en webbsida som du väljer.
- Tryck på Dela med sig knappen på Safari-appen och scrolla ner för att hitta Se källkoden genväg.
- Tryck på genvägen så får du HTML-källkoden i Quick Look.
2. Visa sidkälla med ett bokmärkesskript
I den här metoden skapar du ett bokmärke och webbadressen kommer att vara ett visningskällskript. När du surfar på en webbsida och behöver se sidkällan på Safari, tryck bara på bokmärket. Du får en HTML-källkod för sidan. Så här går det till:
- Besök en slumpmässig webbplats och bokmärk den i din Safari-webbläsare för iPad eller iPhone.
- Tryck på Safari-menyn i det övre vänstra hörnet och gå till Bokmärken.
- Rör Favoriter för att hitta bokmärket du just lade till.
- Långtryck på bokmärket och välj sedan Redigera på snabbmenyn.
- Rensa den befintliga bokmärkestiteln och byt namn på den till HTML-källkod eller något annat bara för att komma ihåg bokmärket.
- Tryck på Adress och rensa den befintliga webbadressen.
- Kopiera och klistra in följande kod som URL (kodskapare: 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))})();- Knacka Gjort på tangentbordet för att spara ändringarna du gjort hittills.
- Gå nu till webbsidan som du behöver inspektera källkoden för.
- Gå till Bokmärken menyn och tryck på HTML-källkod bokmärke som du just skapat.
- Du bör se HTML-koden för sidan du besöker på en ny Safari-flik.
Läs även:Hur man hanterar bokmärken i Safari på iOS och Mac
3. Visa sidkälla med macOS-internetdelning
Safari-appen på iPhone och iPad kommer med ett inbyggt verktyg för webbinspektör. Tyvärr fungerar funktionen inte direkt på iPhone- eller iPad-enheter. Du måste koppla enheterna till en MacBook eller iMac. Sedan kan du använda kontrollerna på Mac Safari för att visualisera HTML-källkoden. Processen fungerar i två faser enligt nedan:
Aktivera Web Inspector
Följ dessa steg för att aktivera Webbinspektör funktionalitet på Safari för iPad och iPhone:
- På din iPhone eller iPad öppnar du inställningar app.
- Gå till Safari-inställningar.
- Rulla ner till botten av Safari Settings-fönstret för att hitta Avancerad meny. Tryck på den.
- Aktivera Webbinspektör genom att trycka på växlingsknappen.
Visa sidkälla på Mac Safari
Gå till din Mac och följ dessa steg:
- Anslut din iPhone eller iPad med en MacBook eller iMac med USB-kabeln.
- Om enheten inte har autentiserats tidigare kommer Mac att be dig autentisera den med Apple ID.
- Öppna nu Safari-appen på Mac och besök valfri webbplats.
- Klicka på i Mac-verktygsfältet Utveckla.
- Leta efter din iPad eller iPhone i snabbmenyn som öppnas.
- Klicka på din iPad eller iPhone för att öppna ett nytt fönster på din Mac som visar Safari-skärmen för dessa enheter.
- Öppna nu målwebbplatsen på din iPhone eller iPad och visa källkoden i Mac Safari-webbläsaren.
Om du är okej med appar och verktyg från tredje part, kanske du också vill titta på dessa ytterligare metoder för att visa HTML-källkoder för webbsidor:
4. Safari Extension – Web Inspector
Du kan installera Web Inspector-tillägget för webbläsaren Apple Safari på iPad och iPhone. Ring sedan tillägget när du surfar på en webbsida för att se dess HTML-källkod. Här är stegen du bör prova:
- Öppna inställningar appen och gå till Safari-inställningar sektion.
- Scrolla ner tills du hittar Tillägg alternativ. Tryck på den.
- Inuti Extensions, tryck Fler tillägg.
- App Store-sidan för Safari Extensions dyker upp.
- Tryck på Sök ruta och typ Webbinspektör och tryck på Sök på tangentbordet.
- Hitta och installera Web Inspector-appen.
- Återigen gå till inställningar > Safari > Tillägg > och tryck på Webbinspektör.
- Använd växlingsknappen för att aktivera detta tillägg för Safari.
- Öppna Safari och besök valfri webbplats.
- Tryck på Tillägg ikonen till höger i adressfältet.
- Välj Webbinspektör förlängning.
- Välj den Tillåt en dag alternativet i popup-fönstret som visas.
- Återigen, tryck på Tillägg och tryck sedan på Web Inspector.
- HTML-källkoden bör dyka upp längst ned på webbsidan du tittar på.
- Du kan växla mellan flikarna som DOM, Elements, Console, Network och Resources.
- För att gå tillbaka till den normala vyn, tryck helt enkelt på Web Inspector-tillägget i avsnittet Extensions i Safari.
5. iOS-app – Visa källa
Du kan få det gratis i App Store. I sökrutan skriver du Visa källa och trycker på Sök. Du kommer att se flera resultat på App Store. Installera den som säger Visa källa. Leverantören av appen är Roman Tomjak.
Öppna appen från startskärmen eller applådan. Skriv sedan in webbadressen i adressfältet för att avslöja HTML-källkoden.
Verktyget ger en bild av källkoden i iPhone-storlek. Du kan dock ändra orientering eller zooma in med de relevanta knapparna längst ner till höger på skärmen.
6. Visa källkoden gratis med Google Web Cache
Du kan utföra följande snygga och coola trick på besökta webbplatser för att se deras underliggande källkod på Safari eller Chrome:
- Besök webbsidan som du behöver hitta HTML-källkoden för.
- Tryck på adressen i Safari eller Chromes adressfält.
- Ta skrivmarkören i början av adressen som visas i bilden ovan.
- Skriv nu följande kod innan https://
cache:
- Slå Gå knappen på iOS-tangentbordet.
- Överst på sidan måste du se Visa källa alternativ. Tryck på den.
- Nu får du källkoden för webbsidan som du just besökte.
Läs även:Hur du importerar dina bokmärken, lösenord och mer
7. Visa källkod på webbappar
Det finns många webbplatser som låter dig avslöja de underliggande källkoderna för webbplatser och webbsidor gratis eller mot en liten avgift. Från alla dessa webbappar valde jag CodeBeautifys källkodsvisare. Så här fungerar det:
- På iPhone eller iPad, gå till denna länk: Källkodsvisare med webbläsaren Safari.
- I den Skriv in URL skriv eller kopiera och klistra in webbsidans URL som du vill visa HTML-källkoden för.
- Tryck på Se knappen för att visa sidkälla på iPhone/iPad Safari webbläsare.
Slutsats
Så nu vet du alla knep för att se sidkälla på iPhone- och iPad-enheter. Du upptäckte några inhemska och icke-infödda metoder i den här artikeln. Du kan helt enkelt hålla dig till de inbyggda knepen på iPad eller iPhone för att se HTML-källkoden för webbsidor eller använda appar som gör uppgiften mycket enklare.
Låt mig veta vilken metod du gillade genom att lämna en kommentar nedan. Dela också artikeln på sociala medier och WhatsApp för att hjälpa dina vänner som lär sig webbutveckling och appkodning.
Nästa, Hur man lär sig Swift på Mac och iPad.