Avaa sivukoodi Googlessa näppäimillä. Sivukoodin vaihtaminen Google Chromessa

Ctrl+U

Kuinka voin tarkastella elementin lähdekoodia?

Napsauta hiiren kakkospainikkeella kiinnostavaa sivuelementtiä.

Google Chrome: "Näytä elementtikoodi"

Ooppera: "Tarkastele elementtiä"

FireFox: "Analysoi elementti"

Etsi muissa selaimissa valikkokohtaa, jolla on samanlainen merkitys.

Hei kaikki!

Esitin koko asian erityisesti artikkelin alussa niille, jotka etsivät nopeaa vastausta.

Tieto saattaa olla monien tiedossa, mutta koska kirjoitan aloitteleville bloggaajille, web-ohjelmoijille ja muille etsijöille, tämä viiteartikkeli on pakollinen.

Tulevaisuudessa opit ehdottomasti sivujen ja yksittäisten elementtien lähdekoodia.

Katsotaanpa konkreettista esimerkkiä siitä, kuinka voit käyttää sivun lähdekoodin katselua.

Haluamme esimerkiksi nähdä, mitä avainsanoja käytetään tietyllä sivulla. Menemme kiinnostavalle verkkosivulle ja painamme Ctrl+U. Tämän sivun lähdekoodi avautuu erilliseen ikkunaan tai erilliseen välilehteen. Paina Ctrl+F etsiäksesi koodinpätkän. Tässä tapauksessa kirjoitamme sanan " avainsanat". Sinut ohjataan automaattisesti koodinpätkään tällä sisällönkuvauskentällä ja haettu sana korostetaan.

Analogisesti voit etsiä ja tutkia muita koodinpätkiä.

Sivun koko lähdekoodin katsominen ei useimmissa tapauksissa ole kovin kätevää, joten kaikissa selaimissa on mahdollista tarkastella yksittäisen elementin tai fragmentin koodia.

Käytetään tiettyä esimerkkiä elementin koodin tarkastelusta. Katsotaan esimerkiksi, onko linkillä nofollow-attribuutti. Napsauta hiiren kakkospainikkeella meitä kiinnostavaa linkkiä ja napsauta kohdetta avattavassa pikavalikosta "Näytä elementtikoodi" tai vastaava (riippuen selaimesta). Alla erityisessä koodianalyysin ikkunassa saamme jotain samanlaista.

Näemme, että linkkikoodi sisältää rel=”nofollow” . Tämä tarkoittaa, että PR ei "vuota" tämän linkin kautta. Puhumme tästä tarkemmin seuraavissa artikkeleissa. Nyt on tärkeää, että tiedät nyt kuinka tarkastella sivun lähdekoodia ja yksittäisen elementin lähdekoodia.

Pitkään aikaa "näytä sivun lähde" ​​-vaihtoehto oli minulle hyödytön ja epäkiinnostava. Toistaiseksi HTML:n oppiminen Codecademyssa ja omien verkkosivujeni suunnittelu ei ole kasvanut uudeksi harrastukseksi. Tästä heräsi kysymys: mistä löytää todellisia tapauksia ja lainata mielenkiintoisia ratkaisuja "säästöpossuasi"? Vastaus oli yllättävän yksinkertainen, kuten kaikki nerokkaat asiat: katso sivun lähdekoodia Google Chromessa! Jaan teidän kanssanne vaatimattomat löytöni.

Mikä on sivun lähdekoodi

Jos sinä, kuten minä, olet vasta ottamassa ensimmäisiä askeleitasi HTML-ohjelmoinnissa, olisi hyvä idea selvittää, mikä sivun lähdekoodi on.

Lähdekoodi, joka tunnetaan myös nimellä HTML-sivukoodi, on tekstiä Hyper Text Markup Language (HTML) -kielellä. Se sisältää todellisen sivun sisällön (teksti, taulukot) ja tunnisteet. Jälkimmäiset toimivat ohjeina selaimelle: miten sisältö näytetään, minkä tyyppistä muotoilua käytetään, mihin hyperlinkki tai mediatiedosto lisätään. No, meille, aloitteleville ohjelmoijille, lähdekoodi on paras harjoituskenttä: löydämme mielenkiintoisen sivuston ja vakoilemme sitä, tallennamme sen ja käytämme onnistuneita fragmentteja. Miten?

