Cod sursă cheie. Cum se deschide codul sursă al unei pagini

Am lansat o nouă carte, Social Media Content Marketing: How to Get Inside Your Followers' Heads and Make them to Love with Your Brand.

Codul sursă al unui site este o colecție de markup HTML, stiluri CSS și scripturi JavaScript pe care browserul le primește de la serverul web.

Mai multe videoclipuri pe canalul nostru - învață marketing pe internet cu SEMANTICA

Poate fi comparat cu un set de comenzi date soldaților de către un comandant. Imaginați-vă că publicul nu îl vede și nu îl aude pe șeful. Din punctul lor de vedere, militarii desfășoară acțiuni în mod independent. În cazul nostru, comandantul este browserul, comenzile sunt codul sursă, iar soldații în marș sunt rezultatul final.

Site-ul este stocat pe un server web, care trimite pagina la cererea utilizatorului. O solicitare înseamnă introducerea unei adrese URL în bara de adrese, clic pe un link sau clic pe un buton de trimitere dintr-un formular. Nu contează în ce limbă sunt scrise paginile web sau dacă includ o componentă software. Rezultatul final al oricărui algoritm de pe partea serverului este un set de etichete HTML și text.
Codul sursă al paginii este un set de date care include:

marcaj html;
foaie de stil sau link la fișier;
programe scrise în JavaScript sau link-uri către fișiere cu cod.

Aceste trei secțiuni sunt procesate de browser. Pentru server, acesta este pur și simplu textul care trebuie trimis ca răspuns la cerere.

De ce ar putea fi nevoie să studiem codul sursă

Tot ceea ce vedem, putem analiza și aplica pentru a rezolva anumite probleme care apar în timpul lucrului cu site-ul, mai ales la optimizarea acestuia. Privind codul sursă, putem:

Vedeți metaetichetele site-ului dvs. sau al altcuiva pentru a le analiza.
Vedeți prezența sau absența anumitor elemente pe site: contoare, coduri de identificare în diverse sisteme, anumite scripturi și alte lucruri.
Aflați parametrii elementelor: dimensiuni, culori, fonturi.
Găsiți calea către fotografii și alte elemente aflate pe pagină.
Explorați linkurile din pagină.
Găsiți probleme cu codul care interferează cu procesul de optimizare a site-ului: stiluri care nu sunt plasate în fișiere separate, scripturi, cod invalid.

Acestea sunt caracteristicile de bază, dar, de fapt, prin posibilitatea de a citi codul, puteți afla multe mai multe despre pagină.

Cum să vizualizați codul sursă al unui site

Nu va fi posibil să faceți acest lucru complet în forma în care este postat pe server din browser. Dar puteți vedea toate marcajele făcând clic dreapta pe pagină. Aici și mai jos folosind Google Chrome ca exemplu.

Selectați opțiunea „Vizualizare codul paginii” și obțineți lista completă într-o filă separată.

Este doar un text pe care trebuie să îl analizezi pentru a-l înțelege. Dar puteți obține cod interactiv folosind instrumentele pentru dezvoltatori.

Cum să găsiți codul sursă al unei pagini de site web

Faceți clic pe pictograma meniului din browser. Cel mai adesea este în dreapta și arată ca trei puncte sau dungi.

În secțiunea de instrumente suplimentare, selectați „Instrumente pentru dezvoltatori”.

Se va deschide o fereastră care arată starea activă a codului. Aceasta înseamnă că atunci când faceți clic pe marcaj, stilul elementului va apărea lângă acesta, iar blocurile selectate vor fi evidențiate pe pagină.

În fila „Sursă” puteți vizualiza conținutul unor fișiere: scripturi, fonturi, imagini.

În fila „Securitate”, puteți verifica certificatul site-ului.

Fila „Audituri” vă va ajuta să verificați resursa postată pe găzduire.

Dacă locația panoului din dreapta este incomod, puteți face clic pe cele trei puncte și îl puteți modifica selectând elementul dorit.

Cum să vizualizați metaetichetele

Fiecare document HTML include etichete de structură. Aici sunt câțiva dintre ei:

