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

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



Ce să știi

  • Faceți clic dreapta pe pagina web și alegeți Vezi sursa paginii .
  • Comandă rapidă: apăsați Ctrl + ÎN (PC Windows) sau Comanda + Opțiune + ÎN (Mac).
  • Pentru a utiliza instrumentele pentru dezvoltatori Chrome, selectați Meniul (trei puncte) > Mai multe unelte > Instrumente de dezvoltare .

Acest articol explică cum să accesați codul sursă HTML al unui site web în browserul web Google Chrome, precum și cum să accesați și să utilizați instrumentele pentru dezvoltatori Chrome. 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 utilizând browserul Google Chrome.

  1. Deschide browser web Google Chrome (dacă nu aveți Google Chrome instalat , aceasta este o descărcare gratuită).

  2. Navigați la pagina web pe care doriți să o examinați .

  3. Click dreapta pagina și uită-te la meniul care apare. Din acel meniu, faceți clic Vezi sursa paginii .

    Vedeți sursa paginii în meniul contextual pentru browserul web Chrome
  4. Codul sursă pentru pagina respectivă va apărea acum ca o filă nouă în browser.

  5. Alternativ, puteți utiliza și comenzile rapide de la tastatură ale Ctrl + ÎN pe un PC pentru a deschide o fereastră cu codul sursă al unui site afișat. Pe un Mac, această comandă rapidă este Comanda + Opțiune + ÎN .

Hilary Allison / Lifewire

cum să găsești pe cineva Snapchat de pe Instagram

Utilizați instrumentele pentru dezvoltatori Chrome

Pe lângă cele simpleVezi sursa paginiiabilitate pe care o oferă Google Chrome, puteți profita și de excelenta lor Instrumente de dezvoltare pentru a săpa și mai adânc într-un sit. Aceste instrumente vă vor permite nu numai să vedeți HTML, ci și CSS-ul care se aplică pentru vizualizarea elementelor din acel document HTML.

Pentru a utiliza instrumentele pentru dezvoltatori Chrome:

  1. Deschis Google Chrome .

  2. Navigheaza catre pagina web pe care doriți să o examinați .

  3. Selectează meniu cu trei puncte în colțul din dreapta sus al ferestrei browserului.

  4. Din meniu, plasați cursorul peste Mai multe unelte si apoi alege Instrumente de dezvoltare în meniul care apare.

    Element de meniu Instrumente pentru dezvoltatori în Google Chrome
  5. Se va deschide o fereastră care arată codul sursă HTML în partea stângă a panoului și CSS-ul aferent în partea dreaptă.

  6. 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-ul corespunzător afișat în dreapta. Este foarte util dacă doriți să aflați mai multe despre o anumită bucată a unui site.

    cum să mesaj privat pe discordie
Cum să inspectați un element pe un Mac

Este legală vizualizarea codului sursă?

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 trecerea lui drept al dvs. pe un site web nu este cu siguranță acceptabilă, folosirea acestui cod ca o rampă de învățare este de fapt câte progrese au fost realizate în această industrie.

După cum am menționat la începutul acestui articol, ți-ar fi greu să găsești un profesionist web care lucrează astăzi, care nu a învățat ceva vizualizând sursa unui site! Da, a vedea codul sursă al unui site este legal. Folosirea acelui cod ca resursă pentru a construi ceva similar este, de asemenea, sigură. Luând codul așa cum este și dandu-l drept munca dvs. este locul în care începeți să întâmpinați probleme.

În cele din urmă, profesioniștii web învață unii de la alții și îmbunătățesc adesea munca pe care o văd și din care sunt inspirați, așa că nu ezitați să vedeți codul sursă al unui site și să-l folosiț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 site-ul web pe care îl vizualizați este mai complex, cu atât codul site-ului respectiv va fi mai complex). Pe lângă structura HTML care alcătuiește pagina, vor exista și CSS (cascading style sheets) care dictează aspectul vizual al site-ului respectiv. Î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ă frustrați dacă nu vă puteți da seama ce se întâmplă cu acel site imediat. 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 mai bine cu codul, veți putea învăța mai multe din el și nu vi se va părea atât de descurajantă.

