Instrumentul pentru dezvoltatori Inspect Element din Firefox vă permite să identificați codul HTML pentru orice vedeți pe pagina dvs. web. HTML și foaia de stil CSS însoțitoare sunt complet editabile odată ce aceste instrumente sunt deschise. Experimentați cu orice modificări doriți, apoi reîmprospătați pagina pentru a reveni la aspectul dorit al paginii web.
Pași
Partea 1 din 2: Elemente de inspecție
Pasul 1. Faceți clic dreapta pe orice element de pagină web
Puteți face clic dreapta pe imagini, text, fundaluri sau orice alt element. Dacă nu aveți un mouse cu două butoane, faceți clic stânga în timp ce țineți apăsat Control.
Pasul 2. Faceți clic pe Inspectare element din meniul derulant
O bară de instrumente ar trebui să apară în partea de jos a ferestrei. Un panou va apărea, de asemenea, sub bara de instrumente, afișând codul HTML al paginii.
Pasul 3. Identificați barele de instrumente și panourile
Când faceți clic pe Inspectare element, se vor deschide mai multe panouri în partea de jos a ferestrei. Iată o defalcare a utilizărilor și denumirilor acestora:
- Rândul superior este Bara de instrumente Toolbox. Acesta are mai multe instrumente pentru dezvoltatori, dar suntem interesați de inspectorul din stânga. Păstrați acest lucru selectat (evidențiat în albastru) pentru întregul ghid.
- Sub bara de instrumente, există un singur rând de pesmet din elemente HTML, care arată calea completă referitoare la elementul selectat.
- Panoul de sub acest rând arată arborele HTML sau „Vizualizare de marcare” a paginii. Codul HTML pentru elementul selectat este evidențiat și centrat în acest panou.
- Panoul din dreapta afișează foaia de stil CSS pentru această pagină.
Pasul 4. Selectați un alt element
Odată ce bara de instrumente este deschisă, selectarea unui alt element este ușoară. Iată trei moduri de a face acest lucru:
- Plasați cursorul peste o linie de HTML pentru a evidenția elementul corespunzător (necesită Firefox 34+). Faceți clic pe HTML pentru a selecta acel element.
- Faceți clic pe instrumentul Selectare element din extrema stângă a barei de instrumente: pictograma este un cursor peste un pătrat. Mutați cursorul peste pagină pentru a evidenția elementele, apoi faceți clic pentru a selecta un element.
Pasul 5. Navigați prin cod
Faceți clic oriunde în panoul HTML. Utilizați săgețile stânga și dreapta de pe tastatură pentru a vă deplasa prin cod (necesită Firefox 39+). Acest lucru este util pentru elementele prea mici pentru a fi selectate manual.
- HTML-ul gri se referă la elementele care nu sunt afișate pe pagină. Aceasta include comentarii, anumite noduri precum și elemente care au fost ascunse cu proprietatea de afișare CSS.
- Faceți clic pe săgeata din stânga containerelor pentru a extinde sau a ascunde conținutul acesteia. Pentru a extinde tot conținutul, țineți apăsat alt="Imagine" sau opțiune în timp ce dați clic.
Pasul 6. Căutați un element
Căutați bara de căutare (pictograma lupă) din extrema dreaptă a rândului pesmet. Faceți clic pe acesta pentru ao extinde, apoi introduceți codul HTML pe care îl căutați. Pe măsură ce tastați, va apărea un popup care conține elemente potrivite. Faceți clic pe unul pentru a selecta acel element și derulați panoul HTML până la codul său.
Partea 2 din 2: Editarea codului HTML
Pasul 1. Reîmprospătați pagina pentru a o relua în orice moment
Dacă sunteți nou în instrumentele pentru dezvoltatori web, înțelegeți că acestea nu fac modificări permanente. Modificările dvs. vor fi vizibile numai pe ecran și numai până când închideți pagina sau o reîmprospătați. Nu ezitați să experimentați chiar dacă nu sunteți sigur ce se va întâmpla.
Pasul 2. Faceți dublu clic pe HTML pentru a edita textul
Faceți dublu clic pe o linie de HTML. Tastați noul text și apăsați Enter pentru a salva modificările.
Pasul 3. Faceți clic și țineți apăsat un pesmet pentru mai multe opțiuni
Amintiți-vă, bara de instrumente Breadcrumb este amplasată între arborele HTML complet și bara de instrumente superioară. Faceți clic și țineți apăsat pe oricare dintre elementele din acest rând pentru a deschide un meniu extins. Iată un ghid incomplet pentru aceste opțiuni:
- „Editați ca HTML” face ca nodul și întregul său conținut să poată fi editate în arborele HTML, în loc să fie nevoie să editați fiecare linie individual.
- „Copy Inner HTML” copiază tot conținutul nodului, în timp ce „Copy Outer HTML” copiază și nodul (cum ar fi sau
- „Lipire →” duce la mai multe opțiuni pentru unde să lipiți, cum ar fi înainte de acest nod sau după primul copil al nodului.
- : hover,: active și: focus schimbă aspectul elementului atunci când utilizatorul interacționează cu acesta. Efectul exact este determinat de 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-l în sus sau în jos în copac și eliberați-l când linia punctată se află în locul dorit.
Acest lucru necesită Firefox 39 sau o versiune ulterioară
Pasul 5. Închideți bara de instrumente pentru dezvoltatori
Pentru a închide toate aceste ferestre fanteziste, trebuie doar să apăsați X în colțul din dreapta extrem al barei de instrumente, deasupra panoului CSS.
sfaturi
- De asemenea, puteți deschide bara de instrumente cu aceste opțiuni de meniu de sus:
- Windows: Firefox → Dezvoltator web → Comutare instrumente
- Mac sau Linux: Instrumente → Dezvoltator web → Comutare instrumente
- Firefox 40 a introdus opțiunea de a ascunde panoul CSS pentru a vă oferi mai mult spațiu în timp ce editați HTML. Căutați pictograma săgeată din extrema dreaptă a rândului de pesmet, în dreapta barei de căutare. Faceți clic pe această pictogramă pentru a ascunde panoul CSS și faceți clic din nou pe acesta pentru ao extinde din nou.
- Panoul CSS este, de asemenea, editabil, dar acest lucru depășește sfera acestui ghid. Acest articol învață elementele de bază CSS.
