Vedeți codul HTML și CSS al oricărei pagini Web
Site-ul web este construit cu linii de cod , dar rezultatul este pagini specifice cu imagini, video, fonturi și multe altele. Pentru a schimba unul dintre aceste elemente sau pentru a vedea de la care este compus, trebuie să găsiți linia specifică de cod care o controlează. Puteți face acest lucru cu un instrument de inspecție element.
Majoritatea browserelor web nu vă fac să descărcați un instrument de inspecție sau să instalați un add-on. În schimb, acestea vă permit să faceți clic dreapta pe elementul de pagină și să alegeți Inspectați sau inspectați elementul . Cu toate acestea, procesul poate fi diferit în browser.
Inspectați elementele din Chrome
Cele mai recente versiuni ale Google Chrome vă permit să inspectați pagina în câteva moduri, toate folosind Chrome DevTools încorporate:
- Faceți clic dreapta pe ceva pe pagină (sau pe o zonă goală) și selectați Inspectați
- Introduceți comanda rapidă Ctrl + Shift + I
- Utilizați meniul Chrome pentru a accesa opțiunea Mai multe instrumente> Instrumente pentru dezvoltatori
Chrome DevTools vă permite să faceți lucruri precum copierea sau editarea cu ușurință a liniilor HTML sau ascunderea sau ștergerea elementelor în totalitate (până când se reîncarcă pagina).
Odată ce DevTools se deschide în partea laterală a paginii, puteți să schimbați poziția poziționată, să o scoateți din pagină, să căutați toate fișierele paginii, să selectați elemente din pagină pentru examinări specifice, să copiați fișiere și adrese URL și chiar să personalizați o grămadă din setări.
Inspectați Elementele din Firefox
Ca Chrome, Firefox are câteva moduri diferite de a-și deschide instrumentul numit Inspector:
- Faceți clic dreapta pe o zonă necompletată a paginii sau alegeți un element și selectați Inspectați Elementul
- Introduceți Ctrl + Shift + T sau Ctrl + Shift + I cu tastatura
- Din meniul Firefox, faceți clic pe Developer > Inspector
- Din meniul Instrumente , faceți clic pe Web Developer> Inspector
Pe măsură ce mutați mouse-ul peste diferite elemente din Firefox, instrumentul Inspector găsește automat informațiile despre codul sursă al elementului. Faceți clic pe un element, iar căutarea "pe loc" se va opri și puteți examina elementul din fereastra Inspector.
Faceți clic cu butonul din dreapta pe un element pentru a găsi toate controalele acceptate. Puteți face lucruri cum ar fi modificarea paginii ca HTML, copierea sau lipirea codului HTML interior sau exterior, afișarea proprietăților DOM, screenshot sau ștergerea nodului, aplicarea cu ușurință a atributelor noi, a vizualizării întregii CSS a paginii și multe altele.
Inspectați Elementele din Opera
Opera poate inspecta și ele elementele, cu instrumentul DOM Inspector care este identic cu cel al lui Chrome. Iată cum puteți ajunge la el:
- Utilizați comanda rapidă de la tastatură Ctrl + Shift + I
- Navigați la meniul> Mai multe instrumente> Afișați meniul dezvoltatorului , apoi deschideți meniul prin Meniu> Dezvoltator> Instrumente pentru dezvoltatori
- Din meniul cu butonul din dreapta pe orice element din pagină, alegeți Inspect element
Inspectați elementele din Internet Explorer
Un instrument similar pentru elementul de inspectare, numit Instrumente pentru dezvoltatori, este disponibil în Internet Explorer:
- Apăsați tasta F12 de pe tastatură
- Utilizați opțiunea Instrumente> F12 pentru dezvoltator (apăsați Alt + X dacă nu vedeți meniul Instrumente )
- Faceți clic dreapta pe pagină și faceți clic pe Inspectați elementul
IE are un instrument de element Selectare în acest nou meniu care vă permite să faceți clic pe orice element de pagină pentru a vedea detaliile sale HTML și CSS. De asemenea, puteți dezactiva / activa ușor evidențierea elementului în timp ce navigați prin fila DOM Explorer .
Ca și celelalte instrumente de inspector pentru elementele din browserele de mai sus, Internet Explorer vă permite să tăiați, să copiați și să inserați elemente, precum și să editați codul HTML, să adăugați atribute, elemente de copiere cu stilurile atașate și multe altele.