Programeri pretraživača pobrinuli su se za pogodnost onih koji kreiraju stranice koje se otvaraju u tim istim pretraživačima, odnosno webmastera. Standardnim funkcijama su dodali alate za razvojne programere, pomoću kojih možete lako otvoriti i pogledajte izvorni kod stranice web stranice u pretraživaču: HTML, CSS, JavaScript (JS), dobijate razne korisne podatke o strukturi sajta, vršite njegovu 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 mogu vidjeti razne korisne podatke uz izvorni kod.
U ovom članku ćete naučiti kako da vidite izvorni kod stranice web stranice u pretraživaču (kako otvoriti HTML, CSS, JavaScript kod stranice).
Kako otvoriti izvorni kod stranice u pretraživaču
Postoje dva načina da otvorite izvorni kod web stranice u pretraživaču:
- Korištenje vrućih tipki;
- Otvorite iz kontekstnog menija.
Ctrl + U- kombinacija prečaca za pregled izvornog koda cijele stranice stranice u posebnom novom prozoru. Standardno za sve pretraživače: Google Chrome, Opera, Mozilla Firefox, Yandex pretraživač, IE.
Također možete unijeti alate za programere na sljedeći način:
Da biste brzo pronašli traženi kod, riječ ili tekst na stranici, možete koristiti kombinaciju tipki za pretraživanje standardnu za sve pretraživače: Ctrl + G.
Video uputstvo:
Pogledajte šifru artikla | istražiti predmet | pregledati predmet
Ako iznenada trebate pogledati ne cijeli izvorni kod, već prikazati samo njegov odvojeni dio, neki odjeljak na stranici, tada prethodni alat neće raditi. Da biste to učinili, postoji još jedna funkcija u alatima za programere, o kojoj će biti riječi u nastavku.
Kako vidjeti kod elementa na stranici:
Osim toga, možete koristiti prečice na tipkovnici za brzi pristup pregledu elemenata.
Vrući tasteri (dugmad):
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 pretraživač: Ctrl + Shift + I i Ctrl + Shift + C
Nakon poduzetih radnji, izvorni kod web stranice će se otvoriti u istom prozoru preglednika:
Sav HTML kod će biti u lijevoj velikoj koloni. A CSS stilovi su na desnoj strani.
Prednost ove metode je, naravno, u tome što korisnik ima priliku mijenjati izvorni kod, uređivati stilove. Odnosno, možete uređivati stilove na stranici i vidjeti kako će izgledati sa određenim stilovima, bez potrebe da odmah mijenjate datoteke koje se nalaze na hosting serverima. Da biste promijenili ili dodali programski kod, potrebno je dvaput kliknuti na željeni fragment ili područje. Naravno, ispravka koda pretraživača neće biti primenjena na hosting servere. Stoga ćete u budućnosti, u svakom slučaju, morati kopirati ovaj kod i upisati ga u datoteke.
Ovaj video tutorijal sadrži detalje i pokazuje vam kako raditi s alatima za programere:
Upravo tako, online, direktno u pretraživaču, možete pogledati izvorni kod stranice stranice, dobiti osnovne podatke o HTML i CSS kodu, mijenjati ih i kopirati, bez potrebe da preuzimate fajlove ove stranice na svoj računar.
Inače, neiskusni korisnici interneta koji su promijenili kod stranice i očekuju da će biti sačuvan bit će razočarani. Uostalom, nakon osvježavanja stranice, sve promjene na njoj će nestati. Ovo nije dovoljno za hakovanje sajta 🙂
Kako pogledati izvorni kod na Android telefonu
Također bih želio napomenuti da su alati za programere dostupni ne samo u desktop verziji pretraživača, odnosno na računarima i laptopima. 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 čitaoci mog bloga. Dešava se da na sajtu pronađete neku prelepu funkciju i pitanje počinje da muči kako je kreator postigao tako zanimljiv efekat.
Ispostavilo se da je pronalaženje odgovora prilično jednostavno. A ako imate neke vještine, možete prikupiti mnogo takvih čipova i kreirati vlastitu jedinstvenu web stranicu za kratko vrijeme.
Danas ćemo pričati o tome kako otvoriti kod stranice, određeni element i naučiti kako ovu vještinu iskoristiti u svoju korist.
Osnovno poznavanje koda
Moj sajt je namenjen početnicima i prvo bih vam želeo ukratko reći o sajtovima i kodu uopšte.
Da biste nacrtali sliku, zatim je izrežite na male dijelove, napišite kod, zahvaljujući kojem će pretraživač ponovo sastaviti sve elemente u jednu cjelinu. Sve izgleda veoma komplikovano? Nikako, i ne treba da žalite zbog toga.
Tako nastaju kvalitetne web stranice. Ako hoćeš - uključi se u ovaj posao i uči, nema želje - niko te ne može natjerati.
Mogu samo jedno reći... nema ništa ugodnije nego vidjeti kako se nerazumljive riječi koje ste napisali pretvaraju u jedinstvenu cjelinu i oživljavaju: linkovi rade, dugmad se pomiče, slike pomiču, tekst puzi. Mislim da znam kako se Viktor Frankenštajn osećao.
Kada počnete da shvaćate tajni jezik i vidite da je zapravo sve mnogo jednostavnije nego što se u početku činilo, ne možete a da ne vjerujete u vlastite snage i mogućnosti mozga. Ovo je super.
Kako se prave stranice? Idealno, prvo. On samo crta sliku. Na primjer, kao što je prikazano na slici ispod. Dok je ovo samo slika, fotografija. Nijedna veza ne radi, kada kliknete ne idete nikuda, ne vrši se pretraga.
Prema ovoj slici. Pogledajte snimak ekrana ispod. 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 svaki od njih je odgovoran za određenu radnju: link, transfer, bold, boja, naslov itd. Nije ih tako teško razumjeti ako postoji želja i ne smeta vam vrijeme.
Sa poznavanjem ovih atributa, gotovo svaki zadatak se može riješiti. 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. Ovo značajno skraćuje radni proces.
Kasnije ću vam pokazati konkretan primjer.
Pogledaj kod
Dakle, dozvolite mi da vam prvo pokažem kako da postupite ako trebate naučiti tuđi html. Zatim ćemo detaljnije razmotriti sva ostala pitanja.
Najbolji način
Metoda koju ću prvo opisati je malo teška za početnike, ali kao uvod, poslužit će, čitajte dalje. Otvorite stranicu i kliknite na desnu tipku miša. Odaberite stavku "Sačuvaj kao..."
Sačuvajte cijelu web stranicu. Kao što možete vidjeti na snimku ekrana, sve sam već preuzeo unaprijed. Ovdje imamo dva foldera.
Sve što vam treba je ovdje. Svaka stavka. Ako ovo shvatite, možete brzo dobiti sve što vam je potrebno. Ali, takav zadatak sve više postaje nemoguć. Preuzimanje nije u toku. Šta učiniti ako je zabranjeno kopiranje stranice?
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 pretraživaču je lako kao ljuštenje krušaka. Kao u principu, iu bilo kojem drugom. Shema neće biti samo slična, već i identična. Otvorite stranicu čiji kod želimo da saznamo i kliknite bilo gdje desnom tipkom miša. U prozoru koji se pojavi kliknite na "Prikaži kod stranice".
Šifra će se otvoriti u novom prozoru, što je početniku prilično teško razumjeti. Ali, nemojte se uplašiti prije vremena.
Ako trebate znati šifru samo jednog elementa, samo zadržite pokazivač miša preko njega i kliknite desnim tasterom miša. Odabiremo drugu funkciju Chrome-a: "Pogledajte kod elementa".
Na primjer, možda bi me zanimalo kako se pravi logo, koristeći sliku ili programski jezik? Na kraju krajeva, možete nacrtati kvadrat koristeći css. Mnogi stručnjaci savjetuju kodiranje što više informacija. Kako rade na popularnim stranicama?
Tako su se pojavile potrebne informacije. Gornji html, donji css. Ovo su dva jezika. Prvi je odgovoran za tekstualnu komponentu, a drugi za dizajn. Da nije postojao css, onda biste morali svaki put propisivati 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 generalno, sve je tako.
Inače, ako vas zanima kako to funkcionira ovdje, možete vidjeti link do slike ispod. Evo tvog odgovora.
Mozilla Firefox
Ako volite da radite u muffu, onda će sve biti potpuno isto. Otvorite stranicu i kliknite na 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 su podaci prikazani na dnu ekrana, ali inače je sve potpuno isto.
Yandex pretraživač
U Yandex pretraživaču sve je potpuno isto kao u prethodne dvije verzije, otvorite stranicu, kliknite desnim tasterom miša, pogledajte kod stranice.
Pređite kursorom preko elementa ako želimo da saznamo tačno njegov kod.
Ovdje je sve prikazano na isti način kao u hromu.
Opera
I konačno, Opera.
Usput, možda ste primijetili da nije potrebno koristiti miš. Postoji brza prečica na tastaturi za otvaranje koda, a ista je za sve pretraživače: CTRL + U.
Za stavke: Ctrl + Shift + C.
Ovako izgleda rezultat.
Biće zanimljivo za početnike
Sada pogledajte kako sve funkcionira. Nađete sajt i zaista vam se sviđa neki element. Na primjer, ovaj. Već znate kako otvoriti kod elementa.
Sada kopirajte.
Koristim, zalijepim ovaj kod u novu html datoteku, u body tag (body na engleskom).
Sada da vidimo kako sve to izgleda u pretraživaču.
Spreman. Da bi se tekst poravnao po ivicama i dobio zelenkastu boju, potrebno je da povežete css sa ovim dokumentom i kopirate drugi kod sa sajta sa kojeg smo ukucali ovaj.
Sada to neću učiniti. Potrebno je više vremena, i mom i vašem. 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 izdržati, a želite da naučite više o html-u i css-u upravo sada, onda vam tradicionalno mogu preporučiti besplatne kurseve obuke.
Evo 33 tutorijala koji će vam pomoći da savladate html - "Besplatni HTML kurs" .
A evo i kompletnih informacija o css-u - "Besplatni CSS kurs (45 video tutorijala!)" .
Sada znate malo više. Želim vam puno uspjeha u vašim nastojanjima. Do sljedećeg puta!
Vještina promijenite izvorni kod stranice Ovo 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 pretraživačima sve se radi na isti način, tako da ne bi trebalo biti nikakvih poteškoća.
Šta je HTML kod stranice?
Svaka stranica koju otvorite u pretraživaču ima svoj vlastiti HTML jezik za označavanje. Ovaj kod su oznake i tekst. Oznake su vrste oznaka koje govore pretraživaču kako da prikaže određeni dio stranice. Tekst je sadržaj stranice, ono što korisnik vidi. Takođe, na stranicu se mogu povezati CSS stilovi koji postavljaju izgled elemenata stranice. To promijenite 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žni snimak ekrana. Imajte na umu da su sve promjene vidljive samo vama i kada ponovo učitate stranicu, one će nestati. Također izmijenjeni podaci neće biti stvarni. Na primjer, ako nemam 10 dolara, a promijenim na 100, onda neću imati više novca. Ovo je samo prikaz stranice od strane pretraživača. primjer:
nakon:
Kao primjer uzet ću istu stranicu i modificirati prethodnu najavu članka “” Otvaranje početne stranice u Google Chrome-u. Kliknite desnim tasterom miša na element koji želim da promenim, na primer, naslov najave i izaberite „Prikaži kod“.
U prozoru koji se otvori idite na karticu Elementi i pogledajte HTML kod stranice. U njemu morate pronaći tekst koji nas zanima. (podvučeno crvenom bojom)
Sada ću izbrisati stari tekst i unijeti novi.
To je sve, naslov oglasa je promijenjen. 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 master koji olakšavaju život izgledu web stranice. Počnimo s webmaster konzolom u Google Chromeu. I hajde da pređemo na pitanja koja se najčešće postavljaju kod web-mastera tokom izgleda sajta.
Da biste došli do konzole, otvorite svoju stranicu u Google Chromeu, kliknite desnim tasterom miša bilo gdje na web stranici i odaberite "Prikaži kod stranice" u kontekstnom padajućem izborniku ili na određenu stavku za istraživanje odabirom "Prikaži element koda".
Na vrhu ćete imati nekoliko navedenih kartica. Danas ćemo govoriti o kartici "Elementi". , koji predstavlja elemente web stranice sa isticanjem tagova, svojstava, isticanje ugniježdenja elemenata, predstavljanje hijerarhije elementa u DOM stablu (hint na dnu, od korijenskog roditelja do trenutno istraženog), mogućnost uredite elemente, listu njihovih svojstava, razmotrite pretragu po elementima, i hajde da se upoznamo sa pregledom css stilova povezanih sa elementima, itd.
Kako mogu vidjeti sve stilove koji su povezani sa određenim elementom? Koji se sada primjenjuje? U kojim fajlovima se nalaze?
Dakle, ništa lakše! Otvaramo preglednik Google Chrome, otvaramo našu stranicu - izvor pitanja, desnim klikom na željeni element, ako je vidljiv u kontekstu stranice, i odabiremo "Prikaži kod elementa" iz kontekstnog izbornika.
Na dnu imamo konzolu sa označenom karticom na lijevoj strani "Elementi" i svim stilovima povezanim sa elementom na desnoj strani, gdje: Computed Styles- ovo su opšti stilovi "sažetka" koji su dodijeljeni elementu iz css pravila i postavki korisnikovog pretraživača (njegovog okruženja), a kartica je skupljena.
Ali nas zanima kartica "Stilovi", proširena ispod nje, u kojoj su svi stilovi dodijeljeni elementu navedeni jedan po jedan, kao i fajlovi u kojima su ova pravila za ovaj element naznačena njegovim tipom, ID-om, klasi, ime, svojstvo, atribut itd... Istovremeno, ako je css pravilo precrtano, onda je ponovo definisano ranije/kasnije (što olakšava praćenje koje od css pravila ima prioritet i u ovom slučaju se primenjuje na element).
Ispod konzole je linija koja prikazuje element u hijerarhiji dokumenta, lako vam omogućava da vidite cijelu listu nadređenih elemenata od korijena do odabranog elementa. Nešto poput mrvica kruha.
Html oznaka nije vidljiva u kontekstu stranice? Ili trebate pronaći sve oznake, na primjer, prema određenoj klasi, imenu, svojstvu, tipu?
Otvorite stranicu u Google Chromeu, kliknite desnim tasterom miša, otvorite kontekstni meni, odaberite « Pogledajte kod stranice » ... Istovremeno pritisnite kombinaciju tipki "CTRL + F", unesite frazu koja nam je potrebna ( na primjer: klasa = ”padding ") i navigirajte kroz listu pronađenih rezultata, usput pregledavajući sve stilove povezane sa željenim elementima na desnoj strani stranice.
Kako vidjeti html kod elementa(a) koji se dinamički učitavaju (na primjer: od strane Ajaxa)
Č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 "Prikaži šifru elementa" iz kontekstnog izbornika, pregledajte rezultat u konzoli na kartici "Elementi" s lijeve strane.
Pogledajte promjene u css stilovima u realnom vremenu
Usput, također je zgodno promatrati, ako je potrebno, koji su stilovi dodijeljeni elementu u hodu, na primjer, prilikom pomicanja po galeriji i drugih događaja pomoću tajmera. Svi stilovi dodijeljeni javascript-u u realnom vremenu će biti prikazani u svojstvu stil odabrani element u prozoru na kartici "Elementi".
Pregled uživo efekta css pravila na prezentaciju html tagova
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 kursor miša preko css specificiranog iz svojstava, omogućiti ga pomoću iskačuće kvačice na desnoj strani ili ga onemogućiti tako što ćete poništiti zastavicu i gledanje rezultirajućeg rezultata na stranici.
Promjena strukture prezentacije html elemenata u hodu (pravo u pretraživaču)
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. Pronađemo traženi element na kartici "Elementi", kliknemo desnim tasterom miša na njega i tako pozovemo skočni kontekstni meni:
- Dodaj atribut- dodaje atribut za navedeni element. Čim kursor postane aktivan, počinjemo postavljati željeno svojstvo. Na primjer: napišemo name = ”itemImage”, koji će odmah biti dodan našoj stavci.
- Uredi atribut- ako desnom tipkom miša kliknete na atribut elementa, stavka postaje dostupna editatribut... Kliknite, uredi.
Primjer upotrebe: zaboravili smo lozinku sačuvanu pod zvjezdicama u Google Chromeu (ako je lozinka sačuvana u ovom pretraživaču). Desni klik na stavku sa lozinkom, kliknite na "Prikaži šifru artikla" , u konzoli na lijevoj strani kartice Elementi kliknite na tip atributa = ”password” desnim dugmetom miša, levim klikom na Urediatribut, mijenjanje atributa tip = ”lozinka " on tip = ”tekst ", a sada se umjesto zvjezdica prikazuje ista lozinka u obliku teksta.
- Uredihtml- kliknite desnim tasterom miša na stavku u konzoli Elementi, izaberite Uredihtml, promijenite kod po svom ukusu.
- KopirajasHtml- kopirajte HTML dio koji nam je potreban za daljnje istraživanje, recimo, u notepad, ili u druge svrhe gdje trebamo primijeniti potpuno isti izgled. Štedimo vreme.
- KopirajXPATH- kopira XPATH reprezentaciju strukture iz korijena roditeljskog elementa u odabrani element.
- Izbrišičvor- ako trebate ukloniti trenutno odabrani element i svu njegovu djecu iz konteksta web stranice i vidjeti rezultat.
- Riječzamotati- će prikazati prikaz web stranice u kontekstu konzole Elementičitljiviji.
U sljedećim člancima nastavit ćemo razmatranje alata za webmastera, a posebno ćemo se upoznati s ostalim karticama alata za webmastera u Google chrome, a također razmotrite otklanjanje grešaka u javascriptu koristeći različite pretraživače
