Web-sivun HTML-lähdekoodin katselu

Kaikki Internet-selaimet antavat käyttäjille mahdollisuuden tarkastella minkä tahansa vierailemansa web-sivun HTML-lähdekoodia. Seuraavissa osissa on tietoja useista tavoista tarkastella lähdekoodia kussakin tärkeimmässä selaimessa. Voit jatkaa valitsemalla alla olevan luettelon merkinnän ja noudattamalla kyseisen osion ohjeita.

Kun tarkastelet verkkosivun lähdekoodia, on tärkeää, että pidät mielessä, että tiedot ja koodi, joita palvelin ei käsittele, eivät näy. Esimerkiksi lähes kaikki Internet-hakukoneet käsittelevät tietoja palvelimella ja näyttävät sitten tulokset verkkosivulla. Toisin sanoen voit tarkastella hakutulossivun muodostavaa koodia, mutta et voi tarkastella hakukoneen lähdekoodia.

Tämä sääntö koskee kaikkia palvelinpuolen komentosarjoja, SSI: tä ja ohjelmakoodia. Siksi toiminnot, kuten hakukoneet, foorumit, äänestykset, chat jne., Eivät näy niiden koodia. Tietojen kopiointi lähdekoodista voi aiheuttaa virheitä tai ohjata sinut takaisin sivulle, josta tiedot kopioitiin.

Microsoft Edgen käyttäjät

Voit tarkastella Microsoft Edgen web-sivun lähdekoodia seuraavasti.

  1. Paina Ctrl + U tai F12 tietokoneen näppäimistössä.
  2. Valitse oikean ikkunan yläosassa Elements- välilehti.

Tai

Tai

  1. Avaa Microsoft Edge ja siirry valitsemallesi verkkosivulle.
  2. Valitse Lisää

    kuvaketta näytön oikeassa yläkulmassa.
  3. Valitse avautuvasta avattavasta valikosta Developer Tools .
  4. Valitse oikean ikkunan yläosassa Elements- välilehti.

Vihje: Microsoft Edgen DOM-työkalu tarjoaa myös vuorovaikutuksen lähdekoodin ja CSS-asetusten kanssa, jolloin käyttäjät voivat nähdä, miten koodin muutokset vaikuttavat verkkosivuun välittömästi.

Microsoft Internet Explorerin käyttäjät

Voit tarkastella Web-sivun lähdekoodia Microsoft Internet Explorerissa seuraavasti.

  1. Paina Ctrl + U tai F12 tietokoneen näppäimistössä.
  2. Napsauta Debugger- välilehteä uuden valikon yläreunassa.

Tai

Tai

  1. Avaa Internet Explorer ja siirry valitsemallesi verkkosivulle.
  2. Tuo Alt- näppäin esiin selaimen valikkorivillä.
  3. Valitse Näytä ja sitten Lähde avattavasta valikosta.
  4. Napsauta Debugger- välilehteä uuden valikon yläreunassa.

Vihje: Internet Explorerin uusimmissa versioissa F12-näppäimen painaminen tuo esiin DOM-työkalun. Tämä työkalu tarjoaa paljon enemmän vuorovaikutusta lähdekoodin ja CSS-asetusten kanssa, jolloin käyttäjät voivat nähdä, miten koodin muutokset vaikuttavat verkkosivuun välittömästi.

Mozilla Firefox ja Netscape -käyttäjät

Voit tarkastella Web-sivun lähdekoodia Mozilla Firefoxissa seuraavasti.

  1. Paina tietokoneen näppäimistön Ctrl + U-näppäintä .

Tai

Tai

  1. Avaa Mozilla Firefox ja siirry valitsemallesi verkkosivulle.
  2. Tuo Alt- näppäin esiin selaimen valikkorivillä.
  3. Valitse Työkalut, Web-kehittäjä ja sitten Sivun lähde .

Vinkki: Firefoxin uusimpien versioiden avulla F12-näppäimen tai Ctrl + Shift + I: n painaminen tuo esiin vuorovaikutteisen kehitystyökalun. Tämä työkalu tarjoaa paljon enemmän vuorovaikutusta lähdekoodin ja CSS-asetusten kanssa, jolloin käyttäjät voivat nähdä, miten koodin muutokset vaikuttavat verkkosivuun välittömästi.

