Kuinka katsella Web-sivun lähdekoodia jokaisessa selaimessa

Lukemasi verkkosivut koostuvat muun muassa lähdekoodista. Selaimesi lataamasi tiedot kääntävät sen, mitä olet lukenut juuri nyt.

Useimmat verkkoselaimet tarjoavat mahdollisuuden nähdä verkkosivun lähdekoodia, jossa ei tarvita lisäohjelmistoa, riippumatta siitä, minkälaisen laitteen olet.

Jotkut jopa tarjoavat edistyksellisiä toimintoja ja rakenteita, mikä helpottaa HTML: n ja muiden ohjelmointikoodien tunnistamista sivulle.

Miksi haluat nähdä lähdekoodin?

On useita syitä, miksi haluat nähdä sivun lähdekoodin. Jos olet web-kehittäjä, haluat ehkä piipata kannen alla toisessa ohjelmoija-tyyppisessä tyylissä tai toteutuksessa. Ehkä olet laadunvarmistuksessa ja yrität selvittää, miksi tietyn osan verkkosivusta tekee tai käyttäytyy tavalla, jolla se on.

Voit myös olla aloittelija, joka yrittää oppia omien sivujen koodaamiseen ja etsii todellisia esimerkkejä. Tietenkin, et voi jäädä mihinkään näistä kategorioista ja haluat vain nähdä lähteen puhtaasta uteliaisuudesta.

Seuraavassa on ohjeita lähdekoodin katselemisesta valitsemassasi selaimessa.

Google Chrome

Käynnissä: Chrome OS, Linux, macOS, Windows

Chrome-työpöytäversiossa on kolme eri tapaa tarkastella sivun lähdekoodia, ensimmäinen ja yksinkertaisin, käyttämällä seuraavia pikanäppäimiä: CTRL + U ( COMMAND + OPTION + U macOS).

