Vizualizați codul sursă al unei pagini Web în fiecare browser

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 (COMANDA + OPȚIUNE + 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 Chrome, atașată la partea stângă a adresei URL a paginii web, și selectând introduce cheie: Vizualizare sursă: (adică, sursa de vizionare: https: //www.Go-Travels.com).

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 pentru dezvoltatori poate fi deschisă și închisă utilizând această comandă rapidă de la tastatură: CTRL + SHIFT + I (COMANDA + OPȚIUNE + I pe macOS). De asemenea, le puteți lansa urmând următoarea cale.

1. Selectați butonul principal al meniului Chrome, situat în colțul din dreapta sus și reprezentat de trei puncte aliniate vertical.

2. Când apare meniul drop-down, plasați cursorul mouse-ului peste Mai multe unelte opțiune.

3. Când apare submeniul, selectați Instrumente de dezvoltare.

Android

Vizualizarea 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: Vizualizare sursă:. Un exemplu ar fi acesta vedere sursa: https: //www.Go-Travels.com . 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. În plus față de afișarea codului HTML și a altui cod sursă, aplicația are, de asemenea, file care afișează elemente individuale ale paginilor, modelul de obiect document (DOM), precum și mărimea 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 următoarele 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 Instrumente de dezvoltare F12 opțiune 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): Inspectează elementul și Vizualizare sursă, acesta din urmă deschizând debugger parte din interfața cu instrumente dev, populată cu cod sursă.

Mozilla Firefox

Rulează pe: Linux, macOS, Windows

Pentru a vizualiza codul sursă al unei pagini în versiunea desktop a Firefox, puteți apăsa CTRL + U (COMMAND + U pe macOS) pe tastatură, care va deschide o filă nouă 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 paginii URL a paginii, va apărea aceeași sursă în fila curentă: Vizualizare sursă: ( adică, sursa de vizionare: https: //www.dotdash.com ).

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.

1. Selectați butonul principal al meniului, situat în colțul din dreapta sus al ferestrei browserului și reprezentat de trei linii orizontale.

2. Când apare meniul pop-out, faceți clic pe Dezvoltator pictograma "cheie".

3. Actualul meniu Web Developer trebuie să fie vizibil. Selectează Sursa paginii opțiune.

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 Vizualizați sursa 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: Vizualizare sursă:. De exemplu, pentru a vedea sursa HTML pentru Dotdash, trimiteți următorul text în bara de adrese a browserului: vedere sursa: https: //www.dotdash.com .

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 implicit, browserul se integrează destul de bine 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 Vizualizare sursă buton.

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 de desktop a Safari, trebuie mai întâi să o activați Dezvolta meniul. Pașii de mai jos vă trec prin activarea acestui meniu ascuns și afișarea sursei HTML a unei pagini.

1. Selectați Safari din meniul browserului, situat în partea de sus a ecranului.

2. Când apare meniul drop-down, selectați Preferințe opțiune.

3. Preferințele Safari ar trebui să fie acum vizibile. Faceți clic pe Avansat pictograma, situată în extrema dreaptă a rândului de sus.

4. Spre sfârșitul secțiunii avansate este o opțiune etichetă Afișați meniul Dezvoltare din bara de meniu, însoțită de o casetă de selectare goală. Selectați 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.

5. Selectează Dezvolta meniu, situat în partea de sus a ecranului.

6. Când apare meniul vertical, selectați Afișați sursa paginii. De asemenea, puteți utiliza următoarea comandă rapidă de la tastatură: COMANDA + OPȚIUNE + U.

Operă

Rulează pe: Linux, macOS, Windows

Pentru a vedea codul sursă din pagina web activă din browserul Opera, utilizați următoarea comandă rapidă de la tastatură: CTRL + U (COMANDA + OPȚIUNE + U pe macOS). Dacă doriți să încărcați mai degrabă sursa în fila curentă, introduceți următorul text în partea stângă a adresei URL a paginii în bara de adrese și apăsați Introduceți: sursa de vizualizare: ( adică, sursa de vizualizare: https: //www.Go-Travels.com ).

Versiunea de desktop a serviciului 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 (COMANDA + OPȚIUNE + I pe macOS).

Setul de instrumente pentru dezvoltatori este accesibil și prin următorii pași.

1. Selectați sigla Opera, localizată în colțul din stânga sus al ferestrei browserului.

2. Când apare meniul drop-down, plasați cursorul mouse-ului peste Mai multe unelte opțiune.

3. Click pe Afișați meniul dezvoltatorului.

4. Selectați din nou sigla Opera.

5. Când apare meniul drop-down, plasați cursorul peste cursă Dezvoltator.

6. Când apare submeniul, selectați Instrumente de dezvoltare.

Vivaldi

Există mai multe moduri de a vedea sursa de pagină în browserul Vivaldi. Cel mai simplu este prin CTRL + U comanda rapidă de la tastatură, 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ă: Vizualizare sursă:. Un exemplu ar fi acesta vedere sursa: http: //www.dotdash.com .

O altă metodă este prin intermediul instrumentelor de dezvoltare integrate ale browserului, accesibile prin apăsarea tastei CTRL + SHIFT + I combinație sau prin Instrumente de dezvoltare în browser Unelte meniu - găsită prin selectarea opțiunii V logo-ul din colțul din stânga sus. Utilizarea instrumentelor dev permite o analiză mult mai aprofundată a sursei paginii.