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

Cum să ieși forțat dintr-o aplicație în Mac OS X
Cum să ieși forțat dintr-o aplicație în Mac OS X
Forțarea unei aplicații care nu răspunde să renunțe pe Mac este un mod rapid și eficient de a opri încărcarea unui program sau a celui care rulează prea lent. Poate fi o aplicație care dorește să rămână deschisă
Cum să afișați Windows unul lângă altul în Windows 10
Cum să afișați Windows unul lângă altul în Windows 10
Iată cum să afișați toate ferestrele unul lângă altul în Windows 10. Puteți să le aranjați folosind o comandă specială din meniul contextual al barei de activități.
Descarcă Descarcă S7Reflex Skin pentru Winamp
Descarcă Descarcă S7Reflex Skin pentru Winamp
Descărcați S7Reflex Skin pentru Winamp. Aici puteți descărca skinul S7Reflex pentru Winamp. Toate creditele sunt destinate autorului original al acestui skin (consultați informațiile despre skin în preferințele Winamp). Autor:. Descărcați „Descărcați S7Reflex Skin pentru Winamp” Dimensiune: 1,24 Mb AdvertismentPCRepair: Remediați problemele Windows. Toti. Link de descărcare: Faceți clic aici pentru a descărca
Dezactivați fluxul de știri pe pagina Filă nouă în Microsoft Edge
Dezactivați fluxul de știri pe pagina Filă nouă în Microsoft Edge
Cum se dezactivează fluxul de știri pe pagina Filă nouă în Microsoft Edge Chromium. Cea mai recentă versiune Canary a Microsoft Edge Chromium vine cu o opțiune mult așteptată
Firefox 48 va veni cu „Electrolysis” (proces pe filă) activat
Firefox 48 va veni cu „Electrolysis” (proces pe filă) activat
Firefox 48 este așteptat să fie lansat în august 2016. Modul multiproces, cunoscut sub numele de „electroliză” sau doar e10 va fi activat în mod implicit în această versiune.
Adăugați efecte 3D la imagini cu fotografii în Windows 10
Adăugați efecte 3D la imagini cu fotografii în Windows 10
Aplicația Windows 10 Photos încorporată, care permite adăugarea de efecte 3D și obiecte 3D la imaginile dvs. Iată cum se poate face.
Cum să activați Bubble Chat în Roblox
Cum să activați Bubble Chat în Roblox
Dezvoltarea propriului joc în Roblox este o experiență uimitoare. Cu siguranță ați depus mult efort și timp pentru a proiecta toate detaliile, doar pentru a vă bloca potențial cu opțiunea Bubble Chat. Vestea bună ești tu