HTML – întregul document.
Head – secțiunea antetelor de serviciu.
Titlu – titlul paginii (afisat pe fila).
Corp – corpul documentului.
H1-H6 – titlurile textului paginii.
Articol – articol.
Sectiune - sectiune.
Meniu – meniu.
Div – bloc.
Span – sfoară.
P – paragraful.
Masa – masa.

Elementele sunt concepute pentru a delimita logic secțiuni pe o pagină, dacă este necesar, sunt proiectate folosind stiluri; Acestea conțin text care este cumva vizibil pe pagină. Dar eticheta Head conține informații de serviciu. Meta-etichetele sunt folosite pentru a indica acest lucru. Tot ceea ce este scris în ele este destinat serverului și motoarelor de căutare.

Conținutul lor nu poate fi aflat în niciun alt mod.

Să acordăm atenție etichetei Link. Cu ajutorul acestuia, sunt specificate link-uri către fișiere externe incluse. Dacă doriți, puteți vedea conținutul și puteți salva pe disc. Pentru a face acest lucru, mutați indicatorul la adresă și apăsați RMB. Selectați „Deschideți într-o filă nouă”.

Fișierul specificat se va deschide într-o filă nouă, pe care o puteți vizualiza sau salva.

Cum să vizualizați codul sursă al unei pagini pentru a depana un script

În acest caz, cel mai convenabil este să deschideți pagina pe mașina locală. Dacă trebuie doar să corectați marcajul, stilurile și scripturile, atunci acest lucru se poate face direct din folder. Codul HTML este vizualizat în același mod. Dar erorile de cod JavaScript pot fi văzute în fila „Consolă”. Aceasta arată descrierea erorii și numărul rândului în care a apărut.

Sintaxa poate fi văzută direct în cod. Pentru asta este fila „Sursă”.

Cum să vizualizați codul unui anumit element

Pentru paginile mari cu multe elemente, este dificil să găsești codul necesar în toate markupurile. În acest caz, ar trebui să utilizați o comandă specială din meniu contextual. Deplasați mouse-ul peste fragment și apăsați RMB. Selectați comanda „Vizualizare cod”.

Se va deschide aceeași fereastră, dar cu accent pe obiectul selectat.

rezumat

V-am spus care este codul sursă al paginii. Este suficient să stăpâniți cunoștințele de bază despre HTML și CSS și, folosind instrumente convenabile pentru dezvoltatori, veți putea să vă depanați propriile documente HTML.

Revizuirea codului de resurse de pe Internet vă va permite să învățați nu numai din propria experiență, ci și să folosiți exemple reale de lucru. Iar pentru specialiștii SEO vor fi utile meta tag-urile, informațiile în care pot spune multe despre site.

Așadar, astăzi ne vom uita la câteva instrumente utile pentru webmasteri care ușurează viața atunci când proiectează un site web. Să începem cu consola pentru web master în Google Chrome. Și să trecem prin întrebările care apar cel mai adesea unui webmaster în timpul amenajării site-ului.

Pentru a ajunge la consolă, deschideți site-ul dvs. în Google Chrome, faceți clic dreapta oriunde pe pagina web și selectați „Vizualizare codul paginii” în meniul derulant contextual sau pe un anumit element de studiat selectând „Vizualizați codul” element".

În partea de sus veți avea listate mai multe file. Astăzi vom vorbi despre fila „Elemente”. , care prezintă elementele unei pagini web cu evidențierea etichetelor, proprietăților, evidențierea imbricației elementelor, o reprezentare a ierarhiei elementului în arborele DOM (un indiciu în jos, de la părintele rădăcină la cel curent), capacitatea pentru a edita elemente, o listă a proprietăților lor, luați în considerare căutarea după elemente, precum și Să ne familiarizăm cu vizualizarea stilurilor CSS etc., asociate elementelor.

Cum pot vedea toate stilurile care sunt asociate cu un anumit element? Care este folosit acum? În ce fișiere se află?

