Programeri preglednika pobrinuli su se za praktičnost onih koji stvaraju web-mjesta koja se otvaraju u tim istim preglednicima, odnosno webmastera. Standardnim funkcijama dodali su alate za razvojne programere s kojima možete jednostavno otvoriti i pogledajte izvorni kod stranice web-mjesta u pregledniku: HTML, CSS, JavaScript (JS), dobiti razne korisne podatke o strukturi stranice, provesti njezinu tehničku analizu. Općenito, vidjeti puno korisnih stvari.
Naravno, ove alate ne koriste samo kreatori stranica za rad, već i obični korisnici koji uz izvorni kod mogu vidjeti razne korisne podatke.
U ovom ćete članku naučiti kako vidjeti izvorni kod stranice web-mjesta u pregledniku (kako otvoriti HTML, CSS, JavaScript kôd web-mjesta).
Kako otvoriti izvorni kod stranice u pregledniku
Postoje dva načina za otvaranje izvornog koda web stranice u pregledniku:
- Korištenje vrućih tipki;
- Otvorite iz kontekstnog izbornika.
Ctrl + U- kombinacija vrućih tipki za prikaz izvornog koda cijele stranice web-mjesta u zasebnom novom prozoru. Standardno za sve preglednike: Google Chrome, Opera, Mozilla Firefox, Yandex preglednik, IE.
Također možete unijeti alate za razvojne programere na sljedeći način:
Kako biste brzo pronašli potrebni kod, riječ ili tekst na stranici, možete koristiti kombinaciju tipki prečaca za pretraživanje standardnu za sve preglednike: Ctrl + G.
Video upute:
Pogledaj šifru artikla | istražiti predmet | pregledati predmet
Ako iznenada trebate pogledati ne cijeli izvorni kod, već prikazati samo njegov zasebni dio, neki odjeljak na stranici, tada prethodni alat neće raditi. Da biste to učinili, postoji još jedna funkcija u alatima za razvojne programere, o kojoj će biti riječi u nastavku.
Kako vidjeti kod elementa na stranici:
Osim toga, možete koristiti tipkovničke prečace za brzi pristup pregledu elemenata.
Vruće tipke (tipke):
Google Chrome: Ctrl + Shift + I i Ctrl + Shift + C
Opera: Ctrl + Shift + I i Ctrl + Shift + C
Mozilla Firefox: Ctrl + Shift + I i Ctrl + Shift + C
Yandex preglednik: Ctrl + Shift + I i Ctrl + Shift + C
Nakon poduzetih radnji, izvorni kod web stranice otvorit će se u istom prozoru preglednika:
Sav HTML kod bit će u lijevom velikom stupcu. A CSS stilovi su na desnoj strani.
Prednost ove metode je, naravno, što korisnik ima priliku mijenjati izvorni kod, uređivati stilove. Odnosno, možete uređivati stilove na stranici i vidjeti kako će izgledati s određenim stilovima, bez potrebe da odmah mijenjate datoteke koje se nalaze na hosting poslužiteljima. Da biste promijenili ili dodali programski kod, trebate dvaput kliknuti na željeni fragment ili područje. Naravno, popravak koda preglednika neće se primijeniti na hosting poslužitelje. Stoga ćete u budućnosti, u svakom slučaju, morati kopirati ovaj kod i upisati ga u datoteke.
Ovaj video tutorial daje detalje i pokazuje vam kako raditi s alatima za razvojne programere:
Upravo tako, online, izravno u pregledniku, možete vidjeti izvorni kod stranice stranice, dobiti osnovne podatke o HTML i CSS kodu, mijenjati ih i kopirati, bez potrebe da preuzimate datoteke ove stranice na svoje računalo.
Inače, neiskusni korisnici interneta koji su promijenili kod stranice i očekuju da će biti spremljen bit će razočarani. Uostalom, nakon osvježavanja stranice, sve promjene na njoj će nestati. Ovo nije dovoljno za hakiranje stranice 🙂
Kako vidjeti izvorni kod na Android telefonu
Također bih želio napomenuti da su alati za razvojne programere dostupni ne samo u desktop verziji preglednika, odnosno na računalima i prijenosnim računalima. Na telefonima i tabletima (Android, IOS) također možete vidjeti izvorni kod.
Da biste to učinili, dodajte prefiks izvora prikaza URL-u provjerene stranice:
Na primjer:
view-source: https: // site / turbo-rezhim-opera /
1 glas
Dobar dan, dragi čitatelji mog bloga. Događa se da na web mjestu pronađete neku lijepu značajku i pitanje počinje mučiti kako je kreator postigao tako zanimljiv učinak.
Ispada da je pronalaženje odgovora prilično jednostavno. A ako imate neke vještine, onda možete prikupiti puno takvih čipova i stvoriti vlastitu jedinstvenu web stranicu u kratkom vremenu.
Danas ćemo razgovarati o tome kako otvoriti kod stranice, određeni element i naučiti kako iskoristiti ovu vještinu u svoju korist.
Osnovno poznavanje koda
Moja stranica je namijenjena početnicima i prvo bih vam želio ukratko reći o stranicama i kodu općenito.
Da biste nacrtali sliku, a zatim je izrezali na male dijelove, napišite kod, zahvaljujući kojem će preglednik ponovno prikupiti sve elemente u jednu cjelinu. Čini se da je sve jako komplicirano? Nikako, i ne biste trebali tugovati zbog toga.
Tako nastaju kvalitetne web stranice. Ako hoćeš – uključi se u ovaj posao i uči, nema želje – nitko te ne može natjerati.
Mogu reći samo jedno... nema ništa ugodnije nego vidjeti kako se nerazumljive riječi koje ste napisali pretvaraju u jednu cjelinu i oživljavaju: linkovi rade, gumbi se pomiču, slike pomiču, tekst puzi. Mislim da znam kako se osjećao Victor Frankenstein.
Kada počnete shvaćati tajni jezik i vidite da je sve zapravo puno jednostavnije nego što se u početku činilo, ne možete a da ne vjerujete u vlastite snage i mogućnosti mozga. Vrlo je cool.
Kako se izrađuju stranice? Idealno, prvo. On samo crta sliku. Na primjer, kao što je prikazano na donjoj slici. Dok je ovo samo slika, fotografija. Nijedna poveznica ne radi, kada kliknete ne idete nikamo, ne vrši se pretraživanje.
Prema ovoj slici. Pogledajte snimku zaslona u nastavku. Možda mislite da je ovo smiješan i vrlo složen skup simbola. Zapravo, sve nije tako teško, postoji određeni algoritam.
Postoji samo oko 150 oznaka, a svaka od njih je odgovorna za određenu radnju: poveznicu, prijenos, podebljano, boju, naslov i tako dalje. Nije ih tako teško razumjeti ako postoji želja i ne smeta vam vrijeme.
Poznavanjem ovih atributa može se riješiti gotovo svaki zadatak. Evo samo načina za postizanje cilja, svaki programer pronalazi svoj.
Iskusni kreatori odmah vide kako postići rezultat, dok drugi moraju razmišljati, tražiti odgovor u člancima ili u izvornom kodu konkurenata. Oni samo preuzimaju dio koji im treba sa stranice treće strane i uređuju za sebe. To značajno skraćuje proces rada.
Kasnije ću vam pokazati konkretan primjer.
Pogledajte kod
Dakle, dopustite mi da vam prvo pokažem kako postupiti ako trebate naučiti tuđi html. Zatim ćemo pobliže pogledati sva ostala pitanja.
Najbolji način
Metoda koju ću prvo opisati malo je teška za početnike, ali kao uvod, poslužit će, čitajte dalje. Otvorite stranicu i kliknite desnu tipku miša. Odaberite stavku "Spremi kao..."
Spremi cijelu web stranicu. Kao što možete vidjeti na snimci zaslona, već sam sve unaprijed preuzeo. Ovdje imamo dvije mape.
Sve što trebate je ovdje. Svaki predmet. Ako to razumijete, možete brzo dobiti sve što vam je potrebno. No, takav zadatak sve više postaje nemoguć. Preuzimanje nije u tijeku. Što učiniti ako je zabranjeno kopirati stranicu?
Ovo je Google Chrome
Kao što ste možda već primijetili, najčešće koristim Google Chrome i pronalaženje tuđeg koda u ovom pregledniku je jednostavno kao ljuštenje krušaka. Kao u principu, i u bilo kojem drugom. Shema neće biti samo slična, već i identična. Otvorite stranicu čiji kod želimo saznati i kliknite bilo gdje desnom tipkom miša. U prozoru koji se pojavi kliknite "Prikaži kod stranice".
Šifra će se otvoriti u novom prozoru, što je početniku prilično teško razumjeti. No, nemojte se uplašiti prije vremena.
Ako trebate znati šifru samo jednog elementa, samo zadržite pokazivač miša iznad njega i kliknite desnom tipkom miša. Odabiremo drugu funkciju kroma: "Pregled koda elementa".
Na primjer, moglo bi me zanimati kako je napravljen logo, pomoću slike ili programskog jezika? Uostalom, možete nacrtati kvadrat pomoću css-a. Mnogi stručnjaci savjetuju kodiranje što više informacija. Kako rade na popularnim stranicama?
Tako su se pojavile potrebne informacije. Gornji html, donji css. To su dva jezika. Prvi je odgovoran za tekstualnu komponentu, a drugi za dizajn. Da nema css-a, onda biste morali svaki put propisati boju, veličinu fonta. Za svaku stranicu, to je jako dugo. Ali da nema html-a, onda ne bismo imali tekstove. Grubo objašnjeno, ali općenito, sve je tako.
Inače, ako vas zanima kako to radi ovdje, možete vidjeti link na sliku ispod. Evo vašeg odgovora.
Mozilla Firefox
Ako volite raditi u muffu, onda će sve biti potpuno isto. Otvorite stranicu i kliknite desnu tipku miša. "Izvorni kod stranice" ako želite vidjeti cijeli kod u cijelosti.
Kada zadržite pokazivač iznad bilo kojeg elementa, postaje moguće otvoriti njegov kod.
Ovdje se podaci prikazuju pri dnu ekrana, ali inače je sve potpuno isto.
Yandex preglednik
U pregledniku Yandex sve je potpuno isto kao u prethodne dvije verzije, otvorite stranicu, kliknite desnom tipkom miša, pogledajte kod stranice.
Zadržite pokazivač iznad elementa ako želimo točno saznati njegov kod.
Ovdje je sve prikazano na isti način kao u kromu.
Opera
I na kraju, Opera.
Usput, možda ste primijetili da nije potrebno koristiti miš. Postoji brzi tipkovnički prečac za otvaranje koda, a isti je za sve preglednike: CTRL + U.
Za stavke: Ctrl + Shift + C.
Ovako izgleda rezultat.
Bit će zanimljivo za početnike
Sada gledajte kako sve funkcionira. Nađete stranicu i neki element vam se jako sviđa. Na primjer, ovaj. Već znate kako otvoriti kod elementa.
Sada kopirajte.
Koristim, zalijepim ovaj kod u novu html datoteku, u body tag (tijelo na engleskom).
Sada da vidimo kako sve to izgleda u pregledniku.
Spreman. Kako bi se tekst poravnao uz rubove i dobio zelenkastu boju, potrebno je povezati css s ovim dokumentom i kopirati drugi kod sa stranice s koje smo upisali ovaj.
Sada to neću učiniti. Potrebno je više vremena, i mojeg i vašeg. Mislim da ću sve detalje opisati u svojim budućim publikacijama. Pretplatite se na newsletter i budite prvi koji će saznati za članak.
Ako ne možete podnijeti, a želite naučiti više o html-u i css-u upravo sada, tradicionalno vam mogu preporučiti besplatne tečajeve.
Evo 33 tutorijala koji će vas natjerati da savladate html - "Besplatni HTML tečaj" .
A ovdje su potpune informacije o css-u - "Besplatni CSS tečaj (45 video tutoriala!)" .
Sada znate malo više. Želim vam puno uspjeha u vašim nastojanjima. Do sljedećeg puta!
Vještina promijeniti izvorni kod stranice To je korisna vještina za napredne korisnike interneta. Zamjenom HTML koda možete promijeniti otvorenu web stranicu kako želite. U ovom članku ćemo vam reći, kako promijeniti kod stranice u Google Chromeu. Međutim, u drugim preglednicima sve se radi na isti način, tako da ne bi trebalo biti nikakvih poteškoća.
Što je HTML kod stranice?
Svaka stranica koju otvorite u pregledniku ima svoj HTML označni jezik. Ovaj kod su oznake i tekst. Oznake su vrste oznaka koje pregledniku govore kako prikazati određeni dio web-mjesta. Tekst je sadržaj stranice, ono što korisnik vidi. Također, na stranicu se mogu povezati CSS stilovi koji postavljaju izgled elemenata stranice. Do promijeniti izvorni kod stranice Ne morate detaljno poznavati HTML i CSS, a uskoro ćete se i sami uvjeriti u to.
Zašto mijenjati web stranicu?
Možete promijeniti podatke na stranici, promijeniti tekst poruke, napraviti lažnu snimku zaslona. Imajte na umu da su sve promjene vidljive samo vama i kada ponovno učitate stranicu, one će nestati. Također promijenjeni podaci neće biti stvarni. Na primjer, ako nemam 10 dolara, a promijenim na 100, onda više neću imati novca. Ovo je samo prikaz stranice u pregledniku. Primjer:
Nakon:
Kao primjer, uzet ću istu stranicu i izmijeniti prethodnu najavu članka “” Otvaranje početne stranice u Google Chromeu. Desnom tipkom miša kliknite na element koji želim promijeniti, na primjer, naslov objave i odaberite "View Code".
U prozoru koji se otvori idite na karticu Elementi i pogledajte HTML kod stranice. U njemu trebate pronaći tekst koji nas zanima. (podvučeno crvenom bojom)
Sada ću izbrisati stari tekst i unijeti novi.
To je sve, promijenjen je naslov objave. Sada ću promijeniti samu najavu, oznake i naslov.
Možete umetnuti drugu sliku promjenom atributa src u oznaci img.
Dakle, danas ćemo pogledati nekoliko korisnih alata za web majstora koji olakšavaju život izgledu web stranice. Počnimo s webmaster konzolom u Google Chromeu. I prijeđimo na pitanja koja se najčešće postavljaju kod web-mastera tijekom izgleda stranice.
Da biste došli do konzole, otvorite svoju web-lokaciju u Google Chromeu, kliknite desnom tipkom bilo gdje na web-stranici i odaberite Prikaži kod stranice iz kontekstnog padajućeg izbornika ili na određenu stavku za istraživanje odabirom View Code elementa " .
Na vrhu ćete imati nekoliko navedenih kartica. Danas ćemo govoriti o kartici "Elementi". , koji predstavlja elemente web stranice s označavanjem oznaka, svojstava, isticanje ugniježđenja elemenata, predstavljanje hijerarhije elementa u DOM stablu (hint na dnu, od korijenskog roditelja do trenutno istraženog), mogućnost uredite elemente, popis njihovih svojstava, razmotrite pretragu po elementima i upoznajmo se s pregledom css stilova povezanih s elementima itd.
Kako mogu vidjeti sve stilove koji su povezani s određenim elementom? Koji se sada primjenjuje? U kojim se datotekama nalaze?
Dakle, ništa ne može biti lakše! Otvorite preglednik Google Chrome, otvorite našu stranicu - izvor pitanja, desnom tipkom miša kliknite željeni element, ako je vidljiv u kontekstu stranice, i odaberite "Prikaži kod elementa" iz kontekstnog izbornika.
Na dnu imamo konzolu s označenom karticom s lijeve strane "Elementi" i svim stilovima povezanim s elementom s desne strane, gdje: Računalni stilovi- ovo su opći stilovi "sažetka" koji su elementu dodijeljeni iz css pravila i postavki korisnikovog preglednika (njegova okolina), a kartica je sažeta.
Ali nas zanima kartica "Stilovi", proširena ispod nje, u kojoj su svi stilovi dodijeljeni elementu navedeni jedan po jedan, kao i datoteke u kojima su ta pravila za ovaj element naznačena njegovom vrstom, ID-om, klasi, ime, svojstvo, atribut itd... Istodobno, ako je css pravilo prekriženo, tada je ponovno definirano ranije/kasnije (što olakšava praćenje koje od css pravila ima prioritet i u ovom slučaju se primjenjuje na element).
Ispod konzole je linija koja prikazuje element u hijerarhiji dokumenta, lako vam omogućuje pregled cijelog popisa nadređenih elemenata od korijena do odabranog elementa. Nešto poput krušnih mrvica.
Html oznaka nije vidljiva u kontekstu stranice? Ili trebate pronaći sve oznake, na primjer, prema određenoj klasi, nazivu, svojstvu, vrsti?
Otvorite stranicu u Google Chromeu, kliknite desnom tipkom miša, otvorite kontekstni izbornik, odaberite « Pogledajte kod stranice » ... Istovremeno pritisnite kombinaciju tipki "CTRL + F", unesite frazu koja nam je potrebna ( Na primjer: razred = ”podstava ") i kretati se kroz popis pronađenih rezultata, usput pregledavajući sve stilove povezane sa željenim elementima na desnoj strani stranice.
Kako vidjeti html kod elementa (e) koji se dinamički učitavaju (na primjer: Ajax)
Čekamo da se stranica učita u Google Chrome. Izvodimo potrebne radnje da Ajax radi. Desnom tipkom miša kliknite na učitane podatke, odaberite "Prikaz koda elementa" iz kontekstnog izbornika, pregledajte rezultat u konzoli na kartici "Elementi" s lijeve strane.
Pregledajte promjene u css stilovima u stvarnom vremenu
Usput, također je prikladno promatrati, ako je potrebno, koji su stilovi dodijeljeni elementu u hodu, na primjer, prilikom pomicanja po galeriji i drugih događaja pomoću mjerača vremena. Svi stilovi dodijeljeni javascriptu u stvarnom vremenu bit će prikazani u svojstvu stil odabrani element u prozoru na kartici "Elementi".
Pregled uživo učinka css pravila na prezentaciju html oznaka
Google Chrome pruža interaktivnu konzolu za css stilove. A to znači da ne samo da možete vidjeti koji su stilovi primijenjeni na element, već i pomicati pokazivač miša preko css-a koji je naveden u svojstvima, omogućiti ga pomoću skočne kvačice s desne strane ili ga onemogućiti poništavanjem zastavice i pregled rezultirajućeg rezultata na stranici.
Promjena strukture prezentacije html elemenata u hodu (desno u pregledniku)
Dakle, već smo naučili kako istražiti strukturu web dokumenta u Google Chromeu, sada ćemo ukratko pogledati elemente uređivanja u hodu. Idemo do konzole na bilo koji način koji nam odgovara. Na kartici "Elementi" pronalazimo traženi element, desnom tipkom miša ga kliknemo i tako pozivamo skočni kontekstni izbornik:
- Dodajte atribut- dodaje atribut za navedeni element. Čim kursor postane aktivan, počinjemo postavljati željeno svojstvo. na primjer: napišimo ime = ”itemImage”, koji će se odmah dodati našoj stavci.
- Uredi atribut- ako desnom tipkom miša kliknete na atribut elementa, stavka postaje dostupna Urediatribut... Kliknite, uredite.
Primjer upotrebe: zaboravili smo lozinku spremljenu pod zvjezdicama u Google Chromeu (ako je lozinka spremljena u ovom pregledniku). Desnom tipkom miša kliknite na stavku sa lozinkom, kliknite na "Prikaži šifru artikla" , u konzoli s lijeve strane u kartici Elementi kliknite na tip atributa = ”lozinka” desnom tipkom miša, lijevom tipkom miša Urediatribut, mijenjanje atributa tip = ”zaporka " na tip = ”tekst ", a sada se umjesto zvjezdica prikazuje ista lozinka u obliku teksta.
- Uredihtml- desnom tipkom miša kliknite na stavku u konzoli Elementi, odaberite Uredihtml, promijenite kod po svom ukusu.
- KopiratikaoHTML- kopirajte HTML dio koji nam je potreban za daljnje istraživanje, recimo, u bilježnicu ili u druge svrhe gdje trebamo primijeniti potpuno isti izgled. Štedimo vrijeme.
- KopiratiXPAT- kopira XPATH prikaz strukture iz korijena roditeljskog elementa u odabrani element.
- Izbrisatičvor- ako trebate ukloniti trenutno odabrani element i svu njegovu djecu iz konteksta web stranice i vidjeti rezultat.
- Riječzamotati- prikazat će prikaz web stranice u kontekstu konzole Elementičitljiviji.
U sljedećim člancima nastavit ćemo razmatranje alata za webmastera, a posebno ćemo se upoznati s ostatkom kartica alata za webmastera u Google Chrome, a također razmislite o otklanjanju pogrešaka u javascriptu pomoću različitih preglednika
