Kuinka nähdä sivun lähdekoodi. Sivun lähdekoodin tarkasteleminen Google Chromessa

Joidenkin blogin tärkeiden osien koko ja väri – kuten blogin tai postauksen otsikko, more tag ja vastaavat. Etsin tarvittavan koodin manuaalisesti kokeilemalla testialuetta, jonka perusteella artikkeli myöhemmin kirjoitettiin.

Ja hiljattain minun piti vaihtaa linkkien väriä. Seulottuani nippu kirjallisuutta tästä aiheesta tajusin yksinkertaisen asian: jokainen antaa esimerkkejä omista malleistaan, mutta meillä kaikilla on erilaiset mallit ja on hyvä, jos esimerkin koodi on ainakin vähän samanlainen: ilman vinkumista, Löydän sen silti etsimällä - menetelmällä poke.

Numero ei toiminut linkkikoodin kanssa. Kaikki osoittivat täysin eri polkuja. Mietin, onko olemassa yksinkertainen ja tarkka työkalu, kuinka löytää tarvittava html-koodi miltä tahansa verkkosivustolta. Monilla bloggaajilla, vaikka heillä olisi kokemusta, on vaikeuksia tehdä pieniä muutoksia malliin. Tässä ei ole mitään väärää, sillä jokaisella on omat kiinnostuksen kohteet ja tavoitteet verkkosivuston luomisessa.

Jos haluat tehdä pieniä muutoksia malliin, esim. muuttaa otsikoita, artikkeleiden ja osioiden otsikoita, fonttien ja linkkien väriä ja kokoa, Yleensä riittää, että oppii tässä artikkelissa käsitellyn yksinkertaisen periaatteen. Mutta on myös monimutkaisia tapauksia, jotka vaativat joko syvempää html:n ja css:n tutkimista tai asiantuntijan apua.

Eräänä päivänä eräs tuttava pyysi minua etsimään, mistä hänen mallissaan voisi vaihtaa luokkapaneelin väriä. Lähetetty teema testialiverkkotunnukseen. Tämän elementin asetuksia ei tallennettu style.css-tiedostoon, vaan toiseen tiedostoon, joten henkilö ei löytänyt sitä.

Kuinka löytää ja muuttaa sivuston html- ja css-koodia

Jos et pidä pitkistä artikkeleista, tämä on sinua varten artikkelin lopussa opetusvideo, joka kertoo, kuinka voit nähdä verkkosivuston html-koodin Notepad++:lla ja tehdä muutoksia minkä tahansa mallin suunnitteluun käyttämällä esimerkkiä fontin värin vaihtamisesta. Videolla on muitakin blogin käsittelyn hienouksia. Ja niille, jotka ovat lähempänä ja ymmärrettävämpää tekstiä, alla on yksityiskohtainen analyysi aiheesta kuvakaappauksin.
httpv://youtu.be/uIlVvwCt2ho

Termit ja käsitteet

Olisi oikeampaa nimetä artikkeli " Miten löytää css-koodi", mutta päätin käyttää "väärää" nimeä, koska periaatteessa vastaus tähän kysymykseen löytyy html:stä. CSS ja HTML ovat hyvin erilaisia asioita, vaikka ne ovatkin saman järjestelmän kaksi osaa. Internetissä on monia teknisiä artikkeleita, tässä riittää, että ymmärrämme, että:

HTML— vastaa sivuston rakenteesta (mitä seuraa mitä, missä järjestyksessä jne.). Tämä on perusta, jolle sivusto luodaan. Jos vertaamme sitä taloon, tämä on sen ulkoasu, huoneiden järjestely.
CSS— vastaa suunnittelusta (mitkä fontit, koot, värit jne.). Tämä on talon yleinen tyyli ja sen yksittäisten huoneiden tyyli: millainen tapetti tulee olemaan, lamput, verhot, huonekalut. Siksi asiakirja, jossa todetaan css-koodeja, jota kutsutaan "tyylisivuksi"

Ja jos mietit kuinka muuttaa esimerkiksi sivuston otsikon väriä, tekstien fonttikokoa tai sivupalkin otsikoiden väriä, sinun on etsittävä tämä kaikki CSS-tyylisivulta. Tämä on ainoa asia, joka kannattaa ensin ymmärtää, jotta voit tehdä muutoksia koodiin itse.

Tykkään tehdä kompleksista yksinkertaista. Muistan kauan sitten, kun minulla oli ensimmäinen autoni, se oli hyvin vanha, johdot olivat mätä, sulakkeet palavat usein ja joka kerta hinasin sen huoltoasemalle. Kuvittele kuinka paljon rahaa meni hukkaan huolimatta siitä, että sen vaihtaminen itse, kuten käy ilmi, maksaa penniä.

Eräänä päivänä katsoin, mitä mestari tarkalleen tekee. En vieläkään tiedä miten sulake toimii. Mutta tiedän missä sen voi vaihtaa). En korjaa moottoria itse, eikä sulakkeen vaihtaminen ole vaikeaa. Sama juttu nettisivujen kanssa.

