Indiferent dacă sunteți un creator de site-uri web, care investighează codul sursă al propriului proiect, sau pur și simplu sunteți curios să aflați cum este structurat codul unui site, Google Chrome vă oferă posibilitatea de a vizualiza codul HTML direct din browser. Există două abordări pentru a accesa codul sursă HTML: prin opțiunea „Vizualizare sursă pagină” și prin utilizarea instrumentelor pentru dezvoltatori („Inspectare”).
Accesarea codului sursă cu „Vizualizare sursă pagină”
Începeți prin a deschide Chrome și navigați la pagina web al cărei cod sursă doriți să-l vedeți. Efectuați un clic dreapta oriunde pe pagină și selectați „Vizualizare sursă pagină” sau, alternativ, apăsați combinația de taste Ctrl + U. Această acțiune va deschide o filă nouă, afișând codul HTML al paginii, în format extins și fără formatare specifică.
Într-o filă nouă, veți găsi întregul cod HTML al paginii web, prezentat complet și fără o structurare predefinită.
Dacă sunteți în căutarea unui anumit element sau porțiuni din codul HTML, utilizarea funcției „Vizualizare sursă pagină” poate fi o sarcină dificilă și anevoioasă, mai ales în cazul paginilor web complexe care utilizează extensiv JavaScript și CSS.
Examinarea codului sursă cu „Instrumentele pentru dezvoltatori”
Această metodă se bazează pe panoul „Instrumente pentru dezvoltatori” din Chrome și oferă o modalitate mai eficientă și ordonată de a vizualiza codul sursă. Codul HTML este prezentat într-un format mai ușor de citit, datorită formatării adecvate și posibilității de a restrânge elementele care nu vă interesează la un moment dat.
Deschideți Chrome și accesați pagina pe care doriți să o analizați. Apoi, apăsați combinația de taste Ctrl + Shift + i. Un panou va apărea adiacent paginii web pe care o vizualizați.
Faceți clic pe săgeata gri de lângă un element pentru a-l afișa în detaliu.
Dacă nu doriți să vizualizați întregul cod al paginii, ci doar un element specific din codul HTML, dați clic dreapta pe acel element din pagină, apoi selectați „Inspectați”.
De această dată, panoul se va deschide direct la secțiunea de cod care corespunde elementului pe care l-ați selectat.
Puteți modifica poziția panoului, mutându-l în partea de jos, la stânga, la dreapta sau chiar detașându-l într-o fereastră separată. Pentru a face acest lucru, faceți clic pe pictograma de meniu (cele trei puncte), apoi alegeți opțiunea dorită: desprindere într-o fereastră separată, andocare în stânga, andocare în partea de jos sau andocare în dreapta.
Acesta este procesul. După ce ați terminat de explorat codul, fie închideți fila „Vizualizare sursă”, fie faceți clic pe „X” din panoul „Instrumente pentru dezvoltatori” pentru a reveni la pagina web.