Cum să vizualizați sursa HTML în Google Chrome

Indiferent dacă sunteți nou în industria web sau un veteran experimentat, vizualizarea sursei HTML a diferitelor pagini web este ceva ce probabil veți face de multe ori de-a lungul carierei. Majoritatea browserelor vă permit să vizualizați cu ușurință sursa; Chrome nu este diferit.

Vizualizarea codului sursă al unui site este una dintre cele mai simple modalități de a învăța din acea lucrare și de a începe să utilizați cod sau tehnici specifice în munca dvs. Pe lângă citirea cărților de design web sau participarea la conferințe profesionale, vizualizarea codului sursă al unui site este o modalitate excelentă pentru începători de a învăța HTML.

Vedeți codul sursă în Chrome

Deci, cum vedeți codul sursă al unui site web? Iată instrucțiunile pas cu pas pentru a face acest lucru folosind browserul Google Chrome.

Deschideți Browser web Google Chrome (dacă nu aveți instalat Google Chrome, aceasta este o descărcare gratuită).
Navigați către pagina web pe care doriți să o examinați.
Faceți clic dreapta pagina și uită-te la meniul care apare. Din acel meniu, faceți clic pe Vezi sursa paginii.
Codul sursă pentru pagina respectivă va apărea acum ca o filă nouă în browser.
Alternativ, puteți utiliza și comenzile rapide de la tastatură ale CTRL + U pe un computer pentru a deschide o fereastră cu codul sursă al unui site afișat. Pe un Mac, această comandă rapidă este Comandă + Opțiune + U.

Utilizați instrumentele pentru dezvoltatori Chrome

În plus față de capacitatea simplă de vizualizare a paginii pe care Google Chrome o oferă, puteți profita de instrumentele lor excelente pentru dezvoltatori pentru a săpa și mai adânc într-un site. Aceste instrumente vă vor permite nu numai să vedeți codul HTML, ci și CSS care se aplică elementelor de vizualizare din acel document HTML.

Pentru a utiliza instrumentele pentru dezvoltatori Chrome:

Deschis Google Chrome.
Navigheaza catre pagina web pe care doriți să o examinați.
selectaţi meniu cu trei puncte în colțul din dreapta sus al ferestrei browserului.
Din meniu, treceți cu mouse-ul peste Mai multe unelte și apoi alegeți Instrumente de dezvoltare în meniul care apare.
Se va deschide o fereastră care arată codul sursă HTML în stânga panoului și CSS-ul aferent în dreapta.
Alternativ, dacă faceți clic dreapta un element dintr-o pagină web și selectați Inspecta din meniul care apare, instrumentele pentru dezvoltatori Chrome vor apărea și vor evidenția partea specifică pe care ați ales-o în HTML cu CSS corespunzător afișat în dreapta. Este foarte util dacă doriți să aflați mai multe despre o anumită piesă a unui site.

Vizualizarea codului sursă este legală?

De-a lungul anilor, am avut mulți designeri web noi care se întreabă dacă este acceptabil să vizualizeze codul sursă al unui site și să-l folosească pentru educația lor și în cele din urmă pentru munca pe care o fac. În timp ce copierea codului unui site cu ridicata și transmiterea acestuia ca a dvs. pe un site web nu este cu siguranță acceptabilă, utilizarea codului respectiv ca trambulină de învățat este de fapt câte progrese sunt realizate în această industrie.

După cum am menționat la începutul acestui articol, v-ar fi greu să găsiți un profesionist web care funcționează astăzi și care nu a învățat ceva vizualizând sursa unui site! Da, este legal să vezi codul sursă al unui site. Utilizarea codului respectiv ca resursă pentru a construi ceva similar este, de asemenea, sigură. Luând codul așa cum este și îl transmiteți pe măsură ce munca dvs. începe să întâmpinați probleme.

În cele din urmă, profesioniștii web învață unii de la alții și de multe ori îmbunătățesc munca pe care o văd și pe care o inspiră, așa că nu ezitați să vizualizați codul sursă al unui site și să-l utilizați ca instrument de învățare.

Mai mult decât HTML

Un lucru de reținut este că fișierele sursă pot fi foarte complicate (și cu cât este mai complex site-ul web pe care îl vizionați, cu atât este mai complex codul site-ului). În plus față de structura HTML care alcătuiește pagina, vor exista și CSS (foi de stil în cascadă) care dictează aspectul vizual al acelui site. În plus, multe site-uri web de astăzi vor include fișiere script incluse împreună cu HTML.

Este posibil să fie incluse mai multe fișiere script; de fapt, fiecare alimentează diferite aspecte ale site-ului. Sincer, codul sursă al unui site poate părea copleșitor, mai ales dacă sunteți nou în acest sens. Nu vă lăsați frustrat dacă nu vă dați seama ce se întâmplă imediat cu acel site. Vizualizarea sursei HTML este doar primul pas în acest proces. Cu puțină experiență, veți începe să înțelegeți mai bine cum se potrivesc toate aceste piese pentru a crea site-ul web pe care îl vedeți în browser. Pe măsură ce vă familiarizați cu codul, veți putea afla mai multe din acesta și nu vi se va părea atât de descurajant.