Jos et halua tulla ohjelmoijaksi, sinun ei tarvitse olla syvällistä ohjelmoinnin ymmärrystä. On riittävän selkeää ymmärtää, mitä on tarkoitettu mihin, mistä etsiä ja miten sitä muuttaa. On parempi muuttaa itse, mitä voit, ja jättää kaikki muu asiantuntijoille. Artikkelissa on hyödyllinen linkki tästä aiheesta.

Tarvitseeko sinun olla asiantuntija kaikessa?

SEO-blogeissa käydään usein keskusteluja siitä, tarvitseeko aloittelijan syvällinen ymmärrys HTML:stä, tai vielä paremmin, opetella kirjoittamaan itse verkkosivustoja niin, että kaikki on ainutlaatuista. No, en tiedä - jokaiselle omansa, ja tässä mikä on lähempänä ketä on lähempänä. Olen kiinnostunut hieman enemmän, joten opin nyt lisää Vladimirilta. Tämän vuoden marraskuussa Vladimir avasi oman bloginsa. Hänen bloginsa tehtiin yksinkertaisimmalla, ilmaisella mallilla, hän muokkasi sitä vain hieman itselleen sopivaksi.

10 päivän olemassaolon jälkeen blogi sijoittui 104. sijalle kaikkien Runet-sivustojen sijoituksissa, joiden liikenne oli noin 1,5 tuhatta ihmistä päivässä. 10 päivässä. Joten mikä on sopimus? Vladimir tuntee hyvin HTML:n ja voi tilata ja ostaa itselleen ainutlaatuisen mallin. Joten sinun täytyy ymmärtää se Salaisuus ei piile malleissa, vaan tiedon hyödyllisyydessä.

Mihin html-koodi on piilotettu?

Anteeksi poikkeama, palataanpa koodeihimme). Oletetaan, että haluat muuttaa blogisi otsikon fontin väriä. Katsotaanpa esimerkkiä testipaikastani.

Avaa sivusto Google Chrome -selaimella (jos et vielä käytä sitä, asenna se - se on suunniteltu hyvin verkkosivustojen kanssa työskentelemiseen, siinä on paljon sisäänrakennettuja työkaluja).
Siirrämme hiiren osoittimen sen elementin päälle, jota aiomme muuttaa . Tässä tapauksessa - blogin nimi. Napsauta sitä hiiren kakkospainikkeella ja valitse näkyviin tulevassa ikkunassa NÄYTÄ ELEMENTTIKOODI.

TÄRKEÄÄ: älä sekoita tätä SIVUN KOODIN KATSEMISEEN! Emme nyt tarvitse koko sivua, vain erillisen elementin.

Napsauta sitä - koodin katseluikkuna tulee näkyviin selaimen alaosaan:

Muuttamamme koodirivi on korostettu punaisella.

Mutta sinisellä korostettu alue sisältää sen, mitä etsimme. Täältä löydät tarkan (ei likimääräisen) koodirivin, joka vastaa fonteista, väristä, koosta, korostuksesta jne. Tällä tavalla voit selvittää minkä tahansa mallin minkä tahansa elementin MIKKI koodin.

Etsi haluamasi rivi sinisellä korostetusta lohkosta. Oikealla on liukusäädin, jota voit selata ja löytää tarvitsemasi rivin.

Yleinen periaate, mistä etsiä asioita:

Fontin nimi - FONT FAMILY -rivillä

Fonttikoko - FONT SIZE -rivillä

Fontin väri - COLOR-rivillä

Tässä on kolme pääriviä, joilla minkä tahansa elementin nimi, koko ja fontin väri muuttuvat. Oikealla tyylin css rivillä on annettu rivin sijainti dokumentissa. Jos haluat muuttaa jotain muuta elementtiä (esimerkiksi sinun on selvitettävä, missä on viiva, jolla voit muuttaa valikkopalkin väriä tai linkkien väriä), kaikki tehdään täsmälleen samalla tavalla.

HUOMIO:

Kopioitava viiva on korostettu punaisella kuvassa,

jotta löydät sen myöhemmin tyylisivulta.

4. Kopioi rivi. Koska tässä esimerkissä haluamme muuttaa sivuston nimen väriä, kopioin toisen kuvan punaisella suorakulmiolla korostetun rivin. Mallissani se vastaa sivuston otsikon värin muuttamisesta:

#header h1 a, #header h1 a:vieraillut (

Etsi haluamasi rivi tiedostosta "style sheet (style.css)". Tämä on jo tehty hallintapaneelissa. Pyydän voimakkaasti, että vaikka luottamusta ja täydellistä ymmärrystä ei ole, kaikki kokeet tulisi suorittaa testialiverkkotunnuksella, jotta .

Joten mene hallintapaneeliin: KONSOLI - ULKOULKO - editori. Oikeasta sivupalkista löydämme tiedoston STYLE TABLE (STYLE.CSS), avaa se.

Avaa nyt hakurivi CTRL + F -näppäimillä: yläikkunaan tulee tyhjä rivi-ikkuna. Liitä siihen rivi, jonka kopioimme vaiheessa 4.

Ja näet kuinka tämä viiva korostetaan tyylisivulla (oranssina kuvassa):

