Katso Web-sivun lähdekoodi 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öydän versio tarjoaa kolme eri tapaa sivun lähdekoodin katselemiseen, ensimmäinen ja yksinkertainen seuraavalla pikanäppäimellä: CTRL + U (COMMAND + OPTION + U macOS: lla).

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 Chromen osoiteriville, joka on liitetty verkkosivun URL-osoitteen vasemmalle puolelle ja valitsemalla Tulla sisään key: Katso lähde: (eli näkymän lähde: https: //www.Go-Travels.com).

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

1. Valitse Chromen päävalikkopainike, joka sijaitsee oikeassa yläkulmassa ja jota edustaa kolme pystysuunnassa kohdistettua pistettä.

2. Kun pudotusvalikko tulee näkyviin, siirrä hiiren osoitin hiiren osoittimen päälle Lisää työkaluja vaihtoehto.

3. Kun alavalikko tulee näkyviin, valitse Kehitystyökalut.

Android

Web-sivun lähteen katselu Chrome-laitteella Android on yhtä yksinkertainen kuin liittää seuraava teksti otsikon (tai URL-osoitteen) eteen ja lähettämällä se: Katso lähde:. Esimerkki tästä olisi View-lähde: https: //www.Go-Travels.com . 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. Sovelluksessa on myös HTML-koodin ja muun lähdekoodin lisäksi myös välilehtiä, jotka näyttävät yksittäisen sivun sisällön, Asiakirjaobjektimallin (DOM) sekä sivukokoa, evästeitä ja muita kiinnostavia 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 F12-kehitystyökalut vaihtoehto luettelosta.

Kun dev-työkalut ovat ensimmäistä kertaa käynnissä, Edge lisää kaksi lisävaihtoehtoa selaimen kontekstivalikkoon (pääsee napsauttamalla hiiren kakkospainikkeella mitä tahansa verkkosivun sisällä): Tarkastele elementtiä ja Katso lähde, joka jälkimmäinen avaa Debugger osa dev-työkalun käyttöliittymästä, jossa on lähdekoodi.

Mozilla Firefox

Käynnissä: Linux, macOS, Windows

Voit tarkastella sivun lähdekoodia Firefoxin työpöytäversiossa painamalla CTRL + U (COMMAND + U macOS) näppäimistöllä, 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ä: Katso lähde: ( eli katselulähde: https: //www.dotdash.com ).

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

1. Valitse päävalikkopainike, joka sijaitsee selainikkunan oikeassa yläkulmassa ja jota edustaa kolme vaakasuoraa viivaa.

2. Kun ponnahdusvalikko tulee näkyviin, napsauta Kehittäjä "jakoavain" -kuvake.

3. Web-kehittäjän pikavalikon pitäisi nyt olla näkyvissä. Valitse Sivun lähde vaihtoehto.

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

Android

Lähdekoodin katselu Firefoxin Android-versiossa on saavutettavissa esiastamalla verkkosivun URL-osoite seuraavalla tekstillä: Katso lähde:. Jos haluat esimerkiksi tarkastella Dotdashin HTML-lähdettä, lähetät seuraavan tekstin selaimen osoiteriville: View-lähde: https: //www.dotdash.com .

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, selain integroidaan melko saumattomasti View Source -sovellukseen, joka on saatavilla App Storesta 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 Katso lähde painiketta.

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 se käyttöön Kehittää valikko. Seuraavat vaiheet vievät sinut käyttämään tätä piilotettua valikkoa ja näyttämään sivun HTML-lähteen.

1. valita Safari selaimen valikossa, joka sijaitsee näytön yläosassa.

2. Kun pudotusvalikko tulee näkyviin, valitse Asetukset vaihtoehto.

3. Safarin Asetukset pitäisi nyt näkyä. Klikkaa Pitkälle kehittynyt kuvaketta, joka sijaitsee ylärivin oikealla puolella.

4. Kehittyneiden osien alaosassa on vaihtoehto merkitty Näytä valikkorivin Kehitä-valikko, mukana tyhjä valintaruutu. Valitse tämä ruutu kerran asettaaksesi sen valintamerkki ja sulje Asetukset-ikkuna klikkaamalla vasemmassa yläkulmassa olevaa punaista "x".

5. Valitse Kehittää valikko, 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

Jos haluat tarkastella lähdekoodia Opera-verkkoselaimesta Opera-selaimessa, käytä seuraavaa pikanäppäintä: CTRL + U (COMMAND + OPTION + U macOS: lla). Jos haluat ladata lähdettä nykyiseen välilehteen, kirjoita seuraava teksti sivun URL-osoitteen vasemmalle puolelle osoiteriville ja paina Anna: näkymä-lähde: ( eli katselulähde: https: //www.Go-Travels.com ).

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 avata tämän käyttöliittymän, joka oletuksena näkyy pääsalasanasi oikealla puolella, painamalla näppäimistön pikakuvaketta: CTRL + VAIHTO + I (COMMAND + OPTION + I macOS: lla).

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

1. Valitse Opera-logo, joka sijaitsee selainikkunan vasemmassa yläkulmassa.

2. Kun pudotusvalikko tulee näkyviin, siirrä hiiren osoitin hiiren osoittimen päälle Lisää työkaluja vaihtoehto.

3. Klikkaa Näytä kehittäjävalikko.

4. Valitse Opera-logo uudelleen.

5. Kun pudotusvalikko tulee näkyviin, viet hiiren kohdistimen päälle Kehittäjä.

6. Kun alavalikko tulee näkyviin, valitse Kehitystyökalut.

Vivaldi

Vivaldi-selaimessa on useita eri tapoja tarkastella sivun lähdettä. Yksinkertaisin on kautta CTRL + U pikanäppäin, 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ä: Katso lähde:. Esimerkki tästä olisi View-lähde: http: //www.dotdash.com .

Toinen tapa on selaimen integroidut kehittäjätyökalut, joita voi käyttää painamalla CTRL + VAIHTO + I yhdistelmä tai Kehitystyökalut vaihtoehto selaimessa Työkalut valikko - löydetty valitsemalla V logo vasemmassa yläkulmassa. Dev-työkalujen avulla voidaan analysoida sivun lähdekoodia paljon tarkemmin.