Cum să vizualizați codul paginii în browserul Yandex. Instrumente Google Chrome pentru webmasteri

Multă vreme, opțiunea „show page source code” a fost inutilă și neinteresantă pentru mine. Până acum, învățarea HTML la Codecademy și construirea propriilor site-uri nu au devenit noul meu hobby. Aici a apărut întrebarea: unde să găsești cazuri reale și să împrumuți soluții interesante pentru „pușculița” ta? Răspunsul a fost surprinzător de simplu, ca toți genii: vizualizați codul sursă al paginii în Google Chrome! Împărtășesc cu voi descoperirile mele modeste.

Ce este codul sursă al paginii

Dacă tu, ca mine, abia faci primii pași în programarea HTML, nu va fi de prisos să știi care este codul sursă al unei pagini.

Codul sursă, cunoscut și sub numele de codul HTML al paginii, este text în limbajul Hyper Text Markup Language (HTML). Include conținutul real al paginii (text, tabele) și etichete. Acestea din urmă joacă rolul de instrucțiuni pentru browser: cum să afișeze conținutul, ce fel de formatare să folosești, unde să inserezi un hyperlink sau un fișier media. Ei bine, pentru noi, programatorii începători, codul sursă este cel mai bun teren de antrenament: găsim un site interesant și privim, salvăm, folosim fragmente de succes. Cum?

Cum să vizualizați codul sursă în pagina browserului Google Chrome

Găsiți pagina care vă place. De exemplu, m-a interesat designul meniului site-ului. Există trei moduri de a deschide codul sursă în browserul Google Chrome:

1. Faceți clic pe pictogramă meniulîn colțul din dreapta sus al browserului și selectați „Mai multe instrumente”. Printre altele, există o opțiune pentru „Vizualizare cod sursă”. Sincer, folosesc rar această metodă: o mulțime de mișcări inutile. Se poate face și mai ușor.
2. Apăsați combinația de taste Ctrl+U- deschide o nouă fereastră cu codul sursă;
3. Pentru fanii meniului contextual: faceți clic dreapta pe pagină și selectați opțiunea „Vizualizare codul paginii”.

Ne-am descurcat sarcinii de a vizualiza codul HTML al paginii în browser. Trecem la cea mai interesantă etapă.

Cum să editați și să salvați codul sursă

Pentru a învăța cum să creați site-uri web, nu este suficient să citiți codul HTML al altcuiva. Trebuie să te joci cu el, să experimentezi, să faci modificări și să verifici rezultatul. Puteți chiar să începeți prin a compila câteva mostre de succes. Cum se editează și se salvează codul sursă?

Opțiunea 1. „Manual”

După ce am deschis codul sursă al paginii, apelăm meniul contextual și selectăm opțiunea „Salvare ca” și salvăm fișierul pe hard disk. Edităm fișierul în Notepad sau Notepad, salvăm modificările și deschidem prin browser. Rezultatele modificărilor noastre (reușite și nu atât de bune) se vor reflecta în fereastra browserului.

Opțiunea 2. Pentru profesioniști

Când „te joci” cu codul sursă în fiecare zi, procesul „salvare – deschidere – schimbare – salvare – verificare” este obositor. Pentru mine, am găsit o soluție sub forma instalării unui plugin pentru Google Chrome - Firebug Lite. Vă permite să editați și să salvați codul sursă fără a părăsi fereastra browserului.

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 funcțiile 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, pentru a vedea o mulțime de lucruri utile.

Desigur, aceste instrumente sunt folosite nu numai de creatorii de site-uri pentru muncă, ci și de utilizatorii obișnuiți, cărora codul sursă vă permite să vedeți diverse date utile.

Din acest articol veți învăța cum să vizualizați codul sursă al paginii site-ului în browser (cum să deschideți codul HTML, CSS, JavaScript al site-ului).

Cum se deschide codul sursă al paginii în browser

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

1. Utilizarea tastelor rapide;
2. 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 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 | element explora | 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 anumită secțiune de pe pagină, atunci instrumentul anterior nu va funcționa. Pentru a face acest lucru, există o altă funcție în instrumentele pentru dezvoltatori, care va fi discutată mai jos.

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

În plus, 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ă acțiunile efectuate, 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ă, de a edita stiluri. Adică puteți edita stilurile de pe site și puteți vedea cum va arăta cu anumite stiluri, fără a fi nevoie să faceți imediat modificări la fișierele care se află pe serverele de găzduire. Pentru a modifica sau adăuga un cod de program, trebuie să faceți dublu clic pe fragmentul sau secțiunea dorită. Desigur, corectarea codului din browser nu se va face pe serverele de hosting. Prin urmare, în viitor, în orice caz, va trebui să copiați acest cod și să îl scrieți în fișiere.

Acest tutorial video detaliază și arată cum să lucrați cu instrumentele pentru dezvoltatori:

Deci doar online, chiar în browser, puteți vizualiza codul sursă al paginii site-ului, puteți obține informații 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 se vor pierde. Acest lucru nu este suficient pentru a pirata site-ul 🙂