Teemme muutoksen elementtiin. Meidän tapauksessamme muutamme fontin väriä, joten korvaamme COLOR-rivillä toisella arvolla - haluamallamme värillä. Esimerkissä väri on musta, sen merkitys on:

Voit valita värin missä tahansa verkkoväripalettipalvelussa: kirjoita hakukoneeseen "Web color paletti" ja valitse haluamasi. Valitsemme värin, kopioimme sen digitaalisen arvon ja korvaamme sen huolellisesti vanhalla. jonka jälkeen napsautamme PÄIVITYS TIEDOSTO ja menemme katsomaan mitä tapahtui.

Jos muutoksia ei näytetä, kuluneen tunnin aikana ja siirry sivulle uudelleen - tällä kertaa kaiken pitäisi näkyä.

Kuvaaminen vie kauan, mutta käytännössä kaikki tapahtuu nopeasti, varsinkin kun alkutaito ilmaantuu.

Tarkemmin, kuinka muuttaa tiettyjä elementtejä:

Siinä kaikki tältä päivältä, en enää vaivaa sinua koodeilla. Toivon, että nyt voit helposti löytää ja muuttaa minkä tahansa html-koodin tai pikemminkin css-koodin elementin - antakoot asiantuntijat minulle anteeksi sen yksinkertaistamisen. Ja jos et ymmärrä, käy silti sivulla. Älä tuhlaa aikaasi hölynpölyyn.

Suosittelen katsomaan Artem Abramovichin videon siitä, kuinka etsiä ja löytää mitä tahansa sanaa tai elementtiä mistä tahansa teemasta/mallista, mille tahansa koneelle (wordpress, joomla jne.) ja korvata se tarvittavalla:

Jaa, jos pidit:

Saatat myös olla kiinnostunut tietämään:

Jokaisella Internetin käyttäjällä on omat suosikkisivustonsa, joilla hän viettää pitkään. Ja vain laiska ei ajatellut katsoa, kuinka se luotiin ja mistä se koostui. Kaikkiin näihin kysymyksiin on mahdotonta vastata, koska verkkosivuston luomiseen on monia tapoja, mutta sen muodostavien komentojen ja koodien katsominen on mahdollista ja julkisesti kaikkien saatavilla.

Toinen kysymys on, ymmärtääkö henkilö, joka ei ole mukana ohjelmoinnissa, mitään symboleista, jotka muodostavat koodin. Mutta alla olevista esimerkeistä jokainen Google Chromen käyttäjä voi tarkastella yksittäisiä sivustojen elementtejä.

Kuinka tarkastella html-sivun lähdekoodia Google-selaimessa

Jotta voit tarkastella sivun koodia Chromessa, sinun on siirryttävä sinua kiinnostavalle sivustolle ja suoritettava seuraavat vaiheet:

Nämä kaksi kohdetta eroavat toisistaan toiminnallisuudessa ja käyttäjälle, ohjelmoijalle tai hakkereille tarkoitetuissa tiedoissa.

Mitä eroa on sivukoodilla ja pelkällä "Näytä koodi" -komennolla?

Analysoimalla jokaista näistä toiminnoista voit kirjoittaa erillisen artikkelin. Ohjelmoijille tämä ero on merkittävä ja he ymmärtävät, missä tapauksissa on tarpeen käyttää "View Code" ja missä "View Page Code" Google Chrome -selaimessa.

Mutta keskivertokäyttäjälle selitettäväksi nämä toiminnot voidaan jakaa seuraaviin tarkoituksiin:

"Näytä sivukoodi" on tarpeen vain nähdäksesi sivun pääyhdistelmän. Pohjimmiltaan tämä on sivuston rakenne (ilman lisämalleja CSS-tiedostoina ja muita lisäyksiä, jotka jäävät sivuston luojan kansioon). Tämä rakenne ei sovellu oman sivun luomiseen "kopioliitämällä", mutta sen avulla voit nähdä, mitä ohjelmoija tarkalleen teki ja missä järjestyksessä varmistaaksesi, että Google Chrome -selaimen sivustolla on tällainen ulkoinen muotoilu.
"Näytä koodi" näyttää yksityiskohtaisen rakenteen ja korostaa kaikki sivun alueet, joihin tämä vaikuttaa. Jos viet hiiren tietyn luettelokoodin päälle, se korostaa sen sivuston elementin, johon se kuuluu.
Sivukoodin katselu avautuu erillisessä selaimessa ilman, että sitä voi muokata. Eli se soveltuu vain sivustokoodin kopioimiseen ja lukemiseen. Mutta tämä ei ole vähemmän hyödyllinen toiminto.
"Näytä koodi" on vaihdettavissa ja voit muokata mitä tahansa elementtiä sinulle sopivalla tavalla. Tietenkin kaikki nämä muutokset "elävät", kunnes sivu päivitetään, mutta joskus on hauskaa käydä läpi nämä asetukset ja ymmärtää, miksi tätä tai toista arvoa tarvitaan ja mitä tapahtuu, jos muutat sitä. Sinun ei pitäisi olettaa, että tällaisilla toimilla vahingoitat itseäsi tai sivustoa - nämä muutokset vaikuttavat vain Google Chromesi koodiin, eivätkä ne mene verkkoon.

