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 de dezvoltatori web ale 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.
Inspectați un anumit element 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 să navigați între elementele părinte și copil făcând clic pe pantele de pescuit din bara de instrumente.
Apasă pe HTML pentru a vizualiza codul HTML al elementului selectat în momentul respectiv.
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.
Apasă pe Stil pentru a vedea regulile CSS aplicate elementului selectat.
Există, de asemenea, 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 elementul CSS în zbor din panoul Reguli. Debifați oricare dintre casetele de selectare pentru a dezactiva o regulă, faceți clic pe text pentru a modifica 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 cu caractere aldine.
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 î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ările de rețea, mesajele de eroare CSS, mesajele de eroare JavaScript și mesajele 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, Consola Web 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 Consolei Web de pe site-ul Web al dezvoltatorului Mozilla.
Obțineți mai multe instrumente opțiunea vă va duce la colecția de aplicații pentru dezvoltatorii Web din site-ul 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 de câțiva ani, este posibil să vă amintiți Inspectorul DOM. Instrumentele de dezvoltare integrate ale Firefox au parcurs mult timp de atunci.