Kuinka tarkastella lähdekoodia Google Chrome -selainsivulla

Etsi sivu, josta pidät. Olin esimerkiksi kiinnostunut sivustovalikon suunnittelusta. On kolme tapaa avata lähdekoodi Google Chrome -selaimessa:

1. Napsauta kuvaketta valikosta selaimen oikeassa yläkulmassa ja valitse "Lisää työkaluja". Muiden joukossa on vaihtoehto "Näytä lähdekoodi". Suoraan sanottuna käytän tätä menetelmää harvoin: tarpeettomia liikkeitä on paljon. Se voidaan tehdä vielä yksinkertaisemmiksi.
2. Paina näppäinyhdistelmää Ctrl+U– uusi ikkuna lähdekoodilla avautuu;
3. Kontekstivalikon faneille: napsauta sivua hiiren kakkospainikkeella ja valitse "Näytä sivun koodi" -vaihtoehto.

Selvisimme tehtävästä tarkastella sivun HTML-koodia selaimessa. Siirrytään mielenkiintoisimpaan vaiheeseen.

Kuinka muokata ja tallentaa lähdekoodia

Jotta voit oppia luomaan verkkosivustoja, ei riitä, että luet jonkun toisen HTML-koodia. Sinun täytyy leikkiä sillä, kokeilla, tehdä muutoksia ja tarkistaa tulos. Voit jopa aloittaa kokoamalla muutaman onnistuneen näytteen. Kuinka muokata ja tallentaa lähdekoodia?

Vaihtoehto 1. "Manuaalisesti"

Kun olemme avannut sivun lähdekoodin, avaa kontekstivalikko ja valitse "Tallenna nimellä" -vaihtoehto ja tallenna tiedosto kiintolevyllesi. Muokkaamme tiedostoa Notepadissa tai Notepadissa, tallennamme muutokset ja avaamme sen selaimen kautta. Muutostemme tulokset (onnistuneet ja vähemmän onnistuneet) näkyvät selainikkunassa.

Vaihtoehto 2. Ammattilaisille

Kun "pelataan" lähdekoodilla joka päivä, "tallenna - avaa - muuta - tallenna - tarkista" -prosessista tulee väsyttävä. Löysin itselleni ratkaisun asentamalla Google Chromen laajennuksen - Firebug Lite. Sen avulla voit muokata ja tallentaa lähdekoodia poistumatta selainikkunasta.

Selainten kehittäjät ovat huolehtineet samoissa selaimissa avautuvia sivustoja luovien eli verkkovastaavien mukavuudesta. He ovat lisänneet vakioominaisuuksiin kehittäjätyökaluja, joilla voit helposti avata ja tarkastella sivuston sivun lähdekoodia selaimessa: HTML, CSS, JavaScript (JS), hankkia erilaisia ​​hyödyllisiä tietoja sivuston rakenteesta, suorittaa sen tekninen analyysi. Yleensä näet paljon hyödyllisiä asioita.

Tietenkin näitä työkaluja eivät käytä vain sivuston luojat työhön, vaan myös tavalliset käyttäjät, joille lähdekoodin avulla he voivat tarkastella erilaisia ​​hyödyllisiä tietoja.

Tästä artikkelista opit kuinka tarkastella verkkosivuston sivun lähdekoodia selaimessa (miten avataan verkkosivuston HTML-, CSS- tai JavaScript-koodi).

Sivun lähdekoodin avaaminen selaimessa

On kaksi tapaa avata verkkosivun lähdekoodi selaimessa:

1. Pikanäppäinten käyttö;
2. Avaa pikavalikosta.

