DifiTsi.com

Utilizați elementul Inspect în Mozilla Firefox

Cu instrumentul de dezvoltare a elementului Inspect Element din Firefox, puteți vizualiza codul HTML pentru tot ceea ce vedeți pe site-ul dvs. Web. HTML și foaia de stil CSS pot fi complet editate odată ce aceste instrumente sunt deschise. Experimentați modificările dorite și apoi reîmprospătați pagina pentru a reveni la aspectul dorit al paginii web.

metodă

Partea 1
Uită-te la elemente

Imaginea intitulată Utilizați elementul Inspect în Mozilla Firefox Pasul 1
1
Faceți o actualizare în Firefox (opțional). Este posibil să nu aveți acces la toate funcțiile descrise aici dacă aveți o versiune veche de Firefox. Când verificați versiunea dvs. de Firefox, cea mai recentă actualizare este descărcată automat.
  • Firefox 9 și anterior nu au instrumentul Inspect Element.
  • Imaginea intitulată Folosiți elementul Inspect în Mozilla Firefox Pasul 2
    2
    Faceți clic dreapta pe un element al unei pagini Web. Puteți face clic pe imagini, text, fundaluri sau alte elemente. Dacă nu aveți un mouse cu două butoane, faceți clic stânga și apăsați butonul ^ Control.
  • Imaginea intitulată Utilizați elementul Inspect în Mozilla Firefox Pasul 3
    3
    Din meniul derulant, faceți clic pe Inspectați elementul. În partea de jos a ferestrei, ar trebui să fie afișată o bară de instrumente. De asemenea, afișează o bară de mai jos, afișând codul HTML al paginii.
  • Imaginea intitulată Folosiți elementul Inspect în Mozilla Firefox Pasul 4
    4
    Identificați barele de instrumente și barele. Când faceți clic pe Inspectați Elementul, mai multe bare se deschid în partea de jos a ferestrei. Iată un rezumat al aplicațiilor și al denumirilor:
    • Linia de sus este bara de instrumente Toolbox. Are mai multe instrumente pentru dezvoltatori, dar suntem interesați de Button Inspector din stânga. Păstrați-l pentru întregul tutorial (marcat în albastru).
    • Sub bara de instrumente, există o linie de pescuit cu elemente HTML care afișează întreaga cale a elementului selectat.
    • Bara de mai jos arată arborele HTML sau "vizualizarea marcajului" a paginii. Codul HTML al elementului selectat este evidențiat și centrat în această bară.
    • Bara din dreapta afișează foaia de stil CSS pentru această pagină.
  • Imaginea intitulată Folosiți elementul Inspect în Mozilla Firefox Pasul 5
    5
    Alegeți un alt element. Când bara de instrumente este deschisă, selectarea unui alt element este ușoară. Iată două modalități de a face acest lucru:
    • Deplasați mouse-ul peste o linie HTML pentru a evidenția elementul (necesită Firefox 34+). Faceți clic pe codul HTML pentru a selecta acest element.
    • Faceți clic pe instrumentul Selectați elementul din extrema stângă a barei de instrumente: pictograma afișează un cursor pe un pătrat. Deplasați cursorul peste pagină pentru a evidenția elementele, apoi faceți clic pentru a selecta un element.
  • Imaginea intitulată Folosiți elementul Inspect în Mozilla Firefox Pasul 6
    6
    Navigați prin cod. Faceți clic oriunde în bara HTML. Utilizați tastele săgeți pentru a naviga în codul spre stânga și spre dreapta (necesită Firefox 39+). Acest lucru este util pentru elementele care sunt prea mici pentru a selecta manual.
    • Codul HTML gri se referă la elementele care nu sunt afișate pe pagină. Acestea includ comentarii, cum ar fi anumite noduri și elemente care au fost ascunse cu proprietatea de afișare a CSS.
    • Faceți clic pe săgeata din partea stângă a Containerului pentru a afișa sau a ascunde conținutul. Pentru a vizualiza tot conținutul, apăsați Alt sau Opțiune în timp ce faceți clic.


  • Imaginea intitulată Folosiți elementul Inspect în Mozilla Firefox Pasul 7
    7
    Căutați un element. Căutați bara de căutare (pictograma cu o lupă) pe extrema dreaptă a liniei de pescuit. Faceți clic pentru a extinde, apoi introduceți codul HTML pe care îl căutați. În timp ce tastați, un pop-up afișează elemente potrivite. Faceți clic pe unul pentru a selecta acest element și defilați la codul acestuia în bara HTML.

    • Partea 2
    Editați codul HTML

    Imaginea intitulată Folosiți elementul Inspect în Mozilla Firefox Pasul 8
    1
    Reîncărcați pagina pentru a începe din nou. Dacă nu aveți deja experiență cu instrumentele de dezvoltare web, înțelegeți că acestea nu fac modificări permanente. Modificările dvs. pot fi văzute numai pe ecran și numai până când închideți sau reîncărcați pagina. Experimentați calm, chiar dacă nu sunteți sigur ce se întâmplă.
  • Imaginea intitulată Folosiți elementul Inspect în Mozilla Firefox Pasul 9
    2
    Faceți dublu clic pe codul HTML pentru a edita textul. Faceți dublu clic pe o linie HTML. Introduceți textul nou și apăsați Enter pentru a aplica modificările.
  • Imaginea intitulată Folosiți elementul Inspect în Mozilla Firefox Pasul 10
    3
    Faceți clic pe o bucată de pâine pentru mai multe opțiuni și țineți apăsat butonul mouse-ului. Amintiți-vă că bara de instrumente breadcrumbs este situată între arborele HTML și bara de instrumente de sus. Faceți clic pe unul dintre elementele din acest rând și țineți apăsat butonul mouse-ului pentru a deschide un meniu complet. Iată un ghid parțial 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 rând în parte.
    • Copiați codul HTML intern copiază tot conținutul nodului, în timp ce Copy Outer HTML copiază de asemenea nodul (de ex.
      sau .)
    • "Paste →" are ca rezultat mai multe opțiuni pentru locul de inserare, de ex. înainte de acest nod sau după primul copil al nodului.
    •  : hover ,: active și: focalizați modificarea afișării elementului atunci când utilizatorul interacționează cu acesta. Efectul exact este determinat de foaia de stil CSS (poate fi editat în bara din dreapta).
  • Imaginea intitulată Folosiți elementul Inspect în Mozilla Firefox Pasul 11
    4
    trage Picătură. Pentru a rearanja elementele din cod, faceți clic și țineți apăsat codul HTML până când apare o linie întreruptă. Mutați-o în sus sau în jos în copac și eliberați butonul mouse-ului când linia întreruptă se află în poziția dorită.
    • Acest lucru necesită Firefox 39 sau mai nou.
  • Imaginea intitulată Folosiți elementul Inspect în Mozilla Firefox Pasul 12
    5
    Închideți bara de instrumente pentru dezvoltatori. Pentru a închide toate aceste ferestre, apăsați pur și simplu tasta X din extrema dreaptă a barei de instrumente, deasupra barei CSS.

    • Sfaturi

    • De asemenea, puteți deschide bara de instrumente cu aceste opțiuni în meniul de sus:

      • Windows: Firefox → Web Developer → Instrumente
      • Mac sau Linux: Instrumente → Dezvoltator Web → Instrumente
    • Firefox 40 a introdus opțiunea de a ascunde bara CSS, astfel încât să aveți mai mult spațiu atunci când editați codul HTML. Căutați pictograma cu săgeata de pe extrema dreaptă din linia de pescuit, în partea dreaptă a barei de căutare. Faceți clic pe această pictogramă pentru a ascunde bara CSS și faceți clic din nou pentru ao afișa din nou.
    • Bara CSS este, de asemenea, editabilă, însă acest lucru depășește domeniul de aplicare al acestui ghid.
    Distribuiți pe rețelele sociale:

    înrudit