„Inspect Element” este un instrument pentru dezvoltatori din browserul Firefox pe care îl puteți utiliza pentru a urmări codul HTML pe orice pagină web. Fișele de stil HTML și CSS ale unei pagini web pot fi editate cu „Inspect Element”. Puteți încerca să editați o pagină oricum doriți și să o readuceți la modul în care a fost, reîncărcând pur și simplu pagina web editată.
Etapa
Partea 1 din 2: Verificarea elementelor
Pasul 1. Actualizați Firefox (opțional)
Este posibil să nu puteți accesa funcțiile discutate în acest articol dacă utilizați o versiune mai veche de Firefox. Actualizarea va fi instalată automat atunci când verificați ce versiune de Firefox utilizați.
Firefox 9 și versiunile anterioare nu au deloc instrumentul „Inspect Element”
Pasul 2. Faceți clic dreapta pe orice element de pagină web
Puteți face clic dreapta pe orice imagine, text, fundal sau element. Dacă mouse-ul dvs. are un singur buton, o combinație de clic stânga și tasta Control va avea ca rezultat un clic dreapta.
Pasul 3. Faceți clic pe „Inspectare element” din meniul derulant
O bară de instrumente va apărea în partea de jos a ferestrei. De asemenea, va apărea un panou sub bara de instrumente și va afișa codul HTML pe pagina activă.
Pasul 4. Cunoașteți barele de instrumente și panourile existente
Când utilizați „Inspect Element”, se vor deschide mai multe panouri sub fereastra browserului. Următorul descrie numele și funcțiile barelor de instrumente și ale panourilor din „Inspectare element”:
- În rândul de sus se află Bara de instrumente Toolbox. Există mai multe instrumente de găsit aici, dar ne vom concentra pe butonul Inspector din stânga. Asigurați-vă că acest buton este activ (indicat de culoarea butonului care devine albastru când este activ) în acest ghid.
- Sub aceasta, există o linie de pesmet de elemente HTML care indică locația elementului selectat în prezent.
- Panoul de sub solicitările de navigare afișează arborele HTML sau „Vizualizare markup” a paginii web. Codul HTML al elementului selectat va fi marcat și centrat în acest panou.
- Panoul din dreapta afișează foaia de stil CSS a paginii web curente.
Pasul 5. Selectați un alt element
Când bara de instrumente este deschisă, puteți selecta cu ușurință alte elemente. Există trei moduri de a face acest lucru:
- Plasați cursorul peste o linie de HTML pentru a marca elementul selectat (această caracteristică necesită Firefox 34+). Faceți clic pe HTML pentru a selecta acel element.
- Faceți clic pe instrumentul „Selectare element” din colțul din stânga al barei de instrumente: are o pictogramă în formă de cursor deasupra unei casete. Mutați cursorul pe pagina web pentru a marca un element și faceți clic pentru a-l selecta.
Pasul 6. Urmăriți codul HTML
Faceți clic oriunde în panoul HTML. Utilizați tastele direcționale stânga și dreapta de pe tastatură pentru a vă deplasa de la cod la cod (această caracteristică necesită Firefox 39+). Această metodă este utilă pentru selectarea elementelor care sunt prea mici pentru a fi selectate cu cursorul.
- Codul HTML cu gri indică elemente care nu sunt afișate pe pagină. Elementele incluse în aceasta sunt comentarii, cum ar fi nodurile și alte elemente ascunse de proprietatea de afișare CSS.
- Faceți clic pe săgeata din stânga casetei pentru a afișa sau a ascunde conținutul. Pentru a afișa întregul conținut, țineți apăsat alt="Imagine" sau opțiune în timp ce dați clic pe săgeată.
Pasul 7. Localizați elementul
Căutați câmpul de căutare (pictogramă în formă de buclă) în colțul din dreapta extrem al rândului pesmet. Faceți clic pentru a extinde câmpul de căutare și tastați codul HTML pe care doriți să îl căutați. Pe măsură ce tastați, va apărea o fereastră pop-up care va afișa rezultatele de căutare potrivite. Faceți clic pe un element din rezultatele căutării și derulați panoul HTML până la codul pe care îl căutați.
Partea 2 din 2: Editarea HTML
Pasul 1. Reîncărcați pagina pentru a o lua de la capăt
Dacă sunteți nou în instrumentele de dezvoltare a site-urilor web, rețineți că nu faceți modificări permanente la paginile pe care le editați. Modificările dvs. apar doar pe ecran până când reîncărcați sau închideți pagina. Simțiți-vă liber să experimentați chiar dacă nu știți ce se va întâmpla.
Pasul 2. Faceți dublu clic pe HTML pentru a edita
Faceți dublu clic pe HTML în linie. Tastați noul text și apăsați Enter pentru a salva modificările.
Pasul 3. Faceți clic și țineți apăsat instrumentul în pesmet pentru a afișa mai multe opțiuni
Rețineți că bara de instrumente cu firul de pâine se află între arborele HTML și bara de instrumente de deasupra acestuia. Faceți clic și țineți apăsat un instrument din acest rând pentru a deschide mai multe meniuri. Mai jos este un indiciu al opțiunilor disponibile (nu exhaustive):
- „Editați ca HTML” vă permite să editați direct tot conținutul HTML din arborele HTML în loc să editați fiecare linie.
- „Copy Inner HTML” copiază întregul conținut din interiorul nodului, în timp ce „Copy Outer HTML” copiază conținutul și nodurile (cum ar fi sau
- „Lipire →” afișează mai multe opțiuni pentru unde să lipiți copia, cum ar fi înainte de nod sau după primul copil al nodului.
- : hover,: active și: focus schimbă aspectul elementului atunci când utilizatorul interacționează. Efectele modificate sunt definite din foaia de stil CSS (editabilă din panoul din dreapta).
Pasul 4. Trageți și fixați
Pentru a rearanja elementele din cod, faceți clic și mențineți apăsat codul HTML până când apare o linie punctată. Mutați linia în sus și în jos în copac și eliberați butonul mouse-ului atunci când linia este locul în care doriți.
Această funcție necesită Firefox 39 și versiuni ulterioare
Pasul 5. Închideți bara de instrumente pentru dezvoltatori
Pentru a închide întreaga fereastră Inspectare element, faceți clic pe butonul X din colțul din dreapta sus al barei de instrumente aflat deasupra panoului CSS.
sfaturi
- De asemenea, puteți deschide bara de instrumente din opțiunile de meniu din partea de sus a ferestrei:
- Windows: Firefox → Dezvoltator web → Comutare instrumente
- Mac sau Linux: Instrumente → Dezvoltator web → Comutare instrumente
- Firefox 40 are opțiunea de a ascunde panoul CSS, astfel încât să aveți mai mult spațiu pentru a edita HTML. Căutați pictograma săgeată în colțul din dreapta extrem al rândului pesmet și în dreapta câmpului de căutare. Faceți clic pe această pictogramă pentru a ascunde panoul CSS și faceți clic din nou pentru ao afișa.
- De asemenea, puteți edita panouri CSS, dar acestea nu sunt listate în acest articol. Puteți găsi instrucțiuni pentru editarea codului CSS pe internet.
