Jokaisen suuren Internet-selaimen avulla käyttäjät voivat tarkastella minkä tahansa vierailemansa verkkosivun HTML-lähdekoodia. Seuraavissa osissa on tietoa useista tavoista tarkastella lähdekoodia kussakin yleisimmissä selaimissa. Jatka valitsemalla merkintä alla olevasta luettelosta ja seuraamalla ohjeita.
Alkutiedot
Kun tarkastelet verkkosivun lähdekoodia, palvelimen käsittelemät tiedot ja koodi eivät näy. Esimerkiksi hakukone käsittelee palvelimella olevia tietoja ja näyttää sitten tulokset verkkosivulla. Toisin sanoen voit tarkastella tulossivun muodostavaa koodia, mutta et voi tarkastella hakukoneen lähdekoodia.
Tämä sääntö koskee kaikkia palvelinpuolen komentosarjoja, SSI:tä ja ohjelmointikoodia. Siksi et voi tarkastella hakukoneissa, foorumeilla, kyselyissä, chatissa jne. käytettyä komentosarjojen lähdekoodia. Myös tietojen kopioiminen lähdekoodista voi aiheuttaa virheitä tai ohjata sinut takaisin sivulle, jolta kopioit tiedot.
Google Chrome
Voit tarkastella verkkosivun lähdekoodia Google Chromessa jollakin seuraavista tavoista.
Näytä vain lähdekoodi
Menetelmä yksi
Jos haluat tarkastella vain lähdekoodia, paina tietokoneen näppäimistön pikanäppäimiä Ctrl+U.
Menetelmä kaksi
Napsauta Web-sivun tyhjää osaa hiiren kakkospainikkeella ja valitse näkyviin tulevasta ponnahdusvalikosta Näytä sivun lähde.
Näytä sivun lähde elementeillä
- Avaa Chrome ja siirry verkkosivulle, jonka lähdekoodia haluat tarkastella.
- Napsauta Mukauta ja hallitse Google Chromea
-kuvaketta selainikkunan oikeassa yläkulmassa. - Valitse näkyviin tulevasta avattavasta valikosta Lisää työkaluja ja sitten Kehittäjätyökalut.
- Napsauta Elementit-välilehteä näytön alareunaan ilmestyvän uuden osion vasemmassa yläkulmassa.
Chromessa F12- tai Ctrl+Shift+I-näppäinten painaminen tuo myös esiin interaktiivisen kehittäjätyökalun. Tämä työkalu tarjoaa paljon enemmän vuorovaikutusta lähdekoodin ja CSS-asetusten kanssa, jolloin käyttäjät näkevät välittömästi, kuinka koodin muutokset vaikuttavat verkkosivuun.
Mozilla Firefox
Voit tarkastella verkkosivun lähdekoodia Mozilla Firefoxissa jollakin seuraavista tavoista.
Näytä vain lähdekoodi
Menetelmä yksi
Jos haluat tarkastella vain lähdekoodia, paina tietokoneen näppäimistön Ctrl+U.
Menetelmä kaksi
Napsauta Web-sivun tyhjää osaa hiiren kakkospainikkeella ja valitse näkyviin tulevasta ponnahdusvalikosta Näytä sivun lähde.
Näytä sivun lähde elementeillä
- Avaa Firefox ja siirry verkkosivulle, jonka lähdekoodia haluat tarkastella.
- Napsauta valikkoa
-kuvaketta näytön oikeassa yläkulmassa. - Valitse avattavasta valikosta Web Developer ja valitse sitten laajennetusta valikosta Toggle Tools.
- Napsauta Tarkastaja-välilehteä näytön alareunassa näkyvän osion vasemmassa yläkulmassa.
Firefoxissa F12- tai Ctrl+Shift+I-näppäinten painaminen tuo myös esiin interaktiivisen kehittäjätyökalun. Tämä työkalu tarjoaa vuorovaikutuksen lähdekoodin ja CSS-asetusten kanssa, jolloin käyttäjät voivat nähdä, kuinka koodin muutokset vaikuttavat verkkosivuun reaaliajassa.
Näytä sivun lähdekoodin osa
- Korosta verkkosivun osa, jonka lähdekoodia haluat tarkastella.
- Napsauta korostettua osaa hiiren kakkospainikkeella ja valitse Näytä valinnan lähde.
Firebug-lisäosan avulla voit tarkastella ja muokata sivun lähdekoodia ja tarkastella muutoksia livenä selaimen kautta.
Microsoft Edge
Voit tarkastella Web-sivun lähdekoodia Microsoft Edgessä jollakin seuraavista tavoista.
Näytä vain lähdekoodi
Menetelmä yksi
Jos haluat tarkastella vain lähdekoodia, paina tietokoneen näppäimistön Ctrl+U.
Menetelmä kaksi
Napsauta Web-sivun tyhjää osaa hiiren kakkospainikkeella ja valitse näkyviin tulevasta ponnahdusvalikosta Näytä sivun lähde.
Näytä sivun lähde elementeillä
- Avaa Microsoft Edge ja siirry verkkosivulle, jonka lähdekoodia haluat tarkastella.
- Napsauta Asetukset ja muuta
-kuvaketta näytön oikeassa yläkulmassa. - Siirrä hiiren osoitin avattavassa valikossa Lisää työkaluja päälle ja valitse laajennetusta valikosta Kehittäjätyökalut.
- Napsauta Elementit-välilehteä näytön oikeaan reunaan ilmestyvän ikkunan yläosassa.
Microsoft Edgessä F12- tai Ctrl+Shift+I-näppäinten painaminen tuo myös esiin interaktiivisen kehittäjätyökalun. Tämä työkalu tarjoaa vuorovaikutuksen lähdekoodin ja CSS-asetusten kanssa, jolloin käyttäjät voivat nähdä, kuinka koodin muutokset vaikuttavat verkkosivuun reaaliajassa.
Microsoft Internet Explorer
Voit tarkastella Web-sivun lähdekoodia Microsoft Internet Explorerissa jollakin seuraavista tavoista.
Näytä vain lähdekoodi
Menetelmä yksi
Jos haluat tarkastella vain lähdekoodia, paina tietokoneen näppäimistön Ctrl+U.
Menetelmä kaksi
Napsauta Web-sivun tyhjää osaa hiiren kakkospainikkeella ja valitse näkyviin tulevasta ponnahdusvalikosta Näytä lähde.
Näytä sivun lähde elementeillä
- Avaa Internet Explorer ja siirry verkkosivulle, jonka lähdekoodia haluat tarkastella.
- Napsauta Työkalut
oikeassa yläkulmassa. - Valitse avattavasta valikosta F12 Developer Tools.
- Napsauta DOM Explorer -välilehteä kehittäjän työkalujen valikon vasemmassa yläkulmassa.
Internet Explorerissa F12-näppäimen painaminen tuo esiin DOM-työkalun. Tämä työkalu tarjoaa vuorovaikutuksen lähdekoodin ja CSS-asetusten kanssa, jolloin käyttäjät näkevät välittömästi, kuinka koodin muutokset vaikuttavat verkkosivuun.
Safari
Safarissa verkkosivun lähdekoodin tarkasteleminen edellyttää, että otat käyttöön kehittäjäasetukset. Seuraavissa osissa kerrotaan, kuinka tämä ominaisuus otetaan käyttöön ja kuinka voit tarkastella verkkosivun lähdekoodia.
Kehittäjävaihtoehtojen käyttäminen Safarissa
- Avaa Safari-selain.
- Valitse
näytön vasemmassa yläkulmassa olevasta valikkopalkista. - Valitse näkyviin tulevasta avattavasta valikosta Asetukset.
- Napsauta Lisäasetukset-välilehteä ja valitse Näytä kehitysvalikko valikkorivillä -kohdan vieressä oleva valintaruutu.
- Sinun pitäisi nyt nähdä Kehitys-valitsin Apple-valikkopalkissa näytön yläosassa.
Lähdekoodin katselu
Sinulla on oltava kehittäjäasetukset käytössä, jotta seuraavat vaiheet toimivat.
Menetelmä yksi
- Avaa Safari ja siirry verkkosivulle, jonka lähdekoodia haluat tarkastella.
- Napsauta näytön yläreunan Apple-valikkopalkissa Kehitys-valitsinta ja valitse avattavasta valikosta Näytä sivun lähde.
- Napsauta näytön keskellä Elementit-välilehteä kehittäjätyökalujen osion yläosassa.
Menetelmä 2
Napsauta Web-sivun tyhjää osaa hiiren kakkospainikkeella ja valitse näkyviin tulevasta ponnahdusvalikosta Näytä sivun lähde.
Kun kehittäjäasetukset on otettu käyttöön, voit myös painaa Komento+optio+U tarkastellaksesi sivun lähdekoodia.
Ooppera
Voit tarkastella verkkosivun lähdekoodia Operassa jollakin seuraavista tavoista.
Näytä vain lähdekoodi
Menetelmä yksi
Jos haluat tarkastella vain lähdekoodia, paina tietokoneen näppäimistön Ctrl+U.
Menetelmä kaksi
Napsauta Web-sivun tyhjää osaa hiiren kakkospainikkeella ja valitse esiin tulevasta ponnahdusvalikosta Sivun lähde.
Näytä sivun lähde elementeillä
- Avaa Opera ja siirry verkkosivulle, jonka lähdekoodia haluat tarkastella.
- Napsauta Operaa
-kuvaketta selainikkunan vasemmassa yläkulmassa. - Siirrä hiiren osoitin avattavassa valikossa Developerin päälle ja valitse laajennetusta valikosta Kehittäjätyökalut.
- Napsauta Elementit-välilehteä näytön oikeaan reunaan ilmestyvän ikkunan yläosassa.
Jos Kehittäjä-alivalikkoa ei näy, valitse Lisää työkaluja → Näytä kehittäjävalikko. Napsauta sitten valikkopainiketta uudelleen. Sinun pitäisi nyt nähdä Developer-merkintä luettelossa.
Operassa F12- tai Ctrl+Shift+I-näppäinten painaminen tuo myös esiin interaktiivisen kehittäjätyökalun. Tämä työkalu tarjoaa vuorovaikutuksen lähdekoodin ja CSS-asetusten kanssa, jolloin käyttäjät voivat nähdä, kuinka koodin muutokset vaikuttavat verkkosivuun reaaliajassa.
Android-puhelin tai -tabletti Chromella
- Avaa Google Chrome -selain Android-puhelimella tai -tabletilla.
- Avaa verkkosivu, jonka lähdekoodia haluat tarkastella.
- Napauta kerran osoitepalkissa ja siirrä kohdistin URL-osoitteen eteen.
- Kirjoita view-source: ja napauta Enter tai Siirry.
Jos esimerkiksi haluat nähdä kotisivumme koodin, kirjoitat view-source:https://www.computerhope.com
Jos yllä olevat vaiheet eivät toimi Android-puhelimellasi, käytä iPhonen tai iPadin Safaria-osiossa olevaa menetelmää. Sama koodi toimii Android-puhelimissa, ainoat erot ovat Chromen käyttö Safarin sijaan sekä kirjanmerkin luonti- ja muokkausprosessi.
Jos sinun on vaikea navigoida lähdekoodissa mobiililaitteellasi yllä olevalla menetelmällä, sinun kannattaa harkita myös verkkotyökalua.
iPhone tai iPad Safarilla
Web-sivun lähdekoodin katseleminen iPhonella tai iPadilla vaatii hieman enemmän työtä, mutta se on mahdollista. Prosessi edellyttää, että luot kirjanmerkin, määrität siihen JavaScript-koodin ja käytät verkkosivun kirjanmerkkiä sen lähdekoodin tarkastelemiseen.
Jos haluat mieluummin käyttää sovellusta verkkosivun lähdekoodin katseluun, voit ladata ilmaisen Näytä lähdekoodi -sovelluksen iOS App Storesta.
Luo kirjanmerkki nähdäksesi lähdekoodin
- Avaa Safari-selain iPhonessa tai iPadissa.
- Käytä mitä tahansa verkkosivua, kuten www.computerhope.com.
- Napauta Lisää-kuvaketta näytön alareunassa.
Voit myös pitää sormeasi painettuna kirjanmerkkikuvakkeessa näytön alareunassa, kunnes valikko tulee näkyviin.
- Napauta avautuvassa valikossa Lisää kirjanmerkki -vaihtoehtoa.
- Napauta kirjanmerkin nimikenttää, napauta x oikealla puolella poistaaksesi nykyisen nimen ja kirjoita "Näytä verkkosivun lähdekoodi" uudeksi nimeksi.
- Tallenna kirjanmerkki napauttamalla Tallenna oikeassa yläkulmassa.
- Kopioi koko JavaScript-koodinpätkä alla.
javascript:(function(){var a=window.open('about:blank').document;a.write('Source code of '+location.href);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))})();
- Safarissa pääset kirjanmerkkeihin napauttamalla kirjanmerkkikuvaketta näytön alareunassa.
- Etsi yllä luomasi kirjanmerkki ja paina ja pidä sormeasi kirjanmerkillä, kunnes valikko avautuu näytön alareunaan.
- Napauta Muokkaa-vaihtoehtoa valikosta.
- Napauta Muokkaa kirjanmerkkiä -näytössä URL-osoitetta ja napauta sitten x-merkkiä tyhjentääksesi URL-osoitteen. Liitä sitten JavaScript-koodi vaiheesta 7 URL-kenttään.
- Tallenna kirjanmerkkien muutokset napauttamalla Valmis näytön oikeasta alakulmasta.
Käytä kirjanmerkkiä tarkastellaksesi lähdekoodia
Kun olet luonut yllä olevan kirjanmerkin, voit nyt tarkastella verkkosivun lähdekoodia.
- Siirry Safarissa verkkosivulle, jolla haluat tarkastella lähdekoodia.
- Napauta kirjanmerkkikuvaketta näytön alareunassa.
- Napauta luomaasi Näytä verkkosivun lähdekoodin kirjanmerkkiä.
Uusi Safari-selausvälilehti avautuu, ja siinä näkyy verkkosivun lähdekoodi.
Jos sinulla on vaikeuksia navigoida lähdekoodissa mobiililaitteellasi käyttämällä yllä olevaa menetelmää, voit myös harkita online-työkalun käyttöä.
Lähdekoodisivun tai työkalun sulkeminen
Kun olet katsellut verkkosivun lähdekoodia, voit halutessasi poistua tai sulkea sen. Lähdekoodin sulkeminen riippuu menetelmästä, jolla olet avannut sen.
- Jos olet käyttänyt Ctrl+U-menetelmää (paitsi Edgeä) tai hiiren kakkospainikkeella, sulje selainikkunan yläreunassa avautunut uusi välilehti.
- Jos olet käyttänyt kehittäjämenetelmää (käyttämällä F12:ta tai Ctrl+Shift+I), paina samoja näppäimiä uudelleen tai napsauta
-kuvaketta työkaluikkunan oikeassa yläkulmassa.
Käytä online-työkalua tarkastellaksesi lähdekoodia
Selaimen käytön lisäksi on olemassa useita online-työkaluja, joiden avulla voit tarkastella minkä tahansa verkkosivun lähdekoodia. Nämä työkalut voivat olla hyödyllisiä, koska useimmat voivat muotoilla, tyylitellä ja korostaa koodia helpottaakseen sen lukemista. Alla on lyhyt luettelo joistakin näistä työkaluista:
- Näytä sivun lähdekoodi
- Code Beautify lähdekoodin katseluohjelma
- HTML-katseluohjelma