Kun painat tätä, tämä pikakuvake avaa uuden selainvälilehden, joka näyttää HTML-koodin ja muun koodin aktiiviselle sivulle. Tämä lähde on värikoodattu ja jäsennelty tavalla, joka helpottaa jakamista ja löytää etsimäsi. Voit myös päästä sinne syöttämällä seuraavan tekstin Chrome-osoiteriville, joka on liitetty verkkosivun URL-osoitteen vasemmalle puolelle ja painamalla Enter- avainta: -näkymän lähde: (eli lähdekoodi: https: // www .).

Kolmas tapa on Chromein kehittäjätyökaluilla , joiden avulla voit syventää sukelluksen sivun koodiin ja muokata sitä tarkasti testaus- ja kehitystarkoituksiin. Kehitystyökalujen käyttöliittymä voidaan avata ja sulkea käyttämällä tätä pikanäppäintä: CTRL + SHIFT + I ( COMMAND + OPTION + I macOS). Voit myös käynnistää ne ottamalla seuraavan polun.

1. Napsauta Chromen päävalikkopainiketta, joka sijaitsee oikeassa yläkulmassa ja jota edustaa kolme pystysuunnassa kohdistettua pistettä.
2. Kun pudotusvalikko tulee näkyviin, siirrä hiiren osoitin Lisää työkalut -vaihtoehtoon.
3. Kun alavalikko tulee näkyviin, napsauta Kehittäjien työkaluja .

Android
Web-sivun lähteen katselu Chrome-laitteella Android-laitteelle on yhtä helppoa kuin liittää seuraava teksti otsikon (tai URL-osoitteen) etuosaan ja lähettämällä se: view-source:. Esimerkki tästä olisi katselulähde: https: // www. . HTML-koodi ja muu koodi kyseisestä sivusta näkyvät välittömästi aktiivisessa ikkunassa.

iOS
Vaikka käytössä ei ole alkuperäisiä lähdekoodin kaltaisia ​​menetelmiä käyttämällä Chromea iPadissa, iPhonessa tai iPod touchissa, yksinkertaisin ja tehokkain on käyttää kolmannen osapuolen ratkaisua, kuten View Source -sovellusta.

Saatavana 0,99 dollaria App Storesta View Source pyytää sinua syöttämään sivun URL-osoitteen (tai kopioi / liitä se Chromen osoiterivistä, mikä on joskus yksinkertaisin polku) ja se on se. HTML: n ja muun lähdekoodin lisäksi sovelluksessa on myös välilehtiä, jotka näyttävät yksittäisen sivun sisällön, asiakirjan objektiomallin (DOM) sekä sivukokoa, evästeitä ja muita mielenkiintoisia yksityiskohtia.

Microsoft Edge

Käynnissä: Windows

Edge-selain mahdollistaa nykyisen sivun lähdekoodin tarkastelemisen, analysoinnin ja jopa muokkaamisen Developer Toolsin käyttöliittymän kautta. Voit käyttää tätä kätevää työkalupakettia käyttämällä yhtä näistä pikanäppäimistä: F12 tai CTRL + U. Jos haluat mieluummin hiiren, napsauta Edgen valikkopainiketta (kolme pistettä, jotka sijaitsevat oikeassa yläkulmassa) ja valitse luettelosta F12-kehittäjätyökalut .

Kun Dev-työkalut suoritetaan ensimmäisen kerran, Edge lisää kaksi lisävaihtoehtoa selaimen kontekstivalikkoon (pääsee napsauttamalla hiiren kakkospainikkeella missä tahansa verkkosivun sisällä): Tarkasta elementti ja Näytä lähde , joka avaa Deb työkalun käyttöliittymä, jossa on lähdekoodi.

Mozilla Firefox

Käynnissä: Linux, macOS, Windows

Voit tarkastella sivun lähdekoodia Firefoxin työpöytäversiossa painamalla näppäimistön CTRL + U ( COMMAND + U macOS) -komentoa, joka avaa uuden välilehden, joka sisältää HTML-koodin ja muun koodin aktiiviselle verkkosivulle.

Seuraavan tekstin kirjoittaminen Firefoxin osoiteriville suoraan sivun URL-osoitteen vasemmalle puolelle aiheuttaa sen, että sama lähde näkyy nykyisessä välilehdessä sijainnissa: view-source: (eli lähdekoodi: https: // www.) .

Toinen tapa käyttää sivun lähdekoodia on Firefoxin kehittäjätyökalu, joka on käytettävissä seuraavilla tavoilla.

1. Napsauta päävalikkopainiketta, joka sijaitsee selainikkunan oikeassa yläkulmassa ja jota edustaa kolme vaakaviivaa.
2. Kun näkyviin tulee ponnahdusvalikko, napsauta kehittäjän avainsana -kuvaketta.
3. Web-kehittäjän pikavalikon pitäisi nyt olla näkyvissä. Valitse Sivun lähde -vaihtoehto.

Firefoxin avulla voit myös katsella lähdekoodia tietylle sivun osalle, mikä helpottaa ongelmien eristämistä. Voit tehdä niin korosta ensin hiirellä kiinnostuksenne alue. Napsauta sitten hiiren kakkospainikkeella ja valitse Näytä valintalähde selaimen pikavalikosta.

Android
Lähdekoodin katselu Firefoxin Android-versiossa on saavutettavissa esiastamalla verkkosivun URL-osoite seuraavalla tekstillä: view-source:. Voit esimerkiksi näyttää HTML-lähteen, jolla lähetät seuraavan tekstin selaimen osoiteriville: view-source: https: // www. .

iOS
Suositeltu tapa katsella verkkosivun lähdekoodia iPadissa, iPhonessa tai iPod touchissa on Näytä Source-sovellus, joka on saatavilla App Storesta 0,99 dollaria. Vaikka sitä ei ole integroitu suoraan Firefoxin kanssa, voit helposti kopioida ja liittää URL-osoitteen selaimesta sovellukseen, jotta voit paljastaa kyseisen sivun HTML-koodin ja muun koodin.

Apple Safari

Käynnissä iOS- ja macOS-versioissa

iOS
Vaikka iOS: n Safari ei sisällä oletusarvoisesti sivun lähdekoodia, selaimen integrointi on melko saumaton Viewstore-sovelluksessa, joka on saatavilla App Storessa 0,99 dollarin hintaan.

Kun olet asentanut tämän kolmannen osapuolen sovelluksen, palaa Safari-selaimeen ja napauta Share-painiketta, joka sijaitsee näytön alareunassa ja jota edustaa neliö ja ylös nuoli. IOS-jakelevyn pitäisi nyt olla näkyvissä, ja se peittää Safarin ikkunan alimman puoliskon. Selaa oikealle ja valitse Näytä lähde -painike.

Nyt on näytettävä aktiivisen sivun lähdekoodin värikoodattu, jäsennelty esitys yhdessä muiden välilehtien kanssa, joiden avulla voit tarkastella sivun sisältöjä, komentosarjoja ja paljon muuta.

Mac käyttöjärjestelmä
Jos haluat tarkastella sivun lähdekoodia Safarin työpöydän versiossa, sinun on ensin otettava käyttöön Kehittäjä- valikko. Seuraavat vaiheet vievät sinut käyttämään tätä piilotettua valikkoa ja näyttämään sivun HTML-lähteen.

1. Napsauta Safarin selausvalikossa, joka sijaitsee näytön yläosassa.
2. Kun avattava valikko tulee näkyviin, valitse Asetukset- vaihtoehto.
3. Safarin Asetukset pitäisi nyt näkyä. Napsauta Lisäasetukset- kuvaketta, joka sijaitsee ylärivin oikealla puolella.
4. Kehittyneiden osien alaosassa näkyy valikkopalkissa Näytä kehitys -valikko , jonka mukana on tyhjä valintaruutu. Napsauta tätä ruutua kerran, jos haluat sijoittaa siihen valintaruudun, ja sulje Asetukset-ikkuna klikkaamalla vasemmassa yläkulmassa olevaa punaista "x".
5. Napsauta Kehystä- valikkoa, joka sijaitsee näytön yläosassa.
6. Kun avattava valikko tulee näkyviin, valitse Näytä sivun lähde . Voit käyttää myös seuraavia pikanäppäimiä: COMMAND + OPTION + U.

Ooppera

Käynnissä: Linux, macOS, Windows

Voit tarkastella lähdekoodia Opera-verkkoselaimesta Opera-selaimessa käyttämällä seuraavia pikanäppäimiä: CTRL + U ( COMMAND + OPTION + U macOS). Jos haluat esimerkiksi ladata lähteen nykyiseen välilehteen, kirjoita seuraava teksti sivun URL-osoitteen vasemmalle puolelle osoitepalkkiin ja paina Enter : view-source: (katso lähdekoodia: https: // www. ).

Opera-työpöydän versio mahdollistaa myös HTML-lähteen, CSS: n ja muiden elementtien käytön integroiduilla kehittäjävälineillä . Voit käynnistää tämän käyttöliittymän, joka oletuksena näkyy pääsalasanasi oikealla puolella, painamalla näppäimistön pikakuvaketta: CTRL + SHIFT + I ( COMMAND + OPTION + I macOS-tilassa).

Opera-kehittäjien työkalupakki on myös käytettävissä seuraavilla tavoilla.

1. Napsauta Opera-logoa, joka sijaitsee selainikkunan vasemmassa yläkulmassa.
2. Kun pudotusvalikko tulee näkyviin, siirrä hiiren osoitin Lisää työkalut -vaihtoehtoon.
3. Napsauta Näytä kehittäjä -valikko .
4. Napsauta Opera-tunnusta uudelleen.
5. Kun pudotusvalikko tulee näkyviin, viet hiiren kohdistimen kehittäjälle .
6. Kun alavalikko tulee näkyviin, napsauta Kehittäjän työkalut .

Vivaldi

Vivaldi-selaimessa on useita eri tapoja tarkastella sivun lähdettä. Yksinkertaisin on CTRL + U -näppäimistön pikavalinnan kautta, joka näyttää uuden sivun aktiivisen sivun koodin.

Voit myös lisätä seuraavan tekstin sivun etusivulle, joka näyttää lähdekoodin nykyisessä välilehdessä: view-source:. Esimerkki tästä olisi katselulähde: http: // www. .

Toinen tapa on selaimen integroidut kehittäjätyökalut, joita voi käyttää CTRL + SHIFT + I -yhdistelmän tai Kehittäjätyökalut -valintaikkunan avulla - selaimen Työkalut- valikossa - napsauttamalla V-logoa vasemmassa yläkulmassa. Dev-työkalujen avulla voidaan analysoida sivun lähdekoodia paljon tarkemmin.