Cum să vizualizați codul HTML în Chrome

Device Links

• Android
• iPhone
• Chromebook
• Mac
• Windows
• Dispozitiv lipsește?

Ești curios despre ce alcătuiește o pagină web? Vrei să știi cum să schimbi dimensiunea sau culoarea fontului pe site-ul tău? Prin vizualizarea codului HTML al unei pagini web, puteți face toate aceste lucruri și multe altele.

În acest tutorial, vă vom arăta cum să vizualizați codul HTML al unei pagini web în Chrome.

Vizualizarea codului HTML în Chrome

Când scrieți în HTML, codul sursă este seria de etichete și atribute folosite pentru a defini structura și conținutul unei pagini web.

Codul sursă este citit de browserele web și tradus în pagina web grafică pe care o vedeți pe ecran. Pe lângă definirea aspectului unei pagini web, codul sursă poate fi folosit și pentru a adăuga interactivitate, cum ar fi ferestre pop-up, formulare și meniuri derulante.

În timp ce utilizatorul obișnuit de internet nu trebuie să vadă niciodată codul sursă HTML al unei pagini web, există mai multe motive pentru care unii ar dori să facă acest lucru.

Pentru dezvoltatori, vizualizarea codului sursă poate fi o modalitate utilă de a înțelege cum este structurată o pagină și de a determina ce elemente de stil și de scriptare sunt utilizate. Pentru designeri, poate fi benefic să vedeți cum alți designeri au folosit HTML pentru a crea machete eficiente.

În unele cazuri, utilizatorii pot dori, de asemenea, să vadă codul sursă pentru a depana erorile sau pentru a afla mai multe despre cum funcționează un anumit site web sau aplicație web. Indiferent de motiv, vizualizarea codului sursă HTML este un proces relativ simplu în Chrome.

Cum să vizualizați codul HTML al unei pagini web în Chrome pe un computer cu Windows

Sistemul de operare Windows este unul dintre cele mai compatibile sisteme Chrome. Chrome este construit pe deasupra proiectului Chromium cu sursă deschisă, la care Microsoft contribuie major. Această compatibilitate se extinde la domeniul HTML, unde browserul popular permite utilizatorilor să vizualizeze codul HTML al oricărui site web.

Puteți vizualiza codul HTML în două moduri.

Utilizarea Vizualizare sursa paginii

Această metodă este simplă:

1. Deschideți Chrome și navigați la pagina în care doriți să vizualizați codul sursă HTML.
   
2. Faceți clic dreapta pe pagină și selectați Vizualizare sursa paginii sau apăsați Ctrl + U de pe tastatură pentru a deschide codul sursă într-o filă nouă.
   

Codul sursă va apărea în noua filă și îl puteți derula pentru a vedea marcajul HTML pentru pagina respectivă.

Utilizarea instrumentelor pentru dezvoltatori

Pentru a inspecta codul sursă al unei pagini web utilizând Instrumentele pentru dezvoltatori în Google Chrome, urmați pașii de mai jos.

1. Deschideți Google Chrome și navigați la pagina web pe care doriți să o inspectați.
   
2. Apăsați Ctrl + Shift + I de pe tastatură. Panoul Instrumente pentru dezvoltatori se va deschide într-un dock alături de pagina web pe care o vizualizați.
   
3. Faceți clic pe fila „Elemente” din partea de sus a panoului. Aceasta va afișa codul sursă HTML pentru pagina web.
   
4. Acum puteți revizui codul sursă al paginii. Pentru a restrânge un element, faceți clic pe triunghiul de lângă numele etichetei sale. Pentru a vedea mai multe informații despre o componentă, faceți clic dreapta pe ea și selectați „Inspectați”.
   

Rețineți că această metodă este cea mai bună pentru pagini HTML; este posibil să vizualizați codul sursă al altor tipuri de pagini web, dar formatarea poate fi mai dificil de citit.

Cum să vizualizați codul HTML al unei pagini web în Chrome pe un Mac

Dacă sunteți un dezvoltator web, este important să puteți vizualiza codul HTML al unei pagini web. Acest lucru vă permite să vedeți cum este structurată pagina și să remediați orice probleme care pot apărea. Din fericire, este ușor de făcut în Chrome pe un Mac. Pur și simplu urmați acești pași:

1. Deschideți Chrome și navigați la pagina web unde doriți să vedeți codul HTML.
   
2. Faceți clic dreapta pe pagină și selectați „Inspectați”.
   
3. Se va deschide un nou panou în partea de jos a ecranului, afișând codul HTML.
   
4. De asemenea, puteți face clic pe anumite elemente din codul HTML pentru a vedea cum sunt stilate pe pagină. De exemplu, puteți vedea ce stiluri CSS sunt aplicate unui element selectându-l și apoi făcând clic pe fila „Stiluri” din panoul care se deschide.
   
5. Pentru a închide panoul, faceți clic pe „X” din colțul din dreapta sus.
   

Ca alternativă, puteți utiliza Instrumentele pentru dezvoltatori Chrome pentru a vedea codul sursă.

1. Deschideți Google Chrome și navigați la pagina web pe care doriți să o inspectați.
   