Cum să vizualizați codul sursă pe un telefon 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 inspectate:

De exemplu:

vizualizare-sursa:https://site-ul/turbo-mode-opera/

Am lansat o nouă carte, „Marketing de conținut în rețelele sociale: cum să intri în fruntea abonaților și să-i faci să se îndrăgostească de marca ta”.

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 comandant. Imaginați-vă că publicul nu îl vede și nu îl aude pe șeful. Din punctul lor de vedere, armata efectuează în mod independent acțiuni. Î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, dacă acestea includ o parte 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:

• markup html;
• foaia 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 gestionate 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 analiza lor.
• Vedeți prezența sau absența anumitor elemente pe site: contoare, coduri de identificare în diverse sisteme, anumite scripturi și multe altele.
• Aflați parametrii elementelor: dimensiuni, culori, fonturi.
• Găsiți calea către fotografii și alte elemente de pe pagină.
• Examinați linkurile din pagină.
• Găsiți probleme cu codul care interferează cu procesul de optimizare a site-ului: stiluri care nu au fost mutate în fișiere separate, scripturi, cod invalid.

Acestea sunt principalele caracteristici, 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

Complet în forma în care este așezat pe server, acest lucru nu se poate face din browser. Dar puteți vedea întregul marcaj făcând clic pe pagină cu butonul din dreapta al mouse-ului. Aici și mai jos pe exemplul Google Chrome.

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 analizați pentru a înțelege. Dar puteți obține cod interactiv folosind instrumente 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 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 marcajul de lângă acesta, stilul elementului va fi afișat, 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”, este disponibilă verificarea certificatului de site.

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ă. Iată câteva dintre ele:

1. html este întregul document.
2. Head - secțiune de anteturi de serviciu.
3. Titlu - titlul paginii (afisat pe fila).
4. Corp - corpul documentului.
5. H1-H6 - titluri ale textului paginii.
6. Articol – articol.
7. Sectiune - sectiune.
8. Meniu - meniu.
9. Div - bloc.
10. Span este un șir.
11. P - paragraful.
12. Masa - masa.

Elementele sunt concepute pentru a delimita logic secțiunile unei pagini și sunt stilate după cum este necesar. Acestea conțin text care este cumva vizibil pe pagină. Dar eticheta Head conține informații de serviciu. Etichetele meta sunt folosite pentru a-l specifica. Tot ceea ce este scris în ele este destinat serverului și motoarelor de căutare.

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

Să acordăm atenție etichetei Link. Este folosit pentru a specifica legături către fișiere includ externe. Dacă doriți, puteți vedea conținutul și puteți salva pe disc. Pentru a face acest lucru, plasați cursorul peste adresă și faceți clic dreapta. 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ă remediaț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ă”. Afișează descrierea erorii și numărul rândului pe care a apărut.

Sintaxa poate fi văzută direct în cod. Aceasta este fila Sursă.

Cum să vizualizați codul unui anumit element

Pentru paginile mari cu multe elemente, este dificil să găsești codul potrivit în toate markupurile. În acest caz, ar trebui să utilizați o comandă specială din meniul contextual. Treceți mouse-ul peste fragment și apăsați RMB. Selectați comanda View Code.

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

rezumat

V-am spus care este codul sursă al unei pagini. Este suficient să stăpâniți cunoștințele elementare despre HTML și CSS și, folosind instrumente convenabile pentru dezvoltatori, vă puteți depana propriile documente html.

Răsfoirea codului de resurse pe web 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 în seo vor fi utile meta tag-urile, informațiile în care pot spune multe despre site.

Sărbătoarea se apropie - Ziua Internațională a Femeii. Să ne pregătim pentru asta. Poți felicita fetele și femeile într-un mod original folosind serviciile de cărți poștale, care vor fi discutate mai jos.

Puteți utiliza aceleași servicii pentru care am folosit.

Servicii de cărți poștale gata

Creați o carte poștală 8 martie online

Utilizați următoarele servicii pentru a crea o carte poștală de la zero.

1. Canva este un editor foto funcțional bine-cunoscut. Aici veți găsi multe șabloane. Este necesară înregistrarea.
2. Printclick Dacă aveți propria afacere, puteți comanda un lot de cărți poștale cu sigla și contactele companiei dumneavoastră. De asemenea, puteți utiliza generatorul de cărți poștale princlick. Promotie mare si ieftina.
3. Crello este un editor care necesită înregistrare. Nu vă fie teamă de limba engleză, în setări puteți trece la rusă.
4. Carte poștală online - pentru cei care au o imaginație bine dezvoltată, deoarece va trebui să creeze o carte poștală de la zero.
5. Mumotiki - pregătește o imagine frumoasă și poți adăuga aici un text de felicitare. Apropo, dacă trebuie doar să adăugați text la imagine, atunci puteți verifica.

Sper că folosind unul dintre aceste generatoare, veți putea să vă felicitați în mod adecvat doamnele pe 8 martie!