FAQ
  • Cum editez codul HTML în Chrome?

    Deschideți Instrumente pentru dezvoltatori în Chrome apăsând Ctrl (sau Comanda pe un Mac) + Shift + I . De acolo, apăsați Ctrl ( Comanda pe Mac) + O și selectați fișierul sursă salvat pe care doriți să îl editați pentru a-l deschide.

  • Cum pot vedea codul sursă al paginii în Chrome dacă View Source este dezactivat?

    Dacă un site web a dezactivat opțiunea Vizualizare sursă, este posibil să puteți arunca o privire sub capotă. Din partea de sus a ferestrei browserului, selectați Vedere > Dezvoltator > Vizualizare sursă , care ar trebui să afișeze codul sursă al paginii web.

  • Cum pot vedea codul sursă al unui site în Chrome folosind dispozitivul meu Android?

    Navigați la site-ul web pe care doriți să-l vizualizați folosind aplicația Chrome a dispozitivului dvs., apoi selectați bara de adrese a browserului. Mutați cursorul de text în extrema stângă — în fața adresei URL — și tastați Vizualizare sursă , apoi apăsați introduce sau selectați Merge .

    cât este salvarea lumii

Articole Interesante

Alegerea Editorului

Scrieți-vă propriul joc Raspberry Pi
Scrieți-vă propriul joc Raspberry Pi
Raspberry Pi este o senzație de calcul, dar a fost inițial conceput cu o intenție cheie: să inspire o nouă generație să privească dincolo de console de jocuri, smartphone-uri și tablete și să adopte calea codului. Dacă sunteți în căutarea
Cum să utilizați Bing AI pe Mac
Cum să utilizați Bing AI pe Mac
Pentru a utiliza Bing Chat pe un Mac, deschideți un browser web și vizitați site-ul web Bing. Conectați-vă la contul Microsoft și apoi selectați pictograma Bing Chat. De acolo, urmați instrucțiunile și sfaturile de pe această pagină pentru utilizarea asistentului Microsoft Bing AI pe Mac.
Cum să obțineți componente în Rimworld
Cum să obțineți componente în Rimworld
Componentele sunt elementele de bază ale practic orice folosiți în Rimworld. Dacă joci un joc fără Componente, nu vei ajunge prea departe. Aveți nevoie de aceste articole pentru a construi nave, arme de foc, dispozitive electrice și altele. Dar cum anume
Cum să adăugați un ton de apel pe iPhone 6S
Cum să adăugați un ton de apel pe iPhone 6S
Când vine vorba de personalizarea iPhone-ului, unul dintre cele mai bune lucruri pe care le puteți face este să personalizați tonul de apel. În timp ce personalizarea pe iPhone lipsește în multe domenii diferite, cel puțin suntem capabili să ne schimbăm
Activați Citirea cu voce tare pentru fișiere PDF în Microsoft Edge Chromium
Activați Citirea cu voce tare pentru fișiere PDF în Microsoft Edge Chromium
Cum se activează citirea cu voce tare pentru fișiere PDF în Microsoft Edge Chromium Microsoft Edge Chromium a primit o îmbunătățire a funcției de citire cu voce încorporată. Acum poate fi activat pentru fișierele PDF pe care le-ați citit în browser.Publicitate Această caracteristică nu este nouă pentru aplicația Edge. Omologul său EdgeHTML moștenit îl avea deja disponibil
Google Earth vs Google Earth Pro
Google Earth vs Google Earth Pro
Cel mai probabil ați auzit despre Google Earth. Dar ați auzit vreodată de fratele său mai mic, Google Earth Pro? Acest articol va analiza în profunzime ambele versiuni ale acestui software popular și va explica tot ce aveți nevoie
Ce este nou în Firefox 54
Ce este nou în Firefox 54
O nouă versiune a popularului browser Mozilla Firefox este disponibilă. Versiunea 54 are capturi de ecran, marcaje mobile, o interfață de utilizator rafinată pentru descărcări și procese de conținut multiproces. Reclamă Începând cu versiunea 54, funcția de conținut multiproces (e10s) este activată în mod implicit. Acest lucru îmbunătățește fiabilitatea Firefox, deoarece dacă o filă se blochează, cealaltă o va face