Harkitsemme kysymystä elementtikoodin tarkastelusta

Jos meidän pitäisi vastata tällaiseen kysymykseen, ainoa vaihtoehto, joka ehdottaa itseään, on esimerkki. Koska yhdessä artikkelissa on erittäin vaikeaa tulla henkilöksi, joka ymmärtää tämän aiheen (verkkokehittäjä), mutta näyttää esimerkillä niin, että kysymys on ratkaistu, on paljon helpompaa.

Elementtikoodin toiminnallisuus on erittäin laaja, joten otamme yhden Google Chrome -selainsivuston sanoista. Halusimme pohtia, mitä avainsanoja (koodissa se kirjoitetaan "avainsanoiksi") käytettiin sivustollamme. Tätä varten suoritamme seuraavan algoritmin:

Muita tapoja käyttää tätä ominaisuutta Google Chrome -selaimessa

Yleisesti ottaen jatkamalla vastaamista kysymykseen siitä, kuinka tarkastella elementin koodia ja miksi sitä tarvitaan, sinun tulee luetella sen toiminnot. Nimittäin, koska voimme tarkastella minkä tahansa sivuston elementin koodia Google Chrome -selaimessa, voimme:

Katso sivuston rakenne alkaen otsikosta ("sivuston otsikko") ja päättyen loppuun (kaiken ohjelman viimeinen komento);
Tarkastele kaikkia sivuston toimintoja, nimittäin: linkkejä muille sivustoille, lisämoduuleja ulkoisista sivustoista ja sisäänrakennettujen laskurien olemassaoloa erilaisten tietojen keräämiseen;
Selvitä, onko sivustolta kopioiminen kiellettyä vai ei;
Koodi tallentaa kaikki linkit sivuston muille sivuille sekä niiden suunnittelun ja myöhemmät toimet niiden napsautuksen jälkeen.

Tämä ei suinkaan ole lopullinen lista. Mutta on muistettava, että ilman erityistietoa on melkein mahdotonta "lukea" Google Chrome -sivun koodia ja tavallinen käyttäjä ei käytännössä tarvitse vastaanotettuja tietoja.

Kohde "Näytä elementtikoodi" ei toimi

On sanottava heti, että jokaisella sivustolla on avoin pääsy elementtikoodeihin. Toisin sanoen jopa suosituimmat ja kalleimmat sivustot ovat avoimia koodinsa katselemiseen. Siksi, jos Google Chrome -selaimen kohde ei ole aktiivinen tai tuottaa virheen, sillä on seuraavat mahdolliset syyt:

Käyttäjäprofiili on vioittunut;
Haittaohjelmien esiintyminen tietokoneessa;
Estäminen tietyllä laajennuksella suorituskyvyn lisäämiseksi (jopa näin voi tapahtua).

Viallisen käyttäjäprofiilin korjaaminen

Jos haluat luoda uuden profiilin, sinun on poistettava vanha tietokoneeltasi. Teemme tämän seuraavasti:

Sulje Google Chrome ja käynnistä sisäänrakennettu Windows Explorer -selain.
Kirjoita seuraava komento osoitepalkkiin: %LOCALAPPDATA%\Google\Chrome\User Data\.
Kun hakemisto avautuu, etsi "Default"-kansio ja lisää "Backup" sen nimeen, jotta saat seuraavan: "Varmuuskopion oletus".
Nyt Chrome-selaimen uudelleenkäynnistyksen jälkeen luodaan uusi profiili.

Poistamme haittaohjelmat tai niiden jäännökset

Jos uusi profiili ei anna meille pääsyä sivuelementtikoodiin ja näemme silti virheen, meidän tulee toimia seuraavasti:

Avaa Windowsin komentorivi ("Suorita") ja kirjoita "cmd" komento sinne.
Kirjoita seuraava komento riville: RD /S /Q “%WinDir%\System32\GroupPolicyUsers”.
Kun olet vahvistanut toimenpiteen, kirjoita tämä: RD /S /Q “%WinDir%\System32\GroupPolicy”.
Nyt “gpupdate /force” (ilman lainausmerkkejä).

Jos kaikki tehtiin oikein, tietokoneen uudelleenkäynnistyksen jälkeen Google Chrome avaa elementtien koodin ja selain toimii normaalisti.

Joten tänään tarkastelemme useita hyödyllisiä työkaluja web-mastereille, jotka helpottavat elämää verkkosivuston suunnittelussa. Aloitetaan Google Chromen verkkovastaavan konsolista. Ja käydään läpi kysymykset, joita verkkovastaavalle useimmiten herää verkkosivuston asettelun aikana.

Pääset konsoliin avaamalla verkkosivustosi Google Chromessa, napsauttamalla hiiren kakkospainikkeella mitä tahansa verkkosivun kohtaa ja valitsemalla kontekstivalikosta "Näytä sivun koodi" tai valitsemalla "Näytä koodi" tietyn tutkittavan elementin kohdalla. elementti".

