Cum se deschide codul paginii în Explorer. Cum să vizualizați codul HTML sursă al unei pagini web. Cum să vizualizați codul unui element pe o pagină

Acasă

Ctrl+U

Cum pot vedea codul sursă al unui element?

Faceți clic dreapta pe elementul de interes al paginii. Google Chrome:

„Vedeți codul elementului” Operă:

„Inspectați elementul” FireFox:

„Analiza element”

În alte browsere, căutați un element de meniu cu un înțeles similar.

Salutare tuturor!

Am expus totul în mod special la începutul articolului, pentru cei care caută un răspuns rapid.

Informația poate fi cunoscută de mulți, dar deoarece scriu pentru bloggeri începători, programatori web și alți prospectori, acest articol de referință este un must-have.

În viitor, veți studia cu siguranță codul sursă al paginilor și elementelor individuale.

Să ne uităm la un exemplu specific despre cum puteți utiliza vizualizarea codului sursă al unei pagini. De exemplu, vrem să vedem ce cuvinte cheie sunt folosite pentru o anumită pagină. Mergem la pagina web care ne interesează și apăsăm Ctrl+U. Codul sursă al acestei pagini se va deschide într-o fereastră separată sau într-o filă separată. Apăsați Ctrl+F pentru a căuta un fragment de cod. În acest caz, introducem cuvântul „ cuvinte cheie”.

Veți fi redirecționat automat către o bucată de cod cu această metaetichetă și cuvântul căutat va fi evidențiat.

Prin analogie, puteți căuta și studia alte fragmente de cod.

Vizualizarea întregului cod sursă al unei pagini nu este în cele mai multe cazuri foarte convenabilă, astfel încât în ​​toate browserele este posibil să vizualizați codul unui element sau fragment individual. Google Chrome: Să folosim un exemplu specific de vizualizare a codului unui element. De exemplu, să vedem dacă linkul are un atribut nofollow. Faceți clic dreapta pe linkul care ne interesează și în meniul contextual derulant, faceți clic stânga pe element

sau similar (în funcție de browser). Mai jos, într-o fereastră specială pentru analiza codului, obținem ceva similar.

Browserul Yandex poate fi folosit nu numai ca browser web, ci și ca instrument pentru crearea paginilor de internet. Instrumente de dezvoltare există în fiecare browser web, inclusiv în cel despre care discutăm până acum. Folosind aceste instrumente, utilizatorii pot vizualiza codurile paginilor HTML, pot monitoriza execuția acțiunilor lor, pot monitoriza jurnalele și pot găsi erori în rularea scripturilor.

Cum să deschideți instrumentele pentru dezvoltatori în browserul Yandex

Dacă trebuie să deschideți consola pentru a efectua oricare dintre acțiunile descrise mai sus, urmați instrucțiunile noastre.

Deschideți meniul și selectați „ În plus", în lista care se deschide, selectați " Instrumente suplimentare", iar apoi unul dintre cele trei puncte:

• « Afișează codul paginii»;
• « Instrumente pentru dezvoltatori»;
• « Consola JavaScript».

Toate cele trei instrumente au taste rapide pentru acces rapid:

• Vizualizați codul sursă al paginii - Ctrl+U;
• Instrumente pentru dezvoltatori - Ctrl+Shift+I;
• Consola JavaScript - Ctrl+Shift+J.

Tastele rapide funcționează cu orice aspect de tastatură și cu CapsLock activat.

Pentru a deschide consola, puteți selecta „ Consola JavaScript„, iar apoi instrumentele pentru dezvoltatori se vor deschide în fila „ Consolă»:

În mod similar, puteți accesa consola deschizând prin meniul browserului web " Instrumente pentru dezvoltatori" și comutarea manuală la " Consolă».

De asemenea, puteți deschide „Instrumente pentru dezvoltatori” prin apăsarea tastei F12. Această metodă este universală pentru multe browsere. În acest caz, va trebui din nou să comutați la „ Consolă» manual.

Aceste moduri simple de a lansa consola vă vor reduce semnificativ timpul și vă vor ajuta să vă concentrați pe crearea și editarea paginilor web.

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 să deschideți codul sursă al unei pagini într-un 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 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 | element explora | inspectați 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/

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ță marketingul 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;
• 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 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, putând 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ă. Iată câteva dintre ele:

1. HTML – întregul document.
2. Head – secțiunea antetelor de serviciu.
3. Titlu – titlul paginii (afisat pe fila).
4. Corp – corpul documentului.
5. H1-H6 – titlurile textului paginii.
6. Articol – articol.
7. Sectiune - sectiune.
8. Meniu – meniu.
9. Div – bloc.
10. Span – sfoară.
11. P – paragraful.
12. 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.

Relua

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.

Fiecare internaut are propriile site-uri preferate pe care petrece mult timp. Și numai leneșii nu s-au gândit să se uite cum a fost creat și în ce constă. Este imposibil să răspunzi la toate aceste întrebări, deoarece există multe modalități de a crea un site web, dar să te uiți la comenzile și codurile care îl compun este posibil și disponibil public pentru toată lumea.

O altă întrebare este dacă o persoană care nu este implicată în programare va înțelege vreunul dintre simbolurile care compun codul. Dar din exemplele care vor fi date mai jos, orice utilizator Google Chrome va putea vizualiza elemente individuale ale site-urilor.

Cum să vizualizați codul sursă al unei pagini html într-un browser Google

Pentru a putea vizualiza codul paginii în Chrome, trebuie să accesați site-ul care vă interesează și să efectuați următorii pași:

Aceste două elemente diferă prin funcționalitatea și informațiile pentru utilizator, programator sau hacker.

Care este diferența dintre codul paginii și doar comanda „Vizualizare cod”?