2. Faceți clic pe pictograma meniu (trei puncte) din colțul din dreapta sus al browserului și selectați Mai multe instrumente și Instrumente pentru dezvoltatori din meniul derulant.
   
3. Panoul Instrumente pentru dezvoltatori se va deschide în partea de jos a ecranului. Selectați „Elementele” din partea de sus a panoului.
   
4. Veți vedea acum codul HTML pentru pagina curentă afișat în panoul Elemente. Puteți utiliza diferitele opțiuni din panou pentru a inspecta și a depana codul după cum este necesar.
   

Cu doar câteva clicuri, puteți vizualiza cu ușurință codul HTML pentru orice pagină web din Chrome pe un Mac. Acest lucru poate fi util atunci când încercați să depanați problemele de dezvoltare web sau doriți să aruncați o privire mai atentă asupra modului în care este construit un anumit site web.

Cum să vizualizați codul HTML al unei pagini web în Chrome în aplicația pentru iPhone

Dacă utilizați un iPhone, puteți vizualiza codul HTML al oricărei pagini din Chrome în două moduri:

Modificarea URL-ului

Puteți vizualiza cu ușurință codul HTML al oricărei pagini făcând o mică ajustare la adresa URL:

1. Deschideți Chrome și navigați la pagina web al cărei cod HTML doriți să îl vizualizați.
   
2. Atingeți o dată în bara de adrese pentru a iniția modul de editare.
   
3. Mutați cursorul în partea din față a adresei URL.
   
4. Tastați „View-source” și apoi apăsați butonul „Go”. Codul HTML al paginii web va fi afișat în Chrome.
   

Utilizarea instrumentelor pentru dezvoltatori

Instrumentele pentru dezvoltatori Chrome sunt disponibile și pe iOS, dar sunt necesari un set diferit de pași pentru a-l lansa în comparație cu computerele.

1. Atingeți cele trei puncte din colțul din dreapta sus al ecranului și selectați „Setări”.
2. Derulați în jos și atingeți „Avansat”, apoi activați comutatorul de lângă „Instrumente pentru dezvoltatori”.
3. Atingeți lung o zonă goală a paginii, apoi selectați „Inspectați elementul”. Aceasta va deschide un panou lateral cu codul HTML pentru pagina respectivă.

Cum să vizualizați codul HTML al unei pagini web în Chrome în aplicația Android

Când utilizați aplicația Chrome pe telefonul dvs. Android, vă recomandăm să vedeți codul HTML pentru o pagină web. Acest lucru poate fi util dacă încercați să remediați o problemă cu pagina sau doriți să vedeți cum este structurată pagina. Pentru a vedea codul HTML pentru o pagină web în Chrome pe telefonul Android, urmați acești pași:

1. Deschideți Chrome pe Android.
   
2. Tastați „view-source:” urmat de adresa URL a paginii pe care doriți să vedeți codul sursă. De exemplu, dacă doriți să vizualizați codul sursă pentru www.google.com, ați introduce „view-source:www.google.com” în bara de adrese a Chrome.
   

Aceasta va deschide codul HTML pentru pagina respectivă în interfața încorporată a Instrumentelor pentru dezvoltatori din Chrome. De acolo, puteți vizualiza și edita codul după cum doriți. Rețineți că această metodă va funcționa numai dacă site-ul web pe care încercați să îl vizualizați permite accesul la codul sursă. Dacă nu, nu veți putea vedea altceva decât un mesaj de eroare.

Cum să vizualizați codul HTML al unei pagini web în Chrome pe un iPad

Chrome pe aplicația iPad facilitează vizualizarea codului HTML al oricărei pagini web. Pur și simplu urmați acești pași:

1. Deschideți Chrome și tastați „view-source:” urmat de adresa URL a paginii pe care doriți să o vizualizați. De exemplu, dacă doriți să vizualizați codul sursă pentru www.alphr.com, trebuie să tastați „view-source:www.alphr.com” în bara de adrese a Chrome.
   
2. Apăsați butonul „Go”.
   

Aceasta ar trebui să încarce codul sursă al paginii într-o filă nouă din Chrome. De acolo, puteți salva sau partaja codul după cum este necesar.

Codul sursă este lipiciul care ține paginile împreună

HTML este baza oricărui site web. Oferă structura și conținutul pe care vizitatorii le văd atunci când încarcă o pagină în browser.

În timp ce aspectul final al unei pagini poate fi determinat de CSS sau de alte limbaje de stil, codul HTML determină structura de bază și conținutul paginii. Unele modificări pot rupe pagina. Din acest motiv, este important să aveți o bună înțelegere a HTML atunci când vizualizați sau faceți modificări la codul sursă.

De asemenea, rețineți că, deși vizualizarea codului HTML poate fi utilă în unele cazuri, modificările aduse codului nu se vor reflecta pe pagina web live. Doar modificările publicate de administratorul site-ului vor fi vizibile pentru vizitatori.

Ați încercat să vizualizați codul HTML al oricărei pagini web folosind oricare dintre metodele discutate în acest tutorial? Cum a mers?

Anunțați-ne în secțiunea de comentarii.