Ctrl+U– pikanäppäinyhdistelmä, joka näyttää koko sivuston sivun lähdekoodin erillisessä uudessa ikkunassa. Vakiona kaikille selaimille: Google Chrome, Opera, Mozilla Firefox, Yandex-selain, IE.

Voit myös syöttää kehittäjätyökalut seuraavasti:

Löytääksesi nopeasti halutun koodin, sanan tai tekstin sivulta, voit käyttää vakiohaun pikanäppäinyhdistelmää kaikille selaimille: Ctrl + G.

Video-ohje:

Näytä elementtikoodi | tutkia elementtiä | tarkastele elementtiä

Jos yhtäkkiä sinun ei tarvitse tarkastella koko lähdekoodia, vaan näyttää vain erillinen osa siitä, jokin sivun alue, edellinen työkalu ei toimi. Tätä tarkoitusta varten kehittäjätyökaluilla on toinen toiminto, jota käsitellään alla.

Sivun elementin koodin tarkasteleminen:

Voit myös käyttää pikanäppäimiä päästäksesi nopeasti elementtien tarkastukseen.

Pikanäppäimet (painikkeet):

Google Chrome: Ctrl+Shift+I ja Ctrl+Shift+C

Opera: Ctrl+Shift+I ja Ctrl+Shift+C

Mozilla Firefox: Ctrl+Shift+I ja Ctrl+Shift+C

Yandex-selain: Ctrl+Shift+I ja Ctrl+Shift+C

Näiden vaiheiden jälkeen verkkosivun lähdekoodi avautuu samaan selainikkunaan:

Kaikki HTML-koodi on suuressa vasemmassa sarakkeessa. Ja CSS-tyylit ovat oikealla.

Tämän menetelmän etuna on tietysti se, että käyttäjällä on mahdollisuus muuttaa lähdekoodia ja muokata tyylejä. Toisin sanoen voit muokata sivuston tyylejä ja nähdä, miltä se näyttää tietyillä tyyleillä ilman, että sinun tarvitsee välittömästi tehdä muutoksia isännöintipalvelimilla oleviin tiedostoihin. Voit muuttaa tai lisätä ohjelmakoodia kaksoisnapsauttamalla haluttua fragmenttia tai aluetta. Selaimen koodin korjausta ei tietenkään tehdä isännöintipalvelimilla. Siksi tulevaisuudessa sinun on joka tapauksessa kopioitava tämä koodi ja kirjoitettava se tiedostoihin.

Tässä video-ohjeessa kuvataan yksityiskohtaisesti ja näytetään, kuinka kehittäjätyökaluja käytetään:

Juuri näin, vain verkossa, suoraan selaimessasi, voit tarkastella sivuston sivun lähdekoodia, saada perustiedot HTML- ja CSS-koodista, muuttaa ja kopioida niitä ilman, että sinun tarvitsee ladata tämän sivuston tiedostoja tietokoneellesi. .

Muuten, kokemattomat Internetin käyttäjät, jotka ovat vaihtaneet sivukoodin ja odottavat sen tallentamista, ovat pettyneitä. Loppujen lopuksi sivun päivityksen jälkeen kaikki muutokset katoavat. Tämä ei riitä sivuston hakkerointiin :)

Kuinka tarkastella lähdekoodia Android-puhelimessa

Haluaisin myös huomauttaa, että kehittäjätyökalut ovat saatavilla paitsi selainten työpöytäversioissa, eli tietokoneissa ja kannettavissa tietokoneissa. Puhelimella ja tabletilla (Android, iOS) voit myös tarkastella lähdekoodia.

Voit tehdä tämän lisäämällä näkymän lähdekoodin etuliite tarkastettavan sivun URL-osoitteeseen:

Esimerkiksi:

katselulähde: https://site/turbo-rezhim-opera/

Selailemalla lukemattomia Internetin sivustoja, voit löytää sellaisia, joista todella pidämme. Välittömästi herää useita kysymyksiä. Onko sivusto tehty kotitekoisella koodilla vai jollain CMS:llä? Mitä CSS-tyylejä siinä on? Mitkä ovat sen sisällönkuvauskentät? Ja niin edelleen.

