13Sep
Meniul Firefox's Web Developer conține instrumente pentru inspectarea paginilor, executarea unui cod JavaScript arbitrar și vizualizarea solicitărilor HTTP și a altor mesaje. Firefox 10 a adăugat un nou instrument de inspector și actualizat Scratchpad.
Noile caracteristici de dezvoltator web ale Firefox, în combinație cu minunatele add-on-uri de dezvoltatori de web, cum ar fi Firebug și Web Developer Toolbar, 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ți ( sau apăsând Q ).De asemenea, puteți lansa inspectorul 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 butonul
Inspect din 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 pantele de pescuit din bara de instrumente.
HTML Inspector
Faceți clic pe butonul 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 View Source Source din meniul Web Developer.
Inspector CSS
Faceți clic pe butonul Style 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 butoanele și .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 modifica o regulă sau adăugați propriile reguli elementului din partea de sus a panoului. Aici am adăugat greutatea fontului : caractere aldine; rulează CSS, făcând textul elementului îngroșat.
JavaScript Scratchpad
Scratchpad-ul a văzut de asemenea 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 meniul Executați și selectați Run . 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ă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 fereastra window.console.log( "Hello World"); Codul JavaScript în 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.
Actualizaț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.
Încă de la 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 Obțineți mai multe instrumente vă duce la colecția de aplicații Web Developer's Toolbox de pe 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 pentru câțiva ani, este posibil să vă amintiți Inspectorul DOM.Instrumentele de dezvoltare integrate ale Firefox au parcurs mult timp de atunci.