Yläreunassa on useita välilehtiä. Tänään puhumme "Elementit"-välilehdestä , joka esittelee web-sivun elementit tunnisteiden korostuksella, ominaisuuksilla, elementtien sisäkkäisyyden korostamalla, elementin hierarkian esityksen DOM-puussa (vihje alareunassa juuren emosta nykyiseen), kyky elementtien muokkaamiseen, niiden ominaisuuksien luetteloon, harkitse elementtien mukaan etsimistä sekä tutustutaan elementteihin liittyvien css-tyylien jne. katseluun.

Kuinka voin tarkastella kaikkia tyylejä, jotka liittyvät tiettyyn elementtiin? Kumpi on nyt käytössä? Missä tiedostoissa ne sijaitsevat?

Joten mikään ei voisi olla helpompaa! Avaa Google Chrome -selain, avaa sivustomme - kysymysten lähde, napsauta hiiren kakkospainikkeella haluttua elementtiä, jos se näkyy sivun kontekstissa, ja valitse pikavalikosta "Näytä elementtikoodi".

Alareunassa on konsoli, jossa on korostettu välilehti vasemmalla " Elements" ja kaikki elementtiin liittyvät tyylit oikealla, missä: Lasketut tyylit– nämä ovat yleisiä "yhteenveto"tyylejä, jotka on määritetty elementille käyttäjän selaimen (hänen ympäristön) css-säännöistä ja asetuksista, ja samalla välilehti tiivistetään.

Mutta olemme kiinnostuneita sen alla laajennetusta "Tyylit"-välilehdestä, joka listaa vuorostaan kaikki elementille määritetyt tyylit sekä tiedostot, joissa nämä säännöt on määritetty tälle elementille sen tyypin, tunnuksen, luokan, nimen, ominaisuuden mukaan. , attribuutti jne. Lisäksi, jos css-sääntö on yliviivattu, se tarkoittaa, että se määriteltiin uudelleen aiemmin/myöhemmin (millä on helppo seurata, millä css-säännöillä on prioriteetti ja mitä sovelletaan tässä tapauksessa elementtiin).

Konsolin alapuolella on rivi, joka näyttää elementin dokumenttihierarkiassa, jolloin voit helposti tarkastella koko luetteloa ylätason elementeistä juurista valittuun elementtiin. Jotain "leivänmurua".

Eikö HTML-tunniste näy sivun kontekstissa? Vai pitääkö sinun etsiä kaikki tunnisteet esimerkiksi tietyn luokan, nimen, ominaisuuden tai tyypin mukaan?