Analizând fiecare dintre aceste funcții, puteți scrie un articol separat. Pentru programatori, această diferență este semnificativă și înțeleg în ce cazuri este necesar să se folosească „Vizualizare cod” și în care „Vizualizare cod pagină” în browserul Google Chrome.

Dar explicând pentru utilizatorul obișnuit, aceste funcții pot fi împărțite în următoarele scopuri:

1. „Vizualizare codul paginii” este necesar doar pentru a vedea combinația principală a paginii. Practic, aceasta este structura site-ului (fără modele suplimentare sub formă de fișiere CSS și alte completări care rămân în folderul creatorului site-ului). Această structură nu este potrivită pentru crearea propriei pagini prin „copiere-lipire”, dar vă va permite să vedeți exact ce a făcut programatorul și în ce secvență pentru a vă asigura că site-ul din browserul Google Chrome are un astfel de design extern.
2. „Vizualizare cod” afișează o structură detaliată, evidențiind toate zonele care sunt afectate pe pagină. Dacă treceți cu mouse-ul peste un anumit cod de listă, acesta va evidenția elementul de pe site-ul căruia îi aparține.
3. Vizualizarea codului paginii se deschide într-un browser separat, fără posibilitatea de a-l edita. Adică, este potrivit doar pentru copierea și citirea codului site-ului. Dar aceasta nu este o funcție mai puțin utilă.
4. „Vizualizare cod” este modificabil și puteți edita orice element într-un mod convenabil pentru dvs. Desigur, toate aceste modificări vor „vii” până când pagina este reîmprospătată, dar uneori este distractiv să treci prin acele setări și să înțelegi de ce este nevoie de această sau atare valoare și ce se va întâmpla dacă o schimbi. Nu trebuie să presupuneți că, prin astfel de acțiuni, vă veți face rău dvs. sau site-ului - aceste modificări afectează doar codul Google Chrome și nu sunt conectate.

Luăm în considerare întrebarea cum să vedem codul elementului

Dacă ar fi să răspundem la o astfel de întrebare, atunci singura opțiune care se sugerează este un exemplu. Pentru că într-un articol este foarte greu să devii o persoană care înțelege acest subiect (dezvoltator web), dar să arăți cu un exemplu astfel încât întrebarea să fie rezolvată este mult mai ușor.

Funcționalitatea codului elementului este foarte largă, așa că luăm unul dintre cuvintele de pe site-ul web al browserului Google Chrome. Am vrut să luăm în considerare ce cuvinte cheie (în cod va fi scris „cuvinte cheie”) au fost folosite pentru site-ul nostru. Pentru a face acest lucru, efectuăm următorul algoritm:

Alte modalități de a utiliza această funcție în browserul Google Chrome

În general, continuând să răspundeți la întrebarea cum să priviți codul unui element și de ce este necesar, ar trebui să enumerați funcțiile acestuia. Și anume, datorită capacității de a vizualiza codul unui element al oricărui site în browserul Google Chrome, putem:

• Vezi structura site-ului pornind de la head (“site header”) și terminând cu end (comanda finală a oricărui program);
• Vizualizați toate funcțiile site-ului, și anume: link-uri către alte site-uri, module suplimentare de pe site-uri externe și prezența contoarelor încorporate pentru colectarea diverselor informații;
• Aflați dacă copierea de pe site este interzisă sau nu;
• Codul va înregistra toate linkurile către alte pagini ale site-ului, precum și designul acestora și acțiunile ulterioare după ce faceți clic pe ele.

Aceasta nu este deloc o listă finită. Dar trebuie amintit că, fără cunoștințe speciale, este aproape imposibil să „citești” codul unei pagini Google Chrome, iar datele primite practic nu sunt necesare unui utilizator obișnuit.

Elementul „Vizualizare cod element” nu funcționează

Trebuie spus imediat că fiecare site va avea acces deschis la codurile de elemente. Adică, chiar și cele mai populare și mai scumpe site-uri vor fi deschise pentru vizualizarea codului lor. Prin urmare, dacă elementul din browserul Google Chrome nu este activ sau generează o eroare, are următoarele motive posibile:

• Profilul utilizatorului este corupt;
• Prezența malware pe computer;
• Blocarea printr-o anumită extensie pentru a crește performanța (chiar și acest lucru se poate întâmpla).

Remedierea unui profil de utilizator deteriorat

Pentru a crea un profil nou, trebuie să-l ștergeți pe cel vechi de pe computer. Pentru a face acest lucru facem următoarele:

1. Închideți Google Chrome și lansați browserul Windows Explorer încorporat.
2. Introduceți următoarea comandă în bara de adrese: %LOCALAPPDATA%\Google\Chrome\User Data\.
3. Când directorul se deschide, căutați folderul „Default” și adăugați „Backup” la numele acestuia, astfel încât să obțineți următoarele: „Backup Default”.
4. Acum, după repornirea browserului Chrome, va fi creat un nou profil.

Îndepărtăm programele malware sau rămășițele acestuia

Dacă noul profil nu ne oferă acces la codul elementului de pagină și încă vedem eroarea, ar trebui să facem următoarele:

1. Deschideți linia de comandă Windows („Run”) și introduceți comanda „cmd” acolo.
2. Introduceți următoarea comandă în linie: RD /S /Q „%WinDir%\System32\GroupPolicyUsers”.
3. După confirmarea acțiunii, introduceți acest lucru: RD /S /Q „%WinDir%\System32\GroupPolicy”.
4. Acum „gpupdate /force” (fără ghilimele).

Dacă totul a fost făcut corect, atunci după repornirea computerului, Google Chrome va deschide codul elementelor și browserul va funcționa normal.