Pagina pe care o citiți este alcătuită, printre altele, de codul sursă. Aceasta este informația descărcată de browserul dvs. web și care se traduce în ceea ce citiți chiar acum.
Majoritatea browserelor web oferă posibilitatea de a vedea codul sursă al unei pagini web fără software suplimentar necesar, indiferent de tipul de dispozitiv pe care vă aflați.
Unele oferă chiar funcționalitate și structură avansate, făcând mai ușoară perceperea codului HTML și a altor coduri de programare pe pagină.
De ce doriți să vedeți codul sursă?
Există mai multe motive pentru care poate doriți să vedeți codul sursă al unei pagini. Dacă sunteți un dezvoltator de web, probabil că doriți să aruncați o privire sub capace la stilul sau implementarea particulară a unui alt programator. Poate că sunteți în asigurarea calității și încercați să aflați de ce o anumită parte a unei pagini web este redată sau comportându-se așa cum este ea.
Ați putea fi, de asemenea, un începător care încearcă să învețe cum să codifice propriile pagini și căutând câteva exemple din lumea reală. Desigur, este posibil să nu intrăți în niciuna dintre aceste categorii și să doriți doar să vedeți sursa din curiozitate.
Mai jos sunt prezentate instrucțiuni privind modul de vizualizare a codului sursă în browser-ul dvs. de alegere.
Google Chrome
Se execută pe: Chrome OS, Linux, MacOS, Windows
Versiunea desktop a browserului Chrome oferă trei metode diferite pentru vizualizarea codului sursă al unei pagini, prima și cea mai simplă, utilizând următoarea comandă rapidă de la tastatură: CTRL + U ( COMMAND + OPTION + U pe macOS).
Când este apăsată, această comandă rapidă deschide o filă nouă a browserului care afișează codul HTML și alt cod pentru pagina activă. Această sursă este codată în culori și structurată într-o manieră care face mai ușor compartimentarea și găsirea a ceea ce căutați. De asemenea, puteți ajunge acolo introducând următorul text în bara de adrese a browserului Chrome, atașată la partea stângă a adresei URL a paginii web și apăsând tasta Enter : sursa de vizualizare: (de exemplu, sursa de vizualizare: https: // www .).
Cea de-a treia metodă este prin instrumentele de dezvoltare ale dezvoltatorului Chrome, care vă permit să vă aruncați mai adânc în codul paginii, precum și să-l optimizați în timp ce faceți testări și în scopuri de dezvoltare. Interfața instrumentelor de dezvoltare poate fi deschisă și închisă utilizând această comandă rapidă de la tastatură: CTRL + SHIFT + I ( COMMAND + OPTION + I pe macOS). De asemenea, le puteți lansa urmând următoarea cale.
- Faceți clic pe butonul principal al meniului Chrome, situat în colțul din dreapta sus și reprezentat de trei puncte aliniate vertical.
- Când apare meniul drop-down, plasați cursorul mouse-ului peste opțiunea Mai multe instrumente .
- Când apare submeniul, faceți clic pe Instrumente pentru dezvoltatori .
Android
Afișarea sursei unei pagini web în Chrome pentru Android este la fel de simplă ca adăugarea următorului text în fața adresei sale (sau a adresei URL) și trimiterea acesteia: sursa de vizionare:. Un exemplu de acest lucru ar fi sursa de vizualizare: https: // www. . HTML și alte coduri din pagina în cauză vor fi afișate instantaneu în fereastra activă.
iOS
Deși nu există metode native pentru vizualizarea codului sursă utilizând Chrome pe iPad, iPhone sau iPod touch, cea mai simplă și eficientă este să utilizați o soluție terță parte, cum ar fi aplicația View Source.
Disponibil pentru $ 0.99 în App Store, View Source vă solicită să introduceți adresa URL a paginii (sau copiați-o / inserați-o din bara de adrese Chrome, care este uneori cea mai simplă cale de urmat) și asta este. Pe lângă afișarea codului HTML și a altor coduri sursă, aplicația are, de asemenea, file care afișează activele individuale ale paginilor, modelul de obiect document (DOM), precum și dimensiunea paginii, cookie-urile și alte detalii interesante.
Microsoft Edge
Se rulează pe: Windows
Browserul Edge vă permite să vizualizați, să analizați și chiar să manipulați codul sursă al paginii curente prin interfața Tools Developer . Pentru a accesa acest set de instrumente la îndemână, puteți utiliza una dintre aceste comenzi rapide de la tastatură: F12 sau CTRL + U. Dacă preferați mouse-ul, faceți clic pe butonul Edge (trei puncte aflat în colțul din dreapta sus) și alegeți opțiunea F12 Developer Tools din listă.
După ce instrumentele dev se execută pentru prima dată, Edge adaugă două opțiuni suplimentare în meniul contextual al browserului (accesibil prin clic-dreapta oriunde în cadrul unei pagini web): Inspectați elementul și Vizualizați sursa , acesta din urmă deschizând porțiunea Debugger a dev unelte de interfață populate cu cod sursă.
Mozilla Firefox
Rulează pe: Linux, macOS, Windows
Pentru a vizualiza codul sursă al unei pagini în versiunea de desktop a Firefox, puteți apăsa CTRL + U ( COMAND + U pe macOS) pe tastatură, care va deschide o nouă filă care conține cod HTML și alt cod pentru pagina web activă.
Tastând următorul text în bara de adrese a browserului Firefox, direct în stânga adresei URL a paginii, va apărea aceeași sursă în fila curentă: sursa de vizionare: (adică sursa de vizionare: https: // www. .
O altă modalitate de a accesa codul sursă al unei pagini este prin intermediul instrumentelor pentru dezvoltatori ale Firefox, accesibile prin următorii pași.
- Faceți clic pe butonul din meniul principal, situat în colțul din dreapta sus al ferestrei browserului dvs. și reprezentat de trei linii orizontale.
- Când apare meniul pop-out, faceți clic pe pictograma "cheie cheie" a dezvoltatorului .
- Actualul meniu Web Developer trebuie să fie vizibil. Selectați opțiunea Sursă pagină .
Firefox vă permite, de asemenea, să vizualizați codul sursă pentru o anumită porțiune a unei pagini, facilitând astfel izolarea problemelor. Pentru a face acest lucru, evidențiați mai întâi zona cu care vă interesează mouse-ul. Apoi, faceți clic dreapta și alegeți Vizualizare sursă de selecție din meniul contextual al browserului.
Android
Vizualizarea codului sursă în versiunea Android a Firefox este posibilă prin prefixarea adresei URL a paginii web cu următorul text: sursa de vizionare:. De exemplu, pentru a vizualiza sursa HTML, trimiteți următorul text în bara de adrese a browserului: sursa de vizualizare: https: // www. .
iOS
Metoda recomandată pentru vizualizarea codului sursă a paginii web pe iPad, iPhone sau iPod touch este prin aplicația View Source, disponibilă în App Store pentru $ 0.99. Deși nu este integrat direct cu Firefox, puteți să copiați cu ușurință și să inserați o adresă URL din browser în aplicație pentru a dezvălui codul HTML și alt cod asociat paginii respective.
Apple Safari
Rulează pe iOS și macOS
iOS
Deși Safari pentru iOS nu include posibilitatea de a vizualiza sursa de pagină în mod prestabilit, browserul se integrează mai degrabă cu aplicația View Source - disponibilă în App Store pentru $ 0.99.
După ce ați instalat această aplicație terță parte în browser-ul Safari și apăsați pe butonul Share, situat în partea de jos a ecranului și reprezentat de o săgeată pătrată și o săgeată sus. Fișa de distribuire iOS ar trebui să fie acum vizibilă, suprapunând jumătatea inferioară a ferestrei Safari. Derulați spre dreapta și selectați butonul Vizualizare sursă .
Ar trebui să fie afișată acum o reprezentare structurată a codului sursă al codului de culoare, împreună cu alte file care vă permit să vizualizați activele paginii, scripturile și multe altele.
MacOS
Pentru a vedea codul sursă al unei pagini în versiunea desktop a Safari, trebuie mai întâi să activați meniul său Dezvoltare . Pașii de mai jos vă trec prin activarea acestui meniu ascuns și afișarea sursei HTML a unei pagini.
- Faceți clic pe Safari din meniul browserului, situat în partea de sus a ecranului.
- Când apare meniul drop-down, selectați opțiunea Preferințe .
- Preferințele Safari ar trebui să fie acum vizibile. Faceți clic pe pictograma Avansat , situată în partea dreaptă a rândului de sus.
- Spre sfarsitul sectiunii Advanced este o optiune eticheta Show Development din bara de meniu insotita de o casuta de validare. Faceți clic pe această casetă o dată pentru a introduce un marcaj de selectare în ea și închideți fereastra Preferințe făcând clic pe roșu "x" găsit în colțul din stânga sus.
- Faceți clic pe meniul Dezvoltare , situat în partea de sus a ecranului.
- Când apare meniul drop-down, selectați Afișați sursa paginii . De asemenea, puteți folosi următoarea comandă rapidă de la tastatură: COMMAND + OPTION + U.
Operă
Rulează pe: Linux, macOS, Windows
Pentru a vizualiza codul sursă din pagina web activă din browserul Opera, utilizați următoarea comandă rapidă de la tastatură: CTRL + U ( COMMAND + OPTION + U pe macOS). Dacă preferați încărcarea sursei în fila curentă, introduceți următorul text în stânga adresei URL a paginii în bara de adrese și apăsați Enter : sursa de vizualizare: (de exemplu, sursa de vizualizare: https: // www. ).
Versiunea desktop a programului Opera vă permite de asemenea să vizualizați sursa HTML, CSS și alte elemente utilizând instrumentele sale integrate de dezvoltare . Pentru a lansa această interfață, care va apărea în mod implicit în partea dreaptă a ferestrei principale de browser, apăsați următoarea comandă rapidă de la tastatură: CTRL + SHIFT + I ( COMAND + OPTION + I pe macOS).
Setul de instrumente pentru dezvoltatori este accesibil și prin următorii pași.
- Faceți clic pe sigla Opera, situată în colțul din stânga sus al ferestrei browserului.
- Când apare meniul drop-down, plasați cursorul mouse-ului peste opțiunea Mai multe instrumente .
- Dați clic pe meniul Afișați dezvoltatorul .
- Faceți din nou clic pe sigla Opera.
- Când apare meniul drop-down, plasați cursorul pe Developer .
- Când apare submeniul, faceți clic pe Instrumente pentru dezvoltatori .
Vivaldi
Există mai multe moduri de a vedea sursa de pagină în browserul Vivaldi. Cea mai simplă este prin comanda rapidă CTRL + U , care prezintă codul din pagina activă într-o filă nouă.
De asemenea, puteți adăuga următorul text în partea din față a paginii URL, care afișează codul sursă în fila prezentă: sursa de vizualizare:. Un exemplu de acest lucru ar fi vedere-sursa: http: // www. .
O altă metodă este prin intermediul instrumentelor de dezvoltare integrate ale browserului, accesibile prin apăsarea combinației CTRL + SHIFT + I sau prin intermediul opțiunii Tools Developer din meniul de instrumente al browserului - găsită făcând clic pe sigla "V" din colțul din stânga sus. Utilizarea instrumentelor dev permite o analiză mult mai aprofundată a sursei paginii.