Avaa sivusto Google Chromessa, napsauta hiiren kakkospainikkeella, avaa kontekstivalikko ja valitse « Näytä sivun koodi » . Paina näppäinyhdistelmää “CTRL + F” samanaikaisesti, kirjoita tarvitsemamme lause ( Esimerkiksi: luokka=”pehmuste") ja selata löydettyjen tulosten luetteloa ja tarkastella samanaikaisesti kaikkia haluttuihin elementteihin liittyviä tyylejä sivun oikealla puolella.

Kuinka tarkastella dynaamisesti ladattujen elementtien html-koodia (esimerkiksi Ajaxin kautta)

Odotamme sivun latautumista Google Chromessa. Suoritamme tarvittavat toimenpiteet, jotta Ajax toimii. Napsauta ladattua dataa hiiren kakkospainikkeella, valitse pikavalikosta "Näytä elementtikoodi" ja tutki tulosta vasemmalla olevan "Elementit"-välilehden konsolissa.

Katso css-tyylimuutoksia reaaliajassa

Muuten, on myös kätevää tarkkailla tarvittaessa lennossa, mitä tyylejä elementille on määritetty, esimerkiksi selattaessa galleriaa ja muita ajastintapahtumia. Kaikki javascriptin kautta reaaliajassa määritetyt tyylit näkyvät omaisuudessa tyyli valittu elementti "Elementit"-välilehden ikkunassa.

Tarkastele interaktiivisesti css-sääntöjen vaikutusta html-tunnisteiden esittämiseen

Google Chrome tarjoaa interaktiivisen konsolin css-tyyleille. Tämä tarkoittaa, että voit paitsi tarkastella elementissä käytettyjä tyylejä, myös siirtää hiiren osoittimen tietyn css-ominaisuuden päälle, ottaa sen käyttöön oikealla olevan ponnahdusikkunan valintaruudun avulla tai poistaa sen käytöstä poistamalla lipun ja tarkastella tuloksena oleva tulos sivulla.

Muutamme html-elementtien esitysrakennetta lennossa (suoraan selaimessa)

Joten olemme jo oppineet tutkimaan verkkodokumentin rakennetta Google Chromessa, nyt tarkastellaan lyhyesti elementtien muokkausta lennossa. Menemme konsoliin millä tahansa meille sopivalla tavalla. Löydämme halutun elementin "Elementit" -välilehdeltä, napsauta sitä hiiren kakkospainikkeella ja avaa näin ponnahdusikkunan:

Lisää attribuutti– lisää määritetyn elementin määritteen. Heti kun kohdistin aktivoituu, alamme asettaa haluttua ominaisuutta. Esimerkiksi: kirjoitamme name=”itemImage”, joka lisätään välittömästi elementtiimme.
Muokkaa attribuuttia– Jos napsautat elementtiattribuuttia hiiren kakkospainikkeella, kohde tulee saataville muokataattribuutti. Napsauta ja muokkaa.

Käyttöesimerkki: Unohdimme Google Chromeen tähtien alle tallennetun salasanan (jos salasana on tallennettu tähän selaimeen). Napsauta hiiren kakkospainikkeella elementtiä, jonka salasana on syötetty, napsauta "Näytä elementtikoodi" , vasemman välilehden konsolissa Elementit napsauta hiiren kakkospainikkeella type=”password”-attribuuttia, napsauta vasenta painiketta Muokataattribuutti muuta attribuuttia tyyppi=”Salasana" päällä tyyppi=”teksti", ja nyt tähtien sijaan sama salasana näytetään tekstimuodossa.

Muokatahtml– Napsauta hiiren kakkospainikkeella elementtiä konsolissa Elementit, valitse Muokatahtml, muuta koodia mieleiseksesi.
KopiokutenHTML– kopioimme lisätutkimuksia varten tarvitsemamme osan HTML:stä esimerkiksi muistilehtiöön tai muihin tarkoituksiin, joissa meidän on käytettävä täsmälleen samaa asettelua. Säästämme aikaa.
KopioXPATH– kopioi rakenteen XPATH-esityksen pääelementin juuresta valittuun elementtiin.
Poistaasolmu– jos sinun on poistettava valittuna oleva elementti ja kaikki sen alat Web-sivun kontekstista ja katso tulos.
Sanakääri– näyttää verkkosivun näkymän konsolikontekstissa Elementit luettavampi.

Seuraavissa artikkeleissa jatkamme verkkovastaaville tarkoitettujen työkalujen tarkastelua ja erityisesti tutustumme muihin verkkovastaavien työkalujen välilehtiin. Google Chrome, ja harkitse myös JavaScript-virheiden korjaamista eri selaimilla

1 ääni

Hyvää päivää rakkaat blogini lukijat. Joskus löydät verkkosivustolta kauniin ominaisuuden ja alat ihmetellä, kuinka luoja on saanut niin mielenkiintoisen vaikutuksen.

Osoittautuu, että vastaus on melko yksinkertainen. Ja jos sinulla on taitoja, voit kerätä paljon näitä ominaisuuksia ja luoda oman ainutlaatuisen verkkosivustosi lyhyessä ajassa.

Tänään puhumme sivun, tietyn elementin koodin avaamisesta ja opimme käyttämään tätä taitoa hyödyksesi.

Koodin perustiedot

Sivustoni on tarkoitettu aloittelijoille ja haluaisin aluksi puhua lyhyesti sivustoista ja koodista yleisesti.

Piirrä kuva ja leikkaa se pieniksi osiin kirjoittamalla koodi niin, että selain kokoaa kaikki elementit yhdeksi kokonaisuudeksi. Näyttääkö kaikki kovin monimutkaiselta? Ei ollenkaan, eikä siitä ole mitään järkeä surra.

Näin syntyy laadukkaita verkkosivustoja. Jos haluat, osallistu tähän asiaan ja opi sitä, jos et halua, kukaan ei voi pakottaa sinua.

Sanon vain yhden asian... ei ole mukavampaa kuin nähdä kuinka kirjoittamasi käsittämättömät sanat muuttuvat yhdeksi kokonaisuudeksi ja heräävät henkiin: linkit toimivat, painikkeet liikkuvat, kuvat liikkuvat, teksti ryömii. Luulen tietäväni, miltä Victor Frankenstein tuntui.

Kun alat ymmärtää salaisen kielen ja huomaat, että kaikki on itse asiassa paljon yksinkertaisempaa kuin aluksi näytti, et voi muuta kuin uskoa omiin vahvuuksiisi ja aivojen kykyyksiisi. Tämä on erittäin siistiä.

Miten verkkosivut tehdään? Ihannetapauksessa ensin. Hän vain maalaa kuvan. Esimerkiksi kuten alla olevassa kuvassa näkyy. Toistaiseksi se on vain kuva, valokuva. Mikään linkki ei toimi, kun klikkaat et mene minnekään, hakua ei tehdä.

Tämän piirustuksen mukaan. Katso alla olevaa kuvakaappausta. Saatat ajatella, että tämä on naurettava ja erittäin monimutkainen symbolijoukko. Itse asiassa kaikki ei ole niin monimutkaista, on olemassa tietty algoritmi.

Tunnisteita on vain noin 150, ja jokainen niistä vastaa tietystä toiminnosta: linkki, tavutus, lihavoitu, väri, otsikko ja niin edelleen. Niiden ymmärtäminen ei ole niin vaikeaa, jos sinulla on halua ja et välitä ajasta.

Näiden ominaisuuksien tuntemuksen ansiosta voit ratkaista melkein minkä tahansa ongelman. Mutta jokainen kehittäjä löytää omat keinonsa saavuttaa tavoite.

Kokeneet tekijät näkevät heti, kuinka saavuttaa tuloksia, kun taas muiden on mietittävä, etsittävä vastaus artikkeleista tai kilpailijoiden lähdekoodista. He yksinkertaisesti ottavat tarvittavan osan kolmannen osapuolen sivustolta ja muokkaavat sitä itse. Tämä lyhentää merkittävästi työprosessia.

Hieman myöhemmin näytän sinulle erityisen esimerkin.

Katso koodi

Joten haluan ensin näyttää sinulle, kuinka toimia, jos sinun on selvitettävä jonkun muun html. Sitten tarkastellaan kaikkia muita kysymyksiä yksityiskohtaisemmin.

Paras tapa

Menetelmä, jonka kuvaan ensin, on hieman monimutkainen aloittelijoille, mutta lue se johdannona. Avaa sivu ja napsauta hiiren oikeaa painiketta. Valitse "Tallenna nimellä..."

Tallenna koko verkkosivu. Kuten kuvakaappauksesta näet, olen jo ladannut kaiken etukäteen. Tässä meillä on kaksi kansiota.

Kaikki mitä tarvitset on täällä. Jokainen elementti. Jos ymmärrät tämän, saat nopeasti kaiken tarvitsemasi. Mutta tällaisesta tehtävästä tulee yhä mahdottomaksi. Ei latausta. Mitä tehdä, jos sivun kopioiminen on kiellettyä?

Tämä on Google Chrome

Kuten olet ehkä jo huomannut, käytän useimmiten Google Chromea ja jonkun muun koodin oppiminen tässä selaimessa on yhtä helppoa kuin päärynöiden kuoriminen. Kuten periaatteessa kaikki muutkin. Kaava ei ole vain samanlainen, vaan myös identtinen. Avaa sivu, jonka koodin haluamme tietää, ja napsauta hiiren kakkospainikkeella mitä tahansa. Napsauta näkyviin tulevassa ikkunassa "Näytä sivun koodi".

Koodiarkki avautuu uuteen ikkunaan, jota aloittelijan on melko vaikea ymmärtää. Mutta älä huolestu etukäteen.

Jos haluat tietää vain yhden elementin koodin, vie hiiri sen päälle ja napsauta hiiren kakkospainikkeella. Valitse toinen Chrome-toiminto: "Näytä elementtikoodi".

Minua voisi esimerkiksi kiinnostaa kuinka logo on tehty, käyttäen kuvaa tai ohjelmointikieltä? Loppujen lopuksi voit piirtää neliön CSS: llä. Monet asiantuntijat neuvovat kirjoittamaan mahdollisimman paljon tietoa koodiin. Kuinka ne toimivat suosituilla sivustoilla?

Nyt tarvittava tieto on ilmestynyt. html päällä, css alhaalla. Nämä ovat kaksi kieltä. Ensimmäinen vastaa tekstikomponentista ja toinen suunnittelusta. Jos CSS:ää ei olisi, sinun on määritettävä väri ja kirjasinkoko joka kerta. Jokaisella sivulla tämä on erittäin pitkä. Mutta jos ei olisi html:ää, meillä ei olisi tekstejä. Selitin sen karkeasti, mutta yleisesti ottaen näin se on.

Muuten, jos olet kiinnostunut sen toiminnasta täällä, voit katsoa alla olevan kuvan linkin. Tässä on vastauksesi.

Mozilla Firefox

Jos haluat työskennellä mastiksilla, kaikki on täsmälleen sama. Avaa sivu ja napsauta hiiren oikeaa painiketta. "Sivun lähdekoodi", jos haluat nähdä koko koodin.

Kun viet hiiren elementin päälle, voit avata sen koodin.

Täällä tiedot näytetään näytön alareunassa, mutta muuten kaikki on täsmälleen sama.

Yandex selain

Yandex-selaimessa kaikki on täsmälleen sama kuin kahdessa edellisessä vaihtoehdossa, avaa sivu, napsauta hiiren kakkospainikkeella, katso sivukoodi.

Siirrämme osoittimen elementin päälle, jos haluamme selvittää tarkalleen sen koodin.

Kaikki näkyy täällä täsmälleen samalla tavalla kuin Chromessa.

Ooppera

Ja lopuksi Opera.

Muuten, olet ehkä huomannut, että sinun ei tarvitse käyttää hiirtä. Koodin avaamiseen on nopea pikanäppäin, joka on sama kaikille selaimille: CTRL+U.

Elementeille: Ctrl+Shift+C.

Tältä tulos näyttää.

Tämä on mielenkiintoista aloittelijoille

Katso nyt kuinka kaikki toimii. Löydät sivuston ja pidät todella jostain elementistä. Esimerkiksi tämä. Tiedät jo, kuinka elementtikoodi avataan.

Kopioi se nyt.

Käytän , liitä tämä koodi uuteen html-tiedostoon body-tunnisteeseen (englanniksi body).

Katsotaan nyt, miltä kaikki näyttää selaimessa.

Valmis. Jotta teksti olisi kohdistettu reunoihin ja saada vihertävän värin, sinun on yhdistettävä css tähän asiakirjaan ja kopioitava toinen koodi sivustolta, josta kopioimme tämän.

En tee tätä nyt. Tämä vaatii enemmän aikaa: sekä minun että sinun. Luulen, että kuvailen kaikki yksityiskohdat tulevissa julkaisuissani. Tilaa uutiskirje ja saat ensimmäisenä tiedon kun artikkeli ilmestyy.

Jos et kestä, mutta haluat oppia lisää html:stä ja css:stä nyt, voin perinteisesti suositella sinulle ilmaisia koulutuskursseja.

Tässä on 33 oppituntia, joiden avulla voit hallita html:ää - "Ilmainen HTML-kurssi" .

Ja tässä on täydelliset tiedot css: stä - "Ilmainen CSS-kurssi (45 videotuntia!)" .

Nyt tiedät vähän enemmän. Toivon sinulle menestystä pyrkimyksissäsi. Nähdään taas!

Sinun on nopeasti nähtävä kaikki muutokset itse sivustolla vaikuttamatta Internetiin lähetetyn sivuston tiedostoihin ja koodiin. Voit esimerkiksi muuttaa lohkon värimaailmaa, siirtää pois siirtyneen elementin jne.

Tätä varten monet verkkovastaavat käyttävät paikallisia Denwer- tai OpenServer-palvelimia, jotka suorittavat koko sivuston kopion tietokoneessaan. Tämä menetelmä on universaali ja sopii ammattilaisille, sillä sitä voidaan käyttää erilaisten skriptien ja lisäosien toiminnan testaamiseen, suunnittelun muuttamiseen ja kaikkien sivuston tiedostojen muokkaamiseen ja testin jälkeen tarvittavien muutosten siirtämiseen suoraan sivustolle.

Käyttäjille, jotka ovat kaukana verkkovastaavuudesta, suosittelen selaimen käyttöä näihin tarkoituksiin. Koska käytän Chromea, annan ohjeet kuvakaappauksilla tälle selaimelle. Analogisesti voit työskennellä Operan, Yandex.Browserin, Mozilla Firefoxin ja muiden selaimien kanssa, ja niiden työkalujen periaate on samanlainen.

Ohje 1: kuinka tarkastella sivuston koko HTML-koodia selaimessa

Avaa sivustosi tarvittava verkkosivu. Napsauta hiiren kakkospainikkeella vaadittua elementtiä, jolloin näkyviin tulee selaimen kontekstikohtainen pudotusvalikko, jossa on käytettävissä olevat komennot:

Kuva 1. Web-sivun koko HTML-koodin tarkasteleminen Chrome-selaimessa

Tärkeä: Pudotusvalikon komennot voivat poiketa esimerkiksi aktiivisista elementeistä (linkit, kuvat, videot) ja ei-aktiivisista (teksti, tausta, divs):

Kuva 2. Chrome-selaimen pudotusvalikko

Joten jos et löydä tarvitsemaasi komentoa, napsauta hiiren kakkospainikkeella muualla tai käytä selaimesi pikanäppäimiä.

Palataan kuvaan 1, se näyttää tarvittavan komennon nähdäksesi kaikki lähdesivun HTML-koodi, sitä kutsutaan nimellä " Näytä sivun koodi". Napsauta komentoa, uusi välilehti avautuu lähdeverkkosivun täydellisellä koodilla, iso plussa kaikkeen - katselu on käytettävissä syntaksin korostuksella:

Kuva 3. Tämän sivuston koodifragmentti

Tämä työkalu on erittäin hyödyllinen etsimiesi elementtien löytämiseen ja muokkaamiseen.

Vaihtoehtoisia tapoja tarkastella verkkosivun kaikkea HTML-koodia

Nopeuta käyttöä varten voit käyttää muita tapoja kutsua tämä työkalu

Kuvassa 1 näemme myös, että tämä komento on käytettävissä pikanäppäimen kautta + ;

Liitä view-source:site selaimen osoitepalkkiin verkkotunnukseni sijaan, lisää osoitteesi;

Molemmat menetelmät ovat yleismaailmallisia ja niiden pitäisi toimia kaikissa selaimissa.

Aluksi jotkut saattavat ajatella, että tämä ei ole välttämätön työkalu, mutta sivuston koko HTML-koodin tarkasteleminen on loistava tapa löytää koodista tarvittavat elementit, jotka voivat olla linkkejä, tageja, sisällönkuvauskenttiä, attribuutteja ja muita elementtejä. .

Pikanäppäinyhdistelmä +avaa hakuikkuna, Chrome-selaimessa se näkyy oikeassa yläkulmassa:

Kuva 3. Hae sivustokoodin mukaan

Kun olet kirjoittanut pyynnön hakulomakkeeseen, ruutu siirtyy ensimmäiseen löydettyyn elementtiin. Nuolilla voit siirtyä niiden välillä ja valita tarvitsemasi elementin:

Kuva 4. Hae HTML-sivustokoodilla

Ohje 2: kuinka tarkastella ja muokata sivuston HTML- ja CSS-koodia Google Chrome -selaimessa

Nyt tärkein osa, jossa näytän kuinka voit muokata verkkosivuston HTML- ja CSS-koodia selaimessa. siirrä sitten muutokset selaimeen.

Tämä hyödyllinen työkalu on aina käytettävissä selaimessasi. Kokeile muita komentoja, jotka helpottavat sivustosi muokkaamista.