Oletetaan, että vierailet verkkosivustolla, jonka parissa olet työskennellyt, ja näet virheitä. Sinun on tarkasteltava sivun lähdettä iPhonessa tai iPadissa löytääksesi bugisen koodin ja korjataksesi sen. Avaat Safarin ja tulet hulluksi löytääksesi HTML-lähdekoodin näkymäpainikkeen Safarista turhaan. Mitä sinä teet nyt? Se on helppoa, lue tämä artikkeli!
Jokainen verkkosivustojen kehittäjä, ohjelmoija, ohjelmistosuunnittelija, App Store -sovelluskehittäjä, sisällöntuottaja ja verkkovastaava tietää, kuinka tärkeä lähdekoodi on. Tässä työvaiheessa sinun on aina katsottava verkkosivun lähdekoodia ongelmien korjaamiseksi, virheenkorjauksen, suunnittelun ja arvon lisäämiseksi verkkosivustolle.
Vaikka tämä tehtävä on melko helppo Android- ja Windows-laitteissa, se on yhtä vaikeaa Apple-laitteissa, kuten iPhonessa, iPadissa, MacBookissa ja iMacissa. Tosin macOS: ssä ominaisuus on saatavilla, mutta piilotettu, ja löydät sen seuraamalla tätä "Tarkastele HTML-lähdekoodia Safarissa”artikkeli. iOS-laitteille se on kuitenkin erilainen tarina.
Apple teki sivulähteiden tarkastelun iPadissa/iPhonessa ehdottoman vaikeaksi. Ei ole olemassa mitään alkuperäisiä, tai minun pitäisi sanoa, helppoja menetelmiä, joita voit joko napauttaa tai koskettaa saadaksesi verkkosivujen HTML-lähdekoodin. Mutta älä vielä ole liian hullu. Sen sijaan lue tämä artikkeli loppuun asti löytääksesi parhaat tavat oppia katsomaan sivun lähdettä Safarissa iPhonessa tai iPadissa.
Syitä sinun täytyy tarkastella sivun lähdekoodia iPhonessa/iPadissa
Alta löydät tilanteita ja syitä tarkastella sivulähteitä Safarissa iPadissa/iPhonessa:
- Sinun on tarkasteltava tietyn laitteen, kuten iPhonen tai iPadin, verkkosivun sivulähdettä. Jos käytät verkkosivustoa Macilla ja tarkastelet HTML-lähdekoodia, näet työpöytäversion elementit, ei iPhone- tai iPad-versioiden elementit.
- Olet matkustamassa ja haluat käyttää aikaasi verkkosivujen koodien katseluun saadaksesi uusia ideoita tai luodaksesi virheenkorjaussuunnitelman.
- Teet mieluummin verkkosivustojen kehittämistä iPadillasi, koska siinä on monia moniajoominaisuuksia, kuten Näyttämömestari, Jaettu näkymä jne.
Seuraa siis alla olevia menetelmiä pysyäksesi valmistautuneena, jos tarve tarkastella sivun lähdettä iPhonessa tai iPadissa ilmenee milloin tahansa.
Parhaat menetelmät sivun lähteen katseluun iPhonessa/iPadissa
Alla on suosittuja tapoja tarkastella sivujen lähteitä HTML-koodeilla iPhonessa tai iPadissa ilman, että käytät kolmannen osapuolen sovelluksia. Nämä menetelmät sopivat tietosuojaan ja turvallisuuteen liittyville koodaajille ja loppukäyttäjille:
1. Hanki HTML-lähdekoodi Pikakuvakkeet-sovelluksen avulla
Tämä menetelmä toimii vain, jos käytössäsi on iOS 12.0 (iPadOS 12.0) tai uudempi. Näin voit luoda näkymäsivun lähteen pikakuvakkeen iPhonessa tai iPadissa:
- Avaa Pikanäppäimet sovellus aloitusnäytöstä tai sovelluslaatikosta.
- Napauta plus (+) -kuvaketta luodaksesi uuden tyhjän pikakuvakkeen.
- Kirjoita hakukenttään HTML ja valita Tee HTML Rich Textistä.
- Etsi jälleen Nopea vilkaisu sovellus hakukenttään ja lisää se pikakuvakeeditoriin.
- Napauta nyt yläreunassa olevaa pikakuvaketta ja valitse Nimeä uudelleen.
- Nimeä se uudelleen muotoon Näytä lähdekoodi ja napauta Valmis.
- Napauta (i) -painiketta ja kytke päälle Näytä Jaa-taulukossa vaihtoehto.
- Avaa nyt Safari-selain ja siirry valitsemallesi verkkosivulle.
- Kosketa Jaa -painiketta Safari-sovelluksessa ja vieritä alas löytääksesi Näytä lähdekoodi pikakuvake.
- Napauta pikakuvaketta ja saat HTML-lähdekoodin Quick Lookiin.
2. Näytä sivun lähde kirjanmerkkikomentosarjan avulla
Tässä menetelmässä luot kirjanmerkin ja URL-osoite on näkymän lähdekoodi. Kun selaat mitä tahansa verkkosivua ja haluat tarkastella sivun lähdettä Safarissa, napauta kirjanmerkkiä. Saat sivulle HTML-lähdekoodin. Näin se tehdään:
- Vieraile satunnaisella verkkosivustolla ja merkitse se kirjanmerkkeihin iPadin tai iPhonen Safari-selaimessa.
- Napauta Safari-valikko vasemmassa yläkulmassa ja siirry kohtaan Kirjanmerkit.
- Kosketus Suosikit löytääksesi juuri lisäämäsi kirjanmerkin.
- Napauta kirjanmerkkiä pitkään ja valitse sitten Muokata kontekstivalikosta.
- Tyhjennä nykyinen kirjanmerkin otsikko ja nimeä se uudelleen HTML-lähdekoodi tai jotain muuta vain kirjanmerkin muistamiseksi.
- Napauta Osoite -kenttään ja tyhjennä nykyinen URL-osoite.
- Kopioi ja liitä seuraava koodi URL-osoitteeksi (koodin luoja: 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))})();- Napauta Tehty näppäimistöllä tallentaaksesi tähän mennessä tekemäsi muutokset.
- Siirry nyt verkkosivulle, jonka lähdekoodi on tarkistettava.
- Siirry kohtaan Kirjanmerkit valikkoa ja kosketa HTML-lähdekoodi juuri luomasi kirjanmerkki.
- Sinun pitäisi nähdä vierailemasi sivun HTML-koodi uudessa Safari-välilehdessä.
Lue myös:Kirjanmerkkien hallinta Safarissa iOS: ssä ja Macissa
3. Näytä sivun lähde macOS-jaetun avulla
iPhonen ja iPadin Safari-sovelluksessa on sisäänrakennettu Web Inspector -työkalu. Valitettavasti ominaisuus ei toimi suoraan iPhone- tai iPad-laitteissa. Sinun on kytkettävä laitteet MacBookiin tai iMaciin. Tämän jälkeen voit visualisoida HTML-lähdekoodin Mac Safarin säätimillä. Prosessi toimii kahdessa vaiheessa alla kuvatulla tavalla:
Aktivoi Web Inspector
Käynnistä laite noudattamalla näitä ohjeita Verkkotarkastaja Toiminnot Safarissa iPadille ja iPhonelle:
- Avaa iPhonessa tai iPadissa asetukset sovellus.
- Mene Safari-asetukset.
- Vieritä Safari-asetukset-ikkunan alaosaan löytääksesi Pitkälle kehittynyt valikosta. Napauta sitä.
- Aktivoi Verkkotarkastaja napauttamalla vaihtopainiketta.
Näytä sivun lähdekoodi Mac Safarissa
Siirry Maciin ja noudata näitä ohjeita:
- Liitä iPhone tai iPad MacBookilla tai iMacilla USB-kaapelilla.
- Jos laitetta ei ole todennettu aiemmin, Mac pyytää sinua todentamaan sen Apple ID: llä.
- Avaa nyt Safari-sovellus Macissa ja käy millä tahansa verkkosivustolla.
- Napsauta Macin työkalupalkissa Kehittää.
- Etsi iPad tai iPhone avautuvasta pikavalikosta.
- Napsauta iPadia tai iPhonea avataksesi Macissasi uuden ikkunan, jossa näkyy näiden laitteiden Safari-näyttö.
- Avaa nyt kohdesivusto iPhonessa tai iPadissa ja tarkastele lähdekoodia Mac Safari -selaimella.
Jos käytät kolmannen osapuolen sovelluksia ja työkaluja, sinun kannattaa myös tarkastella näitä lisämenetelmiä verkkosivujen HTML-lähdekoodien tarkastelemiseksi:
4. Safari-laajennus – Web Inspector
Voit asentaa Web Inspector -laajennuksen Apple Safari -selaimelle iPadiin ja iPhoneen. Soita sitten laajennukseen, kun selaat verkkosivua nähdäksesi sen HTML-lähdekoodin. Tässä ovat vaiheet, joita sinun tulee kokeilla:
- Avaa asetukset sovellus ja siirry kohtaan Safari-asetukset osio.
- Vieritä alas, kunnes löydät Laajennukset vaihtoehto. Napauta sitä.
- Napauta Laajennukset-kohdassa Lisää laajennuksia.
- Safari-laajennusten App Store -sivu avautuu.
- Kosketa Hae laatikko ja tyyppi Verkkotarkastaja ja napauta Hae näppäimistöltä.
- Etsi ja asenna Web Inspector -sovellus.
- Mene taas osoitteeseen asetukset > Safari > Laajennukset > ja napauta Verkkotarkastaja.
- Aktivoi tämä laajennus Safarille vaihtopainikkeella.
- Avaa Safari ja käy millä tahansa verkkosivustolla.
- Napauta Laajennukset -kuvaketta osoitepalkin oikeassa reunassa.
- Valitse Verkkotarkastaja laajennus.
- Valitse Varaa yksi päivä -vaihtoehto esiin tulevassa ponnahdusikkunassa.
- Napauta uudelleen Laajennukset -kuvaketta ja kosketa sitten Web Inspector.
- HTML-lähdekoodin pitäisi ponnahtaa esiin tarkastelemasi verkkosivun alalaidasta.
- Voit vaihtaa välilehtien välillä, kuten DOM, Elements, Console, Network ja Resources.
- Voit palata normaalinäkymään napauttamalla Web Inspector -laajennusta Safarin Laajennukset-osiossa.
5. iOS-sovellus – Näytä lähde
Saat sen ilmaiseksi App Storesta. Kirjoita hakukenttään Näytä lähde ja kosketa Haku. Näet useita tuloksia App Storessa. Asenna se, jossa lukee Näytä lähde. Sovelluksen toimittaja on Roman Tomjak.
Avaa sovellus aloitusnäytöstä tai sovelluslaatikosta. Kirjoita sitten verkkosivuston URL-osoite sen osoitepalkkiin paljastaaksesi HTML-lähdekoodin.
Työkalu antaa iPhone-kokoisen näkymän lähdekoodista. Voit kuitenkin muuttaa suuntaa tai zoomata käyttämällä vastaavia painikkeita näytön oikeassa alakulmassa.
6. Tarkastele lähdekoodia ilmaiseksi Google-verkkovälimuistin avulla
Voit suorittaa seuraavan siistin ja siistin tempun vierailluilla verkkosivustoilla nähdäksesi niiden taustalla olevan lähdekoodin Safarissa tai Chromessa:
- Vieraile verkkosivulla, jolle sinun on löydettävä HTML-lähdekoodi.
- Napauta osoitetta Safarin tai Chromen osoitepalkissa.
- Siirrä kirjoituskohdistin osoitteen alkuun, kuten yllä olevassa kuvassa näkyy.
- Kirjoita nyt seuraava koodi ennen https://
kätkö:
- Lyö Mennä -painiketta iOS-näppäimistöllä.
- Sivun yläreunassa sinun täytyy nähdä Katso lähde vaihtoehto. Napauta sitä.
- Nyt saat juuri vierailemasi verkkosivun lähdekoodin.
Lue myös:Kuinka tuoda kirjanmerkit, salasanat ja paljon muuta
7. Näytä lähdekoodi Web Appsissa
On monia verkkosivustoja, joiden avulla voit paljastaa verkkosivustojen ja verkkosivujen taustalla olevat lähdekoodit ilmaiseksi tai pientä maksua vastaan. Kaikista noista verkkosovelluksista valitsin CodeBeautifyn lähdekoodin katseluohjelman. Näin se toimii:
- Siirry iPhonessa tai iPadissa tähän linkkiin: Lähdekoodin katseluohjelma käyttämällä Safari-selainta.
- Vuonna Syötä URL ruutuun, kirjoita tai kopioi ja liitä verkkosivun URL-osoite, jonka HTML-lähdekoodin haluat paljastaa.
- Napauta Näytä -painiketta tarkastellaksesi sivun lähdettä iPhone/iPad Safari-selaimessa.
Johtopäätös
Joten nyt tiedät kaikki temput sivun lähteen katsomiseen iPhone- ja iPad-laitteilla. Löysit tässä artikkelissa joitain alkuperäisiä ja ei-natiivimenetelmiä. Voit vain pitää kiinni iPadin tai iPhonen alkuperäisistä temppuista nähdäksesi verkkosivujen HTML-lähdekoodin tai käyttää sovelluksia, jotka helpottavat tehtävää huomattavasti.
Kerro minulle, mistä menetelmästä pidit jättämällä kommentin alle. Jaa artikkeli myös sosiaalisessa mediassa ja WhatsAppissa auttaaksesi ystäviäsi, jotka opettelevat verkkosivustojen kehitystä ja sovellusten koodausta.
Seuraava, Kuinka oppia Swift Macilla ja iPadilla.