Näytä osa sivun lähdekoodista

  1. Korosta sen Web-sivun osa, jolle haluat tarkastella lähdekoodia.
  2. Napsauta hiiren kakkospainikkeella korostettua osaa ja valitse sitten Näytä valintalähde .

Vihje: Käytä Firebug-apuohjelmaa sivun lähdekoodin tarkastelemiseen, mutta muuttamalla ja tarkastelemalla näitä muutoksia selaimen kautta.

Google Chrome -käyttäjät

Voit tarkastella Google Chromen Web-sivun lähdekoodia seuraavasti.

  1. Paina tietokoneen näppäimistön Ctrl + U-näppäintä .

Tai

Tai

  1. Avaa Chrome ja selaa haluamallasi verkkosivulla.
  2. Napsauta Mukauta ja hallitse Google Chromea

    kuvaketta selainikkunan oikeassa yläkulmassa.
  3. Valitse avattavasta valikosta Lisää työkaluja ja sitten kehitystyökalut .
  4. Napsauta Elementit- välilehteä näkyvän uuden osan yläosassa.

Vihje: Chromeen uusimpien versioiden painaminen F12- tai Ctrl + Shift + I -näppäimellä tuo esiin myös vuorovaikutteisen kehitystyökalun. Tämä työkalu tarjoaa paljon enemmän vuorovaikutusta lähdekoodin ja CSS-asetusten kanssa, jolloin käyttäjät voivat nähdä, miten koodin muutokset vaikuttavat verkkosivuun välittömästi.

Apple Safarin käyttäjät

Voit tarkastella Applen Safarissa olevan Web-sivun lähdekoodia seuraavasti.

  1. Paina näppäimistön Command + Option + U -painiketta.

Tai

Tai

  1. Avaa Safari-selain ja siirry valitsemallesi verkkosivulle.
  2. Valitse Kehitä- valikko.
  3. Valitse Näytä sivulähde -vaihtoehto.

Opera-käyttäjät

Voit tarkastella Opera-sivun lähdekoodia seuraavien ohjeiden mukaisesti.

  1. Paina näppäimistön Ctrl + U-näppäintä .

Tai

Tai

  1. Avaa Opera ja siirry valitsemallesi verkkosivulle.
  2. Napsauta Valikko-painiketta

    selaimen ikkunan vasemmassa yläkulmassa.
  3. Valitse kehittäjän alivalikosta Sivun lähde .

Vihje: Jos et näe kehittäjän alivalikkoa, valitse Lisää työkalutNäytä kehittäjävalikko . Napsauta sitten valikkopainiketta

uudelleen. Näet nyt kehittäjän alivalikon.

Vihje: Opera-ohjelman uusimpien versioiden avulla Ctrl + Shift + I -näppäinyhdistelmä avaa vuorovaikutteisen kehitystyökalun. Tämä työkalu tarjoaa paljon enemmän vuorovaikutusta lähdekoodin ja CSS-asetusten kanssa, jolloin käyttäjät voivat nähdä, miten koodin muutokset vaikuttavat verkkosivuun välittömästi.

Android-puhelin, jossa on Chrome

  1. Avaa puhelimesi Google Chromen Internet-selain.
  2. Avaa Web-sivu, jonka lähdekoodia haluat tarkastella.
  3. Napauta kerran osoiterivillä ja siirrä kohdistin URL-osoitteen etuosaan.
  4. Kirjoita View-source: ja paina Enter tai Go .

Vihje: Jos haluat esimerkiksi nähdä kotisivumme koodin, kirjoitat näkymän lähde: //www.computerhope.com

Lähdekoodisivun tai työkalun sulkeminen

Kun olet suorittanut lähdekoodin tarkastelun verkkosivulla, voit halutessasi lopettaa sen tai sulkea sen. Lähdekoodin sulkeminen riippuu siitä, miten olet avannut sen.

  • Jos olet käyttänyt Ctrl + U -menetelmää (paitsi Edge) tai hiiren kakkospainikkeella, sulje selainikkunan yläosassa avattu uusi välilehti .
  • Jos olet käyttänyt kehittäjämenetelmää (paina F12 tai Ctrl + Shift + I), napsauta

    työkalujen ikkunan oikeassa yläkulmassa.