Dugo mi je opcija “prikaži izvorni kod stranice” bila beskorisna i nezanimljiva. Do sada učenje HTML-a na Codecademy-u i izgled mojih web stranica nije prerastao u moj novi hobi. Ovdje se postavilo pitanje: gdje pronaći stvarne slučajeve i posuditi zanimljiva rješenja za svoju "kasicu-prasicu"? Odgovor je bio neočekivano jednostavan, kao i sve genijalno: pogledajte izvorni kod stranice u Google Chrome-u! Dijelim sa vama svoje skromne nalaze.
Šta je izvorni kod stranice
Ako i vi, poput mene, tek pravite prve korake u HTML-programiranju, neće biti suvišno saznati koji je izvorni kod stranice.
Izvorni kod, također poznat kao HTML kod stranice, je tekst u jeziku za označavanje hiperteksta (HTML). Uključuje stvarni sadržaj stranice (tekst, tabele) i oznake. Potonje djeluju kao upute za pretraživač: kako prikazati sadržaj, kakvo formatiranje koristiti, gdje umetnuti hipervezu ili medijsku datoteku. Pa, za nas, programere početnike, izvorni kod je najbolji teren za obuku: pronađemo zanimljivu stranicu i špijuniramo je, sačuvamo, koristimo uspješne fragmente. Kako?
Kako vidjeti izvorni kod na stranici preglednika Google Chrome
Pronađite stranicu koja vam se sviđa. Na primjer, mene je zanimao dizajn menija stranice. Postoje tri načina za otvaranje izvornog koda u pregledniku Google Chrome:
- Kliknite na ikonu meni u gornjem desnom uglu pretraživača i izaberite stavku "Dodatni alati". Između ostalog, tu je i opcija "Prikaži izvorni kod". Iskreno, rijetko koristim ovu metodu: puno nepotrebnih pokreta. To se može učiniti još lakšim.
- Pritisnite kombinaciju tastera Ctrl + U- otvara se novi prozor sa izvornim kodom;
- Za ljubitelje kontekstnog menija: kliknite desnim tasterom miša na stranicu i izaberite opciju "Prikaži kod stranice".
Mi smo se nosili sa zadatkom pregleda HTML koda stranice u pretraživaču. Pređimo na najzanimljiviju fazu.
Kako urediti i sačuvati izvorni kod
Da biste naučili kako da kreirate sajtove, nije dovoljno pročitati tuđi HTML kod. Morate se igrati s njim, eksperimentirati, unositi izmjene i provjeriti rezultat. Možete čak započeti sastavljanjem nekoliko dobrih primjera. Kako da uredim i sačuvam izvorni kod?
Opcija 1. "Ručno"
Nakon što smo otvorili izvorni kod stranice, pozivamo kontekstni meni i biramo opciju "Sačuvaj kao" i čuvamo datoteku na hard disku. Uređujemo datoteku u Notepad-u ili Notepad-u, pohranjujemo promjene i otvaramo je putem pretraživača. Rezultati naših promjena (dobri i loši) će se odraziti u prozoru pretraživača.
Opcija 2. Za profesionalce
Kada se svaki dan “igrate” sa izvornim kodom, proces “spremi – otvori – promijeni – sačuvaj – provjeri” je zamoran. Za sebe sam pronašao rješenje u vidu instaliranja dodatka za Google Chrome - Firebug Lite. Omogućava vam da uredite i sačuvate izvorni kod bez napuštanja prozora pretraživača.
Potrebno je brzo sagledati sve promjene na samom sajtu, bez uticaja na fajlove i kod sajta postavljene na Internet. Na primjer, promijenite shemu boja bloka, pomjerite pokretni element, itd.
Da bi to učinili, mnogi webmasteri koriste lokalne servere Denwer ili OpenServer, pokrećući punu kopiju stranice na svom računalu. Ova metoda je univerzalna i prikladna za profesionalce, uz pomoć nje možete provjeriti rad različitih skripti i dodataka, eksperimentirati s promjenom dizajna i uređivati sve datoteke web stranice, a nakon testa prenijeti odgovarajuće izmjene direktno na stranicu.
Za korisnike koji su daleko od umjetnosti webmastera, preporučujem korištenje pretraživača u ove svrhe. Pošto koristim Chrome, daću uputstva sa snimcima ekrana za ovaj konkretan pretraživač. Po analogiji, možete raditi s Opera, Yandex Browser, Mozilla Firefox i drugim pretraživačima, princip njihovih alata je sličan.
Upute 1: kako vidjeti cijeli HTML kod web stranice u pretraživaču
Otvorite potrebnu web stranicu za svoju web stranicu. Desnom tipkom miša kliknite na traženi element, pojavit će se kontekstni padajući meni pretraživača sa dostupnim komandama:
Slika 1. Pregled cijelog HTML koda web stranice u Chrome pretraživaču
Bitan: Komande u padajućem meniju mogu se razlikovati, na primjer, za aktivne elemente (linkovi, slike, video zapisi) i neaktivne (tekst, pozadina, dive):
Slika 2. Padajući meni preglednika Chrome
Stoga, ako niste pronašli potrebnu komandu, samo kliknite desnim tasterom miša na drugom mestu ili koristite prečice pretraživača.
Vraćajući se na sliku 1, prikazuje potrebnu naredbu za pregled cijelog HTML koda originalne web stranice, zove se “ Pogledajte kod stranice". Kliknemo na naredbu, otvara se nova kartica sa punim kodom originalne web stranice, veliki plus za sve - pregled je dostupan sa isticanjem sintakse:
Slika 3. Fragment koda ovog sajta
Ovaj alat je vrlo koristan za pronalaženje i uređivanje stavki koje tražite.
Alternativni načini za pregled cijelog HTML koda web stranice
Za brži pristup možete koristiti druge metode pozivanja ovog alata
- Na slici 1 takođe vidimo da je ova komanda dostupna preko prečice na tastaturi + ;
- Umetnite u adresnu traku pretraživača view-source: site umjesto moje domene, unesite svoju adresu;
Obje metode su univerzalne i trebale bi raditi u svim pretraživačima.
U početku će se nekima učiniti da ovo uopće nije neophodan alat, ali pregled cijelog HTML koda stranice je odličan za pronalaženje potrebnih elemenata u kodu, to mogu biti linkovi, tagovi, meta tagovi, atributi i ostali elementi.
Kombinacija prečica +otvorite okvir za pretragu, u Chrome pretraživaču se pojavljuje u gornjem desnom uglu:
Slika 3. Pretraživanje prema kodu stranice
Nakon što unesete upit u obrazac za pretragu, ekran će se pomaknuti na prvi pronađeni element, pomoću strelica možete se kretati između njih i odabrati željeni:
Slika 4. Pretraga po HTML kodu stranice
Uputstvo 2: kako pregledati i urediti HTML i CSS kod stranice u pregledniku Google Chrome
Sada za najvažniji dio, u kojem ću pokazati kako možete urediti HTML i CSS kod stranice u pretraživaču. zatim prenesite promjene u pretraživač.
Ovako korisna alatka je uvijek dostupna u vašem pretraživaču, eksperimentirajte s drugim komandama koje će vam olakšati uređivanje stranice.
Ako otvorite bilo koju web stranicu, ona će sadržavati tipične elemente koji se ne mijenjaju ovisno o vrsti i fokusu stranice. Primjer 4.1 pokazuje kod za jednostavan dokument koji sadrži osnovne oznake.
Primjer 4.1. Izvorni kod web stranice
Uzorak web stranice
Naslov
Prvi paragraf.
Drugi paragraf.
Kopirajte sadržaj ovog primjera i sačuvajte ga u folderu c: \ www \ kao example41.html. Nakon toga pokrenite pretraživač i otvorite datoteku kroz stavku menija Datoteka> Otvori datoteku (Ctrl + O)... U dijaloškom okviru Select Document navedite datoteku example41.html. Web stranica prikazana na slici 4 će se otvoriti u vašem pretraživaču. 4.1.
Rice. 4.1. Primjer rezultata izvršenja
Elementsluži za označavanje tipa tekućeg dokumenta - DTD (definicija tipa dokumenta, opis tipa dokumenta). Ovo je neophodno da bi pretraživač shvatio kako da interpretira trenutnu web stranicu, jer HTML postoji u nekoliko verzija, a postoji i XHTML (EXtensible HyperText Markup Language), koji je sličan HTML-u, ali se od njega razlikuje po sintaksi. Kako se pretraživač ne bi "zbunio" i shvatio po kom standardu da prikaže web stranicu i potrebno je postaviti u prvom redu koda
.
Postoji nekoliko tipova, razlikuju se ovisno o verziji HTML-a na koju ciljaju. Table 4.1. navodi glavne vrste dokumenata sa njihovim opisima.
Tab. 4.1. Važeći DTD | DOCTYPE |
Opis |
|---|
| HTML 4.01
|
|
|
Stroga HTML sintaksa. |
|
|
Prijelazna HTML sintaksa. |
|
|
U HTML dokumentu se koriste okviri. |
| HTML 5
|
|
|
U ovoj verziji HTML-a postoji samo jedan tip dokumenta. |
| XHTML 1.0
|
|
|
Jaka XHTML sintaksa. |
|
|
Prijelazna XHTML sintaksa. |
|
|
Dokument je napisan u XHTML-u i sadrži okvire. |
| XHTML 1.1
|
|
|
Programeri XHTML 1.1 predviđaju da će postepeno zamijeniti HTML. Kao što vidite, ova definicija nema podjelu na tipove, jer je sintaksa ista i poštuje jasna pravila. |
Razlika između strogih i prolaznih opisa dokumenata je različit pristup pisanju koda dokumenta. Strogi HTML zahtijeva striktno pridržavanje HTML specifikacije i neumoljiv je. Prijelazni HTML je više "opušten" u pogledu nekih nedostataka u kodu, tako da je ovaj tip poželjniji u određenim slučajevima.
Na primjer, u strogom HTML-u i XHTML-u, oznaka
može se izostaviti ili izostaviti u prelaznom HTML-u. Istovremeno, imajte na umu da će pretraživač u svakom slučaju prikazati dokument, bez obzira da li se podudara sa sintaksom ili ne. Takva provjera se provodi pomoću validatora i namijenjena je prvenstveno programerima da prate greške u dokumentu.</p>
<p>U nastavku ćemo uglavnom koristiti strict<!DOCTYPE>, osim ako nije drugačije navedeno. Ovo će nam omogućiti da izbjegnemo uobičajene greške i naučimo nas pisati sintaktički ispravan kod.</p>
<p>Često je moguće pronaći HTML kod bez upotrebe<!DOCTYPE>, web stranica će i dalje biti prikazana u tom slučaju. Međutim, može se desiti da se isti dokument prilikom korišćenja prikaže drugačije u pretraživaču<!DOCTYPE>i bez toga. Osim toga, pretraživači mogu prikazati takve dokumente na svoj način; kao rezultat toga, stranica će se "srušiti", tj. će biti prikazan na potpuno drugačiji način nego što to programer želi. Da biste izbjegli ovakve situacije, uvijek dodajte<!DOCTYPE>na početak dokumenta.</p><p>Tag <html>definira početak HTML datoteke, unutar njega je zaglavlje ( <head>) i tijelo dokumenta ( <body>
).</p><p>Naslov dokumenta, kako se i blok naziva <head>, može sadržavati tekst i oznake, ali sadržaj ovog odjeljka nije prikazan direktno na stranici, osim spremnika <title>
.</p><p>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</p><p>Tag <meta>je univerzalan i dodaje čitavu klasu mogućnosti, posebno koristeći meta tagove, kako se ova oznaka općenito naziva, možete promijeniti kodiranje stranice, dodati ključne riječi, opis dokumenta i još mnogo toga. Kako bi pretraživač shvatio da radi sa UTF-8 kodiranjem (Unicode transformacijski format), dodaje se ovaj niz.</p><p>
<title>Uzorak web stranice
Tag
definira naslov web stranice, ovo je jedan od važnih elemenata dizajniranih za rješavanje mnogih problema. U operativnom sistemu Windows, tekst naslova se prikazuje u gornjem levom uglu prozora pretraživača (slika 4.2).</p>
<p><img src='https://i2.wp.com/htmlbook.ru/files/images/samhtml/fig_1_04_02.png' height="37" width="194" loading=lazy loading=lazy></p>
<p>Rice. 4.2. Pogled zaglavlja pretraživača</p>
<p>Tag <title>je obavezan i mora biti prisutan u kodu dokumenta.</p><p>Obavezno dodajte završnu oznaku</head> da označi da je naslovni blok dokumenta završen.</p><p>Tijelo dokumenta <body>je namijenjen za smještaj oznaka i sadržaja web stranice.</p><p>
<h1>Naslov</h1>
</p><p>HTML nudi šest različitih nivoa tekstualnih naslova koji ukazuju na relativnu važnost odjeljka nakon naslova. Dakle, oznaka <h1>predstavlja najvažniji naslov prvog nivoa i oznaku <h6>služi za označavanje naslova šestog nivoa i najmanje je značajan. Podrazumevano, naslov prvog nivoa se prikazuje najvećim podebljanim slovima, naslovi sledećeg nivoa su manje veličine. Oznake <h1>...<h6>su blok elementi, uvijek počinju u novom redu, a nakon njih ostali elementi se prikazuju u sljedećem redu. Osim toga, razmak se dodaje ispred i iza naslova.</p><p>
<!-- Комментарий -->
</p><p>Neki tekst se može sakriti od prikaza u pretraživaču ostavljanjem komentara. Iako korisnik neće vidjeti takav tekst, on će se i dalje prenositi u dokumentu, tako da gledajući izvorni kod možete pronaći skrivene bilješke.</p>
<p>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.</p>
<p>Da biste došli do konzole, otvorite svoju web stranicu u Google Chromeu, kliknite desnim tasterom miša bilo gdje na web stranici i odaberite View Page Code iz kontekstnog padajućeg menija ili na određenu stavku za istraživanje odabirom View Code elementa " .</p>
<p>Na vrhu ćete imati nekoliko navedenih kartica. Danas ćemo govoriti o kartici "Elementi". <b>,
</b> 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.</p>
<h3>Kako mogu vidjeti sve stilove koji su povezani sa određenim elementom? Koji se sada primjenjuje? U kojim fajlovima se nalaze?</h3>
<p>Dakle, ništa lakše! Otvaramo pretraživač 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.</p>
<p>Na dnu imamo konzolu sa označenom karticom na lijevoj strani "Elementi" i svim stilovima povezanim sa elementom na desnoj strani, gdje: <b>Computed Styles</b>- 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.</p>
<p>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).</p>
<p>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.</p>
<h3>Html oznaka nije vidljiva u kontekstu stranice? Ili trebate pronaći sve oznake, na primjer, prema određenoj klasi, imenu, svojstvu, tipu?</h3>
<p>Otvorite stranicu u Google Chromeu, kliknite desnim tasterom miša, otvorite kontekstni meni, odaberite <b>«
</b> Pogledajte kod stranice <b>»
</b>... Istovremeno pritisnite kombinaciju tipki "CTRL + F", unesite frazu koja nam je potrebna ( <b>Na primjer</b><i>:
</i><i>klasa = "</i><i>padding "</i>) i navigirajte kroz listu pronađenih rezultata, usput pregledavajući sve stilove povezane sa željenim elementima na desnoj strani stranice.</p>
<h3>Kako vidjeti html kod elementa(a) koji se dinamički učitavaju (na primjer: od strane Ajaxa)</h3>
<p>Č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.</p>
<h3>Pogledajte promjene u css stilovima u realnom vremenu</h3>
<p>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 <b>stil</b> odabrani element u prozoru na kartici "Elementi".</p>
<h3>Pregled uživo efekta css pravila na prezentaciju html tagova</h3>
<p>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.</p>
<h3>Promjena strukture prezentacije html elemenata u hodu (pravo u pretraživaču)</h3>
<p>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:</p>
<ul><li><b>Dodaj atribut</b>- dodaje atribut za navedeni element. Čim kursor postane aktivan, počinjemo postavljati željeno svojstvo. <b>na primjer</b>: napišemo name = "itemImage", koji će odmah biti dodan našoj stavci.</li>
<li><b>Uredi atribut</b>- ako desnom tipkom miša kliknete na atribut elementa, stavka postaje dostupna <b>edit</b><b>atribut</b>... Kliknite, uredi.</li>
</ul><p><b>Primjer upotrebe:</b> 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" <b>,
</b> u konzoli na lijevoj strani kartice <b>Elementi</b> kliknite na tip atributa = "lozinka" desnim dugmetom miša, levim klikom na <b>Uredi</b><b>atribut,</b> mijenjanje atributa <i>tip = "</i><i>lozinka "</i> na <i>tip = "</i><i>tekst "</i>, a sada se umjesto zvjezdica prikazuje ista lozinka u obliku teksta.</p>
<ul><li><b>Uredi</b><b>html</b>- kliknite desnim tasterom miša na stavku u konzoli <b>Elementi</b>, izaberite <b>Uredi</b><b>html,</b> promijenite kod po svom ukusu.</li>
<li><b>Kopiraj</b><b>as</b><b>Html</b>- kopiramo HTML dio koji nam je potreban za dalje istraživanje, recimo, u notepad, ili u druge svrhe gdje trebamo primijeniti potpuno isti izgled. Štedimo vreme.</li>
<li><b>Kopiraj</b><b>XPATH</b>- kopira XPATH reprezentaciju strukture iz korijena roditeljskog elementa u odabrani element.</li>
<li><b>Izbriši</b><b>čvor</b>- ako trebate ukloniti trenutno odabrani element i svu njegovu djecu iz konteksta web stranice i vidjeti rezultat.</li>
<li><b>Riječ</b><b>zamotati</b>- će prikazati prikaz web stranice u kontekstu konzole <b>Elementi</b>čitljiviji.</li>
</ul><p>U sljedećim člancima nastavit ćemo razmatranje alata za webmastera, a posebno ćemo se upoznati s ostalim karticama alata za webmastera u <b>Google chrome</b>, a također razmotrite otklanjanje grešaka u javascriptu koristeći različite pretraživače</p>
<p>Programeri pretraživača pobrinuli su se za pogodnost onih koji kreiraju stranice koje se otvaraju u tim istim pretraživačima, odnosno o webmasterima. Standardnim funkcijama su dodali alate za razvojne programere, pomoću kojih možete lako otvoriti i <b>pogledajte izvorni kod stranice web stranice u pretraživaču</b>: HTML, CSS, JavaScript (JS), dobijate razne korisne podatke o strukturi sajta, vršite njegovu tehničku analizu. Općenito, vidjeti puno korisnih stvari.</p>
<p>Naravno, ove alate ne koriste samo kreatori stranica za rad, već i obični korisnici koji mogu vidjeti razne korisne podatke uz izvorni kod.</p>
<p>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).</p>
<i>
</i>
<h2>Kako otvoriti izvorni kod stranice u pretraživaču</h2>
<p>Postoje dva načina da otvorite izvorni kod web stranice u pretraživaču:</p>
<ol><li>Korištenje vrućih tipki;</li>
<li>Otvorite iz kontekstnog menija.</li>
</ol><p><b>Ctrl + U</b>- 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.</p>
<p>Također možete unijeti alate za programere na sljedeći način:</p>
<p>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.</p>
<p>Video uputstvo:</p>
<p><span class="dmruvuTBwxg"></span></p>
<h2>Pogledajte šifru artikla | istražiti predmet | pregledati predmet</h2>
<p>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.</p>
<p><b>Kako vidjeti kod elementa na stranici:</b></p>
<br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Proinspektirovat-otdelnyy-element.png' width="100%" loading=lazy loading=lazy><p>Osim toga, možete koristiti prečice na tipkovnici za brzi pristup pregledu elemenata.</p>
<p>Vrući tasteri (dugmad):</p>
<p>Google Chrome: Ctrl + Shift + I i Ctrl + Shift + C</p>
<p>Opera: Ctrl + Shift + I i Ctrl + Shift + C</p>
<p>Mozilla Firefox: Ctrl + Shift + I i Ctrl + Shift + C</p>
<p>Yandex pretraživač: Ctrl + Shift + I i Ctrl + Shift + C</p>
<p>Nakon poduzetih radnji, izvorni kod web stranice će se otvoriti u istom prozoru preglednika:</p>
<br><img src='https://i0.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-HTML-CSS-kod-sayta.png' width="100%" loading=lazy loading=lazy><p>Sav HTML kod će biti u lijevoj velikoj koloni. A CSS stilovi su na desnoj strani.</p>
<br><img src='https://i2.wp.com/urfix.ru/wp-content/uploads/2018/11/Posmotret-css-stili-v-brauzere.png' width="100%" loading=lazy loading=lazy><p>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.</p>
<p>Ovaj video tutorijal sadrži detalje i pokazuje vam kako raditi s alatima za programere:</p>
<p><span class="DQMK8CuXkOg"></span></p>
<p>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.</p>
<p>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 🙂</p>
<h2>Kako pogledati izvorni kod na Android telefonu</h2>
<p>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.</p>
<p>Da biste to učinili, dodajte prefiks izvora prikaza URL-u provjerene stranice:</p>
<p>Na primjer:</p>
<p>view-source: https: // site / turbo-rezhim-opera /</p>
<p><span class="N9JyJMmIZr8"></span></p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
<div class="post-social-counters-block">
<div style="margin-top: 12px">
<noindex></noindex>
</div>
</div>
</div>
</div>
<a name="comments"></a>
<h3 class="best-theme-posts-title">Top srodni članci</h3>
<div class="container-fluid">
<div class="best-theme-posts row">
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/plagin-login-lockdown-plagin-bezopasnosti-wordpress-login-lockdown-zashchita-ot-vzloma.html">
<div class="img_container"><img src="/uploads/ddd96e1fe61f4f0316eea4ceb1e5d693.jpg" border="0" alt="Sigurnosni dodatak za zaključavanje prijave za WordPress - zaštita od hakovanja" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Sigurnosni dodatak za zaključavanje prijave za WordPress - zaštita od hakovanja</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/kak-napisat-statyu-v-zhzh-birzhi-kopiraitinga-pokupka-i-prodazha-statei.html">
<div class="img_container"><img src="/uploads/c725641f15d5842a361a6f7b007fa2e2.jpg" border="0" alt="Burze za pisanje tekstova - kupovina i prodaja artikala" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Burze za pisanje tekstova - kupovina i prodaja artikala</span>
</a>
</div>
<div class="theme-post col-sm-4">
<a href="https://bumotors.ru/bs/sozdat-formu-dlya-izmeneniya-spiskov-sharepoint-designer-sozdanie-nastraivaemoi-formy.html">
<div class="img_container"><img src="/uploads/e280c7af6ea204c681aa0193ff832141.jpg" border="0" alt="Kreirajte prilagođeni obrazac liste koristeći SharePoint Designer" width="320" height="180" / loading=lazy loading=lazy></div>
<span class="theme-post-link">Kreirajte prilagođeni obrazac liste koristeći SharePoint Designer</span>
</a>
</div>
</div>
</div>
</div>
<a name="comments"></a>
</div>
<div class="right-column col-sm-4 col-md-4">
<div class="write">
<span class="tags-title">Kategorije:</span>
<ul style="height: 286px;" id="right-tags" data-tagscount="18" data-currentmaxtag="10" class="tags">
<li class=""><a href="https://bumotors.ru/bs/category/programs/">Programi</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/safety/">Sigurnost</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/windows-10/">Windows 10</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/iron/">Iron</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/windows-8/">Windows 8</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/vkontakte/">U kontaktu sa</a></li>
<li class=""><a href="https://bumotors.ru/bs/category/errors/">Greške</a></li>
</ul>
</div>
<div class="banner">
</div>
</div>
</div>
</div>
<div style="clear:both"></div>
</div>
<div class="footer">
<div class="subscribe">
<div class="main-wrapper container">
<div class="row">
<div class="col-sm-8">
</div>
<div class="col-sm-4">
<div class="social">
<a href="" class="vk social-ico"></a>
<a href="https://facebook.com/" class="fb social-ico"></a>
<a href="https://twitter.com/" class="tw social-ico"></a>
</div>
</div>
</div>
</div>
</div>
<div class="info">
<div class="main-wrapper container">
<div class="row">
<span class="footer-info col-xs-12">© 2022 bumotors.ru. Kako podesiti pametne telefone i računare. Informativni portal.</span>
</div>
</div>
</div>
</div>
</body>
</html> 