Instrumente de browser utile pentru un dezvoltator web

Funcția principală a unui browser este de a afișa pagini web. Cu toate acestea, pentru un dezvoltator web, browserele sunt mult mai utile decât atât. Ori de câte ori vizitați o pagină web, browserul dvs. preia o cantitate enormă de informații valoroase, cum ar fi sursa HTML a paginii, fișierele imagine care apar pe pagină și alte fișiere asociate. Această secțiune descrie cum să utilizați browserul pentru a prelua acele informații.

Notă: Deoarece producătorii de browsere adoră să schimbe numele și locațiile acestor funcții de la o versiune la alta, este posibil ca instrucțiunile de mai jos să nu se aplice dacă utilizați o versiune de browser diferită de cea testată la momentul scrierii acestei secțiuni.

Vizualizare sursă

De departe, cel mai valoros instrument de browser este View Source, care afișează sursa HTML a paginii. Vizualizarea sursei este una dintre cele mai rapide moduri de a învăța cum să codificați. Dacă nu sunteți sigur cum funcționează o anumită caracteristică a HTML, puteți vedea sursa unui site care utilizează funcția, puteți copia și lipi secțiunile de cod, puteți face modificări și puteți vedea ce se întâmplă. Pentru a vizualiza sursa:

Internet Explorer, Firefox: Faceți clic dreapta pe fereastră și selectați View Source.
Safari: Ctrl-clic pe fereastră și selectați View Source.
Opera: Faceți clic dreapta pe fereastră și selectați Source.

(View Source (Firefox))

Deși vizualizarea sursei este incredibil de utilă, țineți cont de aceste două avertismente:

Este în regulă să copiați și să modificați sursa unui site în scopuri de învățare pe computerul dvs. de acasă, dar nu publicați niciun astfel de material pe site-ul dvs. public. Acest lucru este valabil atât pentru textul de pe site, cât și pentru codul sau designul de bază.
Majoritatea site-urilor de pe web au cod de bază teribil de complex. A învăța cum să codificăm prin vizualizarea aleatorie a site-urilor web este ca și cum să înveți cum să compui versuri citind la întâmplare poezii scrise de copii. S-ar putea să întâlniți niște lucruri geniale… dar șansele sunt destul de mici. Nu presupuneți niciodată că doar pentru că telework.ro și-a codificat pagina de start într-un anumit mod, că acesta a fost cel mai bun mod de a face acest lucru.

Salvați imagini

O altă funcție neprețuită de browser este capacitatea de a salva fișiere imagine. De fiecare dată când browserul dvs. vizitează o pagină web, descarcă și toate imaginile care se afișează pe pagină. Puteți salva aceste fișiere și le puteți reutiliza în scopuri educaționale. Pentru a salva o imagine:

Internet Explorer: Faceți clic dreapta pe fereastră și selectați Save Picture As…
Firefox: Faceți clic dreapta pe imagine și selectați Save Image As… pentru a salva imaginea ca fișier, View Image pentru a vedea imaginea singură în browser sau Properties pentru a vedea dimensiunea fișierului imaginii și alte proprietăți.
Safari: Ctrl-clic pe imagine și selectați Save Image to the Desktop pentru a salva imaginea ca fișier sau Open Image in New Window pentru a vizualiza imaginea singură în browser.
Opera: Faceți clic dreapta pe imagine și selectați Save Image… pentru a salva imaginea ca fișier, Open Image pentru a vedea imaginea singură în browser sau Image properties pentru a vedea dimensiunea fișierului imaginii și alte proprietăți.

Ca și în cazul View Source, nu ar trebui să luați niciodată imaginile altcuiva, modificate sau nealterate, și să le publicați pe un site public decât dacă aveți permisiunea. Există numeroase depozite de imagini gratuite peste tot pe web, de unde puteți obține imagini, fundaluri și fotografii care sunt fie în domeniul public, fie oferite sub licențe destul de liberale.

Vizualizați informațiile paginii

Funcția View Page Info oferă informații tehnice secundare despre pagină, cum ar fi dimensiunea paginii în octeți și codificarea textului. Aceste informații ar putea să nu pară atât de utile atunci când începeți, dar sunt de neprețuit pentru programatorii mai avansați. Pentru a vizualiza informațiile paginii:

Internet Explorer: Faceți clic dreapta pe fereastră și selectați Properties.
Firefox: faceți clic dreapta pe fereastră și selectați View Page Info.
Opera: Selectați Tools | Appearance | Panels, bifați caseta de selectare Info și faceți clic pe OK.

(View Page Info (Firefox))

Informațiile afișate variază de la browser la browser. Firefox oferă mai multe informații utile decât Internet Explorer, inclusiv o listă completă a tuturor imaginilor de pe pagină (cu înălțimea, lățimea și dimensiunea în octeți). Opera adoptă o abordare interesantă: dacă activați panoul Info, puteți vizualiza aceste informații alături de fiecare pagină pe care o navigați. Opera oferă, de asemenea, o comandă rapidă (Ctrl-J) pentru afișarea tuturor legăturilor de pe pagină.