Cum se utilizează funcția "Explorați elementul" în Mozilla Firefox

Funcția "Explorați elementul" în Firefox vă va permite să vizualizați codul paginii Web HTML. Prin activarea acestei caracteristici, puteți schimba HTML și CSS. Experimentați, făcând orice modificare și apoi actualizați pagina pentru a reveni la forma sa originală.

Pași

Partea 1 din 2:

Elemente de studiu

unu. Actualizați Firefox (dacă doriți). Nu veți putea să activați toate funcțiile descrise în acest articol dacă lucrați cu vechea versiune a Firefox. Determinați-vă versiunea acestui browser pentru a rula automat actualizarea.

În versiunile Firefox 9 și anterioare ale funcției "Explorați elementul" funcționează deloc.

Imagine intitulată Utilizați elementul Inspectat în Mozilla Firefox Pasul 2

2. Faceți clic dreapta pe orice element de pagină web, de exemplu, după imagine, text, fundal sau alt element. Dacă nu aveți un mouse cu două butoane, apăsați butonul de comandă și faceți clic pe elementul butonului stâng al mouse-ului.

Imagine intitulată Utilizați elementul Inspectat în Mozilla Firefox Pasul 3

3. În meniul care se deschide, selectați "Explorați elementul". În partea de jos a ferestrei, bara de instrumente va apărea și sub ea - partea de jos cu codul paginii HTML.

Imagine intitulată Utilizați elementul Inspectat în Mozilla Firefox Pasul 4

4. Observați barele de instrumente și fundul inferior. Alegerea "Explorați elementul", mai multe funduri se deschide în partea de jos a ferestrei. Iată descrierea lor:

Stringul de top este bara de instrumente. Acesta include mai multe file, dar suntem interesați de primul fila "Inspector" "(pictat în albastru). Nu treceți la alte file.

Sub bara de instrumente există un șir cu operatori de depanare.

Mai jos este partea de jos cu codul paginii HTML. Codul HTML al elementului ales va fi evidențiat (într-un marcator albastru) și este situat în centrul acestei substați.

În mijlocul dreptului veți găsi CSS din această pagină.

Imagine intitulată Utilizați elementul Inspectat în Mozilla Firefox Pasul 5

cinci. Selectați un alt element. Având deschiderea funcțiilor "Explorați elementul", puteți selecta cu ușurință un alt element unul din cele trei moduri:

Deplasați mouse-ul în linia de cod HTML pentru a evidenția elementul corespunzător (în Firefox 34+). Faceți clic pe codul HTML pentru a selecta acest element.

Faceți clic pe pictograma "Selectați elementul de la pagina". Această pictogramă este situată pe bara de instrumente din stânga și are un pătrat cu un cursor. Mouse-ul peste elementul dorit (în partea de jos cu cod HTML), apoi faceți clic pe element pentru ao selecta.

Imagine intitulată Utilizați elementul Inspectat în Mozilla Firefox Pasul 6

6. Codul de navigare HTML. Faceți clic pe orice zonă din partea de jos cu codul HTML. Utilizați tastele săgeată (pe tastatură) pentru a naviga pe cod (în Firefox 39+). Acest lucru este util dacă elementul este destul de mic.

Codul HTML prezentat cu font gri se referă la elemente care nu sunt afișate pe pagină. De exemplu, comentarii, noduri (cum ar fi ) și elemente ascunse cu CSS.

Faceți clic pe săgeata din stânga containerului pentru a implementa sau ascunde conținutul său. Pentru a extinde toate recipientele, faceți clic pe ALT sau Opțiune când faceți clic pe.

Imagine intitulată Utilizați elementul Inspectat în Mozilla Firefox Pasul 7

7. Găsiți elementul. La rândul cu operatorii de depanare, găsiți pictograma sub formă de geam de lupă (dreapta). Faceți clic pe această pictogramă pentru a deschide șirul de căutare și pentru a introduce codul HTML în el pe care îl căutați. Ca fereastra pop-up cu elementele corespunzătoare se deschide. Faceți clic pe elementul dorit și derulați prin codul HTML pentru a găsi codul acestui articol.

Partea 2 din 2:

Editarea codului HTML

unu. Actualizați pagina pentru a anula toate modificările pe care le-ați introdus. Amintiți-vă că modificările făcute vor fi afișate numai pe ecran, adică nu sunt constante. Închiderea sau actualizarea paginii, acesta va reveni la forma originală. Deci, nu vă fie frică să experimentați, chiar dacă nu vă imaginați cu adevărat ce va duce la.

Imagine intitulată Utilizați elementul Inspectat în Mozilla Firefox Pasul 9

2. Faceți dublu clic pe codul HTML pentru ao edita. Introduceți noul cod și apăsați ENTER pentru a salva modificările.

Imagine intitulată Utilizați elementul Inspectat în Mozilla Firefox Pasul 10

3. Țineți apăsat un șir cu operatorii de depanare pentru a accesa opțiuni suplimentare. Acest șir este situat între bara de instrumente și la sol cu cod HTML. Iată o listă incompletă de opțiuni suplimentare:

"Editați ca HTML". Vă permite să editați un nod întreg și toate conținutul său, nu liniile individuale.

"Copiați HTML intern". Copiază toate conținutul nodului și copiile opțiunii "copy extern HTML" Copies și nod (de exemplu,

sau ).

"Introduce". Inserțiile de opțiuni se vor deschide, de exemplu, în fața nodului sau după nod.

": Hover", ": Activ", ": Focus". Schimbați aspectul elementului. Efectul exact este determinat de CSS (editat în partea dreaptă).

Imagine intitulată Utilizați elementul Inspectat în Mozilla Firefox Pasul 11

4. Tragând. Pentru a rearanja elementele, apăsați și țineți apăsată codul HTML până când apare linia punctată. Deplasați-l în sus sau în jos și eliberați când linia atinge poziția dorită.

Funcționează numai în Firefox 39+.

Imagine intitulată Utilizați elementul Inspectat în Mozilla Firefox Pasul 12

cinci. Închideți fundul funcțiilor "Explorați elementele". Pentru a face acest lucru, pur și simplu faceți clic pe pictograma "x" (în colțul drept al barei de instrumente).

sfaturi

De asemenea, puteți deschide bara de instrumente după cum urmează:

Windows. Faceți clic pe "Firefox" - "Developer" - "Bara de instrumente".
Mac OS sau Linux. Faceți clic pe "Instrumente" - "Developer" - "Bara de instrumente".

În Firefox 40, puteți ascunde fundul cu codul CSS pentru a extinde partea inferioară cu codul HTML. Pentru a face acest lucru, pe linia cu operatorii de depanare, găsiți pictograma sub forma unei săgeții direcționate spre dreapta (lângă lupă). Faceți clic pe această pictogramă pentru a ascunde fundul cu codul CSS - faceți din nou, faceți clic pe pictograma pentru ao implementa.

De asemenea, puteți edita codul CSS, dar depășește acest articol. Așa că am citit-o Acest articol.