On olemassa monia työkaluja, joiden avulla voidaan poimia tietoja verkkosivuston sivun koodista. Mutta meillä on aina hiiren oikea painike käsillä. Käytämme tätä esimerkkinä sivustoni.

Kuinka nähdä sivun koodi?

Nähdäksesi sivuston sivun lähdekoodin, sinun on vietävä hiiren osoitin web-sivun minkä tahansa alueen päälle (kuvia ja linkkejä lukuun ottamatta). Napsauta tämän jälkeen hiiren oikeaa painiketta. Edessämme avautuu ikkuna, jossa on useita vaihtoehtoja (ne voivat vaihdella hieman eri selaimissa). Esimerkiksi Google Chrome -selaimessa seuraavat komennot:

• takaisin;
• eteenpäin;
• käynnistää uudelleen;
• Tallenna nimellä;
• tiiviste;
• kääntää venäjäksi;
• katso sivun koodi;
• katso koodi.

Meidän täytyy klikata katso sivun koodi, ja sivuston sivun html-koodi avautuu edessämme.

Sivukoodin tarkastelu: mihin kannattaa kiinnittää huomiota?

Html-sivun koodi on siis numeroitu luettelo riveistä, joista jokainen sisältää tietoa tämän sivuston luomisesta. Jotta voit nopeasti oppia ymmärtämään tämän valtavan määrän merkkejä ja erikoissymboleja, sinun on tehtävä ero koodin eri osien välillä.

Esimerkiksi head-tunnisteen sisällä olevat koodirivit sisältävät tietoa hakukoneille ja verkkovastaaville. Niitä ei näytetä sivustolla. Täältä näet, millä avainsanoilla tätä sivua mainostetaan, miten sen otsikko ja kuvaus on kirjoitettu. Täältä löydät myös linkin, jota seuraamalla opimme sivustolla käytetystä Google-fonttiperheestä.

Jos sivusto on tehty CMS WordPressillä tai Joomlalla, niin tämä näkyy myös täällä. Tämä alue näyttää esimerkiksi tietoja WordPress-teemasta tai Joomla-sivustomallista. Näet sen lukemalla sinisellä korostettujen linkkien sisällön. Yksi linkki näyttää verkkosivustomallin.

Esimerkiksi:

//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3

Näemme sivun CSS-kirjasintyylit. Tässä tapauksessa käytetään fonttia. Tämä näkyy täältä - font-family: 'Source Sans Pro'.

Tämä sivusto on optimoitu Yoast SEO -laajennuksella. Tämä näkyy tästä koodin kommentoidusta osasta:

Tämä sivusto on optimoitu Yoast SEO -laajennuksella v3.4.2 - https://yoast.com/wordpress/plugins/seo/

Selain näyttää kaikki body-tunnisteen sisältämät tiedot näytön näytöllä. Täällä näemme sivun html-koodin, ja aivan alareunassa on Yandex Metrics -skriptikoodi. Sitä ympäröi kommentoitu tagi, jossa on teksti:

/Yandex.Metrika laskuri

Tehdään se yhteenveto

Suoritettuamme melko pinnallisen analyysin sivuston pääsivun koodista, voimme tehdä johtopäätöksen siitä, millä työkaluilla tämä sivu on tehty. Näimme siinä:

• CMS WordPress;
• Google font Source Sans Pro;
• WordPress-teema – Sydney;
• Yoast-laajennukset;
• Yandex-mittarin laskuri.

Nyt verkkosivun html-koodin analysoinnin periaate on melko selvä. Etsimääsi sivua ei ole ollenkaan tarpeen pitää auki selaimessa. Voit tallentaa sivukoodin tietokoneellesi näppäinyhdistelmillä ctrl+a, ctrl+c, ctrl+v. Liitä se mihin tahansa tekstieditoriin (mieluiten Notepad++) ja tallenna se html-laajennuksella. Näin voit tutkia sitä syvemmälle milloin tahansa ja löytää hyödyllistä tietoa itsellesi.