Cum să utilizați Instrumentele pentru dezvoltatori web ale Firefox

Meniul Firefox Web Developer conține instrumente pentru inspectarea paginilor, executarea unui cod JavaScript arbitrar și vizualizarea cererilor HTTP și a altor mesaje. Firefox 10 a adăugat un nou instrument de inspector și actualizat Scratchpad.

Funcțiile noi ale dezvoltatorului de web ale lui Firefox, în combinație cu minunatele add-on-uri pentru dezvoltatori de web, precum Firebug și Bara de instrumente Web pentru dezvoltatori, fac Firefox un browser ideal pentru dezvoltatorii web. Toate instrumentele sunt disponibile sub meniul Web Developer din meniul Firefox.

Inspector de pagină

Inspectați un element specific făcând clic dreapta pe el și selectând Inspecta (sau presare Q). De asemenea, puteți lansa Inspector din meniul Web Developer.

Veți vedea o bară de instrumente în partea de jos a ecranului, pe care o puteți folosi pentru a controla inspectorul. Elementul selectat va fi evidențiat și alte elemente de pe pagină vor fi estompate.

Dacă doriți să alegeți un element nou, faceți clic pe Inspecta pe bara de instrumente, plasați mouse-ul peste pagină și faceți clic pe elementul dvs. Firefox evidențiază elementul de sub cursorul dvs..

Puteți naviga între elementele părinte și copil, făcând clic pe panglicile din bara de instrumente.

Inspector HTML

Apasă pe HTML pentru a vizualiza codul HTML al elementului selectat curent.

Inspectorul HTML vă permite să extindeți și să restrângeți etichetele HTML, ceea ce face ușor vizualizarea dintr-o privire. Dacă doriți să vedeți HTML-ul paginii într-un fișier plat, puteți selecta Vezi sursa paginii din meniul Web Developer.

Inspectorul CSS

Apasă pe Stil pentru a vedea regulile CSS aplicate elementului selectat.

Există și un panou de proprietăți CSS - comutați între cele două făcând clic pe reguli și Proprietăți butoane. Pentru a vă ajuta să găsiți proprietăți specifice, panoul proprietăților include o casetă de căutare.

Puteți edita CSS-ul elementului în zbor din panoul Reguli. Debifați oricare dintre casetele de selectare pentru a dezactiva o regulă, faceți clic pe text pentru a schimba o regulă sau adăugați propriile reguli elementului din partea de sus a panoului. Aici, am adăugat font-weight: bold; CSS, făcând textul elementului îngroșat.

Scratchpad JavaScript

Scratchpad-ul a văzut și o actualizare cu Firefox 10 și conține acum o evidențiere a sintaxei. Puteți introduce cod JavaScript pentru a rula pe pagina curentă.

După ce faceți, faceți clic pe A executa meniu și selectați Alerga. Codul rulează în fila curentă.

Consola Web

Consola Web înlocuiește vechea Consola de eroare, care a fost depreciată și va fi eliminată într-o versiune ulterioară de Firefox.

Consola afișează patru tipuri diferite de mesaje, pe care le puteți comuta vizibilitatea - solicitări de rețea, mesaje de eroare CSS, mesaje de eroare JavaScript și mesaje de dezvoltatori web.

Ce este un mesaj de dezvoltator web? Este un mesaj imprimat pe obiectul window.console. De exemplu, am putea rula window.console.log ("Hello World"); Codul JavaScript din Scratchpad pentru a imprima un mesaj de dezvoltator la consola. Dezvoltatorii web pot integra aceste mesaje în codul lor JavaScript pentru a ajuta la depanare.

Reîmprospătați pagina și veți vedea solicitările de rețea generate și alte mesaje.

Utilizați caseta de căutare pentru a filtra mesajele; faceți clic pe o solicitare dacă doriți să vedeți mai multe detalii.

Începând cu Firefox 10, Web Console poate funcționa în tandem cu Inspectorul de pagini. Variabila $ 0 reprezintă obiectul selectat în prezent în inspector. De exemplu, dacă doriți să ascundeți obiectul selectat în prezent, puteți rula $ 0.style.display =“none“ în consola.

Dacă sunteți interesat să aflați mai multe despre utilizarea consolei și a funcțiilor sale integrate, consultați pagina Web a Consolei de pe site-ul rețelei dezvoltatorului Mozilla.

Obțineți mai multe instrumente

Obțineți mai multe instrumente opțiunea vă va duce la colecția de programe de adăugare a Instrumentului pentru dezvoltatori web de pe site-ul web Mozilla Add-Ons. Acesta conține unele dintre cele mai bune programe de completare pentru dezvoltatorii web, inclusiv Firebug și Bara de instrumente Web pentru dezvoltatori.

Dacă ați folosit Firefox timp de câțiva ani, este posibil să vă amintiți Inspectorul DOM. Instrumentele de dezvoltare integrate ale Firefox au parcurs un drum lung de atunci.