Deci, nimic nu poate fi mai ușor! Deschideți browserul Google Chrome, deschideți site-ul nostru web - sursa întrebărilor, faceți clic dreapta pe elementul dorit dacă este vizibil în contextul paginii și selectați „Vizualizare cod element” în meniul contextual.

În partea de jos avem o consolă cu o filă evidențiată în stânga „Elemente” și toate stilurile asociate cu elementul din dreapta, unde: Stiluri calculate– acestea sunt stiluri generale „rezumat” care au fost atribuite elementului din regulile și setările css ale browserului utilizatorului (mediul său) și în același timp fila este restrânsă.

Dar ne interesează fila „Stiluri”, extinsă sub ea, care listează pe rând toate stilurile alocate elementului, precum și fișierele în care aceste reguli sunt specificate pentru acest element după tipul, id-ul, clasa, numele, proprietatea acestuia. , atribut etc. Mai mult, dacă o regulă css este tăiată, înseamnă că a fost redefinită mai devreme/mai târziu (ceea ce face ușor de urmărit care dintre regulile css are prioritate și este aplicată în acest caz elementului).

Sub consolă există o linie care arată elementul din ierarhia documentului, permițându-vă ușor să vizualizați întreaga listă de elemente părinte de la rădăcină la elementul selectat. Ceva de genul „pesmet”.

Eticheta HTML nu este vizibilă în contextul paginii? Sau trebuie să găsiți toate etichetele, de exemplu, după o anumită clasă, nume, proprietate, tip?

Deschideți site-ul în Google Chrome, faceți clic dreapta, apelați meniul contextual, selectați « Vizualizați codul paginii » . Apăsați combinația de taste „CTRL + F” în același timp, introduceți expresia de care avem nevoie ( De exemplu: clasa=”umplutura") și treceți prin lista rezultatelor găsite, vizualizând simultan toate stilurile asociate elementelor dorite în partea dreaptă a paginii.

Cum să vizualizați codul html al unui element (ele) încărcat dinamic (de exemplu: prin Ajax)

Asteptam ca pagina sa se incarce in Google Chrome. Efectuăm acțiunile necesare pentru ca Ajax să funcționeze. Faceți clic dreapta pe datele încărcate, selectați „Vizualizare cod element” în meniul contextual și examinați rezultatul în consolă din fila „Elemente” din stânga.

Vedeți modificările stilului CSS în timp real

Apropo, este, de asemenea, convenabil să observați, dacă este necesar, ce stiluri sunt atribuite unui element din mers, de exemplu, atunci când defilați printr-o galerie și alte evenimente cu cronometru. Toate stilurile atribuite prin javascript în timp real vor fi afișate în proprietate stil elementul selectat în fereastra din fila „Elemente”.

Vizualizați interactiv impactul regulilor css asupra prezentării etichetelor html

Google Chrome oferă o consolă interactivă pentru stilurile CSS. Aceasta înseamnă că nu puteți doar să vedeți ce stiluri sunt aplicate elementului, ci și să mutați cursorul mouse-ului peste o anumită proprietate CSS, să o activați folosind caseta de selectare pop-up din dreapta sau să o dezactivați prin ștergerea steagului și vizualizați rezultatul rezultat pe pagină.

Schimbăm structura de prezentare a elementelor html din mers (direct în browser)

Deci, am învățat deja cum să explorăm structura unui document web în Google Chrome, acum ne vom uita pe scurt la editarea elementelor din mers. Mergem la consolă în orice mod convenabil pentru noi. Găsim elementul dorit în fila „Elemente”, faceți clic dreapta pe el, apelând astfel meniul contextual pop-up:

Adăugați un atribut– adaugă un atribut pentru elementul specificat. De îndată ce cursorul devine activ, începem să setăm proprietatea dorită. De exemplu: scrieți name="itemImage", care va fi adăugat imediat la elementul nostru.
Editați atributul– dacă faceți clic dreapta pe un atribut de element, articolul devine disponibil Editați | ×atribut. Faceți clic și editați.

Exemplu de utilizare: Am uitat parola salvată sub asteriscuri în Google Chrome (dacă parola a fost salvată în acest browser). Faceți clic dreapta pe elementul cu parola introdusă, faceți clic pe „Vedeți codul elementului” , în consola din fila din stânga Elemente faceți clic dreapta pe atributul type="parolă", faceți clic stânga pe Editați | ×atribut schimba atributul tip=”parola" pe tip=”text", iar acum, în loc de asteriscuri, aceeași parolă este afișată sub formă de text.

Editați | ×html– faceți clic dreapta pe elementul din consolă Elemente, Selectați Editați | ×html, schimba codul dupa bunul plac.
Copiela fel deHTML– copiem porțiunea de HTML de care avem nevoie pentru cercetări ulterioare, să zicem, într-un bloc de note, sau pentru alte scopuri în care trebuie să aplicăm exact același aspect. Economisim timp.
CopieXPATH– copiează reprezentarea XPATH a structurii de la rădăcina elementului părinte în elementul selectat.
Ștergenodul– dacă trebuie să eliminați elementul selectat curent și toți copiii acestuia din contextul paginii web și să vedeți rezultatul.
Cuvântînfășura– va reda o vizualizare a paginii web în contextul consolei Elemente mai lizibil.

În următoarele articole vom continua să luăm în considerare instrumentele pentru webmasteri și, în special, ne vom familiariza cu filele rămase de instrumente pentru webmasteri în Google Chrome, și luați în considerare, de asemenea, depanarea erorilor javascript utilizând browsere diferite

Trebuie să vedeți rapid toate modificările de pe site-ul în sine, fără a afecta fișierele și codul site-ului postat pe Internet. De exemplu, schimbați schema de culori a unui bloc, mutați un element care s-a mutat etc.

Pentru a face acest lucru, mulți webmasteri folosesc servere locale Denwer sau OpenServer, rulând o copie completă a site-ului pe computerul lor. Această metodă este universală și potrivită pentru profesioniști, poate fi folosită pentru a testa funcționarea diferitelor scripturi și plugin-uri, pentru a experimenta modificări de design și pentru a edita toate fișierele site-ului, iar după testare, pentru a transfera modificările corespunzătoare direct pe site.

Pentru utilizatorii care sunt departe de arta webmaster, recomand folosirea unui browser în aceste scopuri. Deoarece folosesc Chrome, voi oferi instrucțiuni cu capturi de ecran pentru acest browser special. Prin analogie, puteți lucra cu Opera, Yandex.Browser, Mozilla Firefox și alte browsere, principiul instrumentelor lor este similar.

Instrucțiunea 1: cum să vizualizați întregul cod HTML al unui site într-un browser

Deschideți pagina web necesară a site-ului dvs. Faceți clic dreapta pe elementul dorit, va apărea un meniu derulant contextual al browserului cu comenzile disponibile:

Figura 1. Vizualizarea întregului cod HTML al unei pagini web în browserul Chrome

Important: Comenzile din meniul derulant pot diferi, de exemplu, pentru elementele active (linkuri, imagini, videoclipuri) și cele inactive (text, fundal, div-uri):

Figura 2. Meniul derulant al browserului Chrome

Deci, dacă nu găsiți comanda de care aveți nevoie, faceți clic dreapta în altă parte sau utilizați tastele rapide ale browserului.

Să revenim la Figura 1, arată comanda necesară pentru a vizualiza tot codul HTML al paginii web sursă, se numește „ Vizualizați codul paginii". Faceți clic pe comandă, se va deschide o filă nouă cu codul complet al paginii web sursă, un mare plus pentru toate - vizualizarea este disponibilă cu evidențierea sintaxelor:

Figura 3. Fragment de cod al acestui site

Acest instrument este foarte util pentru găsirea și editarea elementelor pe care le căutați.

Modalități alternative de vizualizare a întregului cod HTML al unei pagini web

Pentru un acces mai rapid, puteți folosi alte modalități de a apela acest instrument

În Figura 1 vedem, de asemenea, că această comandă este disponibilă printr-o comandă rapidă de la tastatură + ;

Lipiți view-source:site în bara de adrese a browserului în loc de domeniul meu, introduceți adresa;

Ambele metode sunt universale și ar trebui să funcționeze în toate browserele.

La început, unii pot crede că acesta nu este deloc un instrument necesar, dar vizualizarea întregului cod HTML al unui site este grozavă pentru a găsi elementele necesare în cod, acestea pot fi linkuri, etichete, metaetichete, atribute și alte elemente. .

Combinație de taste rapide +deschide fereastra de căutare, în browserul Chrome apare în dreapta sus:

Figura 3. Căutare după codul site-ului

După ce introduceți o cerere în formularul de căutare, ecranul se va muta la primul element găsit, folosind săgețile vă puteți deplasa între ele și selectați pe cel de care aveți nevoie:

Figura 4. Căutare după codul site-ului HTML

Instrucțiunea 2: cum să vizualizați și să editați codul HTML și CSS al unui site în browserul Google Chrome

Acum partea cea mai importantă, în care voi arăta cum puteți edita codul HTML și CSS al unui site web într-un browser. apoi transferați modificările în browser.

Acest instrument util este întotdeauna disponibil în browserul dvs., experimentați cu alte comenzi care vă vor facilita editarea site-ului.

Probabilitatea de a privi inițiala cod web pagini, primit de browser ca urmare a unei solicitări către server, este disponibil practic în fiecare browser de internet. Accesul la comanda corespunzătoare este organizat aproximativ identic, dar există diferențe semnificative în metoda și forma în care inițial cod .

Instrucțiuni

1. În browserul Mozilla FireFox, extindeți secțiunea „Vizualizare” din meniu și faceți clic pe „Inițială” cod pagini" Același articol se află și în meniul contextual care apare dacă faceți clic dreapta pe text pagini. De asemenea, puteți utiliza combinația de taste CTRL + U. Mozilla FireFox nu folosește programe externe - inițial cod pagini cu evidențierea sintaxă va fi deschisă într-o fereastră separată a browserului.

2. În Internet Explorer, faceți clic pe meniul Fișier și selectați Editați în Notepad. În loc de numele Notepad, se poate scrie un alt program pe care l-ați atribuit în setările browserului pentru a vizualiza inițiala cod A. La clic pagini cu butonul drept al mouse-ului apare un meniu contextual, care are și un element care permite deschiderea inițialei cod paginiîntr-un program extern – „Vizualizare HTML- cod A".

3. În browserul Opera, deschideți meniul, accesați secțiunea „Pagină” și veți avea șansa de a selecta elementul „Start” din subsecțiunea „Instrumente de dezvoltare” cod"sau elementul "Initial cod cadru." Tastele rapide CTRL + U și, respectiv, CTRL + SHIFT + U sunt alocate acestei selecții. Într-un meniu contextual legat de un clic pagini faceți clic dreapta, există și un element „Inițial cod" Opera deschide sursa paginiîntr-un program extern care este atribuit în sistemul de operare sau în setările browserului pentru editarea fișierelor HTML.

4. Browserul Google Chrome are, fără îndoială, cea mai bună organizare pentru vizualizarea inițialei cod A. Făcând clic dreapta pe pagină, puteți alege să vizualizați cod A pagini„și apoi codul sursă cu evidențierea sintaxelor va fi deschis într-o filă separată. Sau ați putea prefera linia „Vizualizare” din același meniu cod element” iar browserul din aceeași filă va deschide două cadre suplimentare în care puteți inspecta HTML și CSS cod fiecare element pagini. Browserul va răspunde la mișcarea cursorului pe linii codși, evidențierea elementelor din pagină care corespund acestei secțiuni de HTML cod A.

5. În browserul Apple Safari, extindeți secțiunea Vizualizare și selectați Vizualizare HTML cod A". În meniul care apare când faceți clic dreapta pe deschide pagini, elementul corespunzător se numește „Vizualizare sursă”. Această acțiune este atribuită tastelor rapide CTRL + ALT + U. Inițială cod se deschide într-o fereastră separată de browser.

Dezvoltatorii de browsere au avut grijă de comoditatea celor care creează site-uri care se deschid în aceleași browsere, și anume webmasteri. Au adăugat instrumente pentru dezvoltatori la caracteristicile standard, cu care puteți deschide cu ușurință și vizualizați codul sursă al paginii site-ului în browser: HTML, CSS, JavaScript (JS), obțineți diverse date utile despre structura site-ului, efectuați analiza tehnică a acestuia. În general, vezi o mulțime de lucruri utile.

Desigur, aceste instrumente sunt folosite nu numai de creatorii de site-uri web pentru muncă, ci și de utilizatorii obișnuiți, pentru care codul sursă le permite să vizualizeze diverse date utile.

Din acest articol veți învăța cum să vizualizați codul sursă al unei pagini de site într-un browser (cum să deschideți codul HTML, CSS, JavaScript al unui site).

Cum se deschide codul sursă al unei pagini într-un browser

Există două moduri de a deschide codul sursă al unei pagini web într-un browser:

Utilizarea tastelor rapide;
Deschideți din meniul contextual.

Ctrl+U– o combinație de taste rapide pentru a vizualiza codul sursă al întregii pagini a site-ului într-o fereastră nouă separată. Standard pentru toate browserele: Google Chrome, Opera, Mozilla Firefox, browser Yandex, IE.

De asemenea, puteți introduce instrumentele de dezvoltare după cum urmează:

Pentru a găsi rapid codul, cuvântul sau textul dorit pe o pagină, puteți utiliza combinația standard de taste rapide de căutare pentru toate browserele: Ctrl + G.

Instrucțiuni video:

Vedeți codul elementului | explora element | inspectează elementul

Dacă dintr-o dată trebuie să vizualizați nu întregul cod sursă, ci să afișați doar o parte separată a acestuia, o zonă de pe pagină, atunci instrumentul anterior nu va funcționa. În acest scop, instrumentele de dezvoltare au o altă funcție, care va fi discutată mai jos.

Cum să vizualizați codul unui element pe o pagină:

De asemenea, puteți utiliza comenzile rapide de la tastatură pentru a accesa rapid inspecția elementelor.

Taste rapide (butoane):

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

Browser Yandex: Ctrl+Shift+I și Ctrl+Shift+C

După acești pași, codul sursă al paginii web se va deschide în aceeași fereastră de browser:

Tot codul HTML va fi în coloana mare din stânga. Și stilurile CSS sunt în dreapta.

Avantajul acestei metode, desigur, este că utilizatorul are posibilitatea de a schimba codul sursă și de a edita stiluri. Adică poți edita stilurile de pe site și vezi cum va arăta cu anumite stiluri, fără a fi nevoie să faci imediat modificări fișierelor aflate pe serverele de găzduire. Pentru a modifica sau adăuga codul programului, trebuie să faceți dublu clic pe fragmentul sau zona dorită. Desigur, corectarea codului în browser nu se va face pe serverele de găzduire. Prin urmare, în viitor, în orice caz, va trebui să copiați acest cod și să-l scrieți în fișiere.

Această instrucțiune video descrie în detaliu și arată cum să lucrați cu instrumentele pentru dezvoltatori:

Așa, doar online, chiar în browser, puteți vizualiza codul sursă al paginii site-ului, puteți obține date de bază despre codul HTML și CSS, le puteți modifica și copia, fără a fi nevoie să descărcați fișierele acestui site pe computer. .

Apropo, utilizatorii de internet neexperimentați care au schimbat codul paginii și se așteaptă să fie salvat vor fi dezamăgiți. La urma urmei, după reîmprospătarea paginii, toate modificările de pe aceasta vor dispărea. Acest lucru nu este suficient pentru a pirata site-ul :)

Cum să vizualizați codul sursă pe telefonul Android

De asemenea, aș dori să remarc că instrumentele pentru dezvoltatori sunt disponibile nu numai în versiunea desktop a browserelor, adică pe computere și laptopuri. Pe telefoane și tablete (Android, iOS) puteți vizualiza și codul sursă.

Pentru a face acest lucru, adăugați prefixul sursă de vizualizare la adresa URL a paginii care este inspectată:

De exemplu:

vizualizare-sursa:https://site/turbo-rezhim-opera/