Unelte pentru dezvoltatori Firefox

Examinați, editați și depanați HTML, CSS și JavaScript pe desktop sau pe mobil

Ce este nou în Firefox Developer Edition?

Firefox Developer Edition este o versiune a Firefox adaptată pentru dezvoltatori, care dispune de ultimele facilități Firefox și unelte experimentale pentru dezvoltatori. Versiunea curentă include următoarele îmbunătățiri ale uneltelor pentru dezvoltatori:

Partajați-vă ideile

Solicitați facilități noi ale uneltelor pentru dezvoltatori sau votați pentru ideile altora.

Creare

Unelte pentru crearea site-urilor și aplicațiilor web.

Editor JavaScript: Editor de text incorporat în Firefox care vă permite să scrieți și să executați JavaScript.
Editor de stil: Vizualizați și editați stilurile CSS pentru pagina curentă.
Shader Editor: Vizualizați și editați vertexul și fragmentele shaderelor utilizate de WebGL.
Editor audio web: Examinați graficul nodurilor audio într-un context audio și modificați-le parametrii.

Explorare și depanare

Examinați, explorați și depanați site-uri și aplicații web.

Consolă web: Vedeți mesajele afișate de pagina web și interacționați cu ea utilizând JavaScript.
Inspector de pagină: Vedeți și modificați HTML și CSS din pagină.
Depanator JavaScript: Întrerupeți, parcurgeți pas cu pas, examinați și modificați JavaScript care rulează într-o pagină.
Monitorizare rețea: Vedeți cererile de rețea efectuate la încărcarea unei pagini.
Inspector de stocare: Inspectați cookies, stocarea locală, indexedDB și stocarea sesiunilor prezente într-o pagină.
Bară de dezvoltare: O interfață a liniei de comandă pentru unelte de dezvoltare.
Vedere 3D: Vizualizare în 3D a unei pagini.
Pipetă: Selectați o culoare din pagină.
Lucrul cu iframe: Cum să țintiți un iframe concret.

Mobil

Unelte pentru dezvoltare pentru mobil.

App Manager: Proiectați și dezvoltați aplicații pentru Firefox OS.
WebIDE: Înlocuitor al App Manager, disponibil începând cu Firefox 33.
Firefox OS Simulator: Rulați și depanați aplicații Firefox OS pe desktop, fără a fi nevoie de un dispozitiv real Firefox OS.
Vedere design receptiv: Vedeți cum site-ul sau aplicația va arăta pe diferite dimensiuni ale ecranului fără a modifica dimensiunea ferestrei navigatorului.
Depanare în Firefox pentru Android: Conectați uneltele de dezvoltare la Firefox pentru Android.
Valence: Conectați uneltele de dezvoltare la Chrome pe Android și Safari pe iOS.

Performanță

Diagnosticați și remediați probleme de performanță.

Unealta performanță: Profilator JavaScript renovat și linie a timpului cu frecvența cadrelor.

Profilator JavaScript: Aflați în ce loc codul JavaScript își consumă timpul.
Unealta Paint Flashing: Evidențiază zone ale paginii care sunt recolorate ca răspuns la evenimente.
Reflow Event Logging: See reflow events in the web console.
Performanță rețea: Vedeți cât timp necesită părți ale site-ului să fie încărcate.

Depanare navigator

Implicit, uneltele pentru dezvoltator sunt atașate paginii sau aplicației web. De asemenea, le puteți conecta la navigator ca un întreg. Aceasta este util în cazul dezvoltării navigatorului sau a suplimentelor.

Consolă navigator: Vedeți mesajele afișate de însuși navigator sau suplimente și rulați codul JavaScript în domeniul de vizibilitate al navigatorului.
Set de instrumente pentru navigator: Atașați uneltele pentru dezvoltatori la navigator însuși.

Extinderea uneltelor pentru dezvoltatori

Uneltele pentru dezvoltatori sunt proiectate să fie extensibile. Suplimentele Firefox pot accesa aceste unelte și componentele pe care le utilizează pentru extinderea uneltelor existente sau adăugarea uneltelor noi. Utilizând protocolul de depanare la distanță puteți implementa clienți și servere de depanare proprii, permițându-vă să depanați site-uri web utilizând propriile unelte sau să depanați diverse ținte utilizând uneltele Firefox.

Protocol de depanare la distanță: Protocolul utilizat pentru conectarea uneltelor pentru dezvoltatori Firefox cu o țintă de depanare, cum ar fi o instanță Firefox sau un dispozitiv Firefox OS.
Editor sursă: Un editor de cod integrat în Firefox care poate fi incorporat în suplimentul dumneavoastră.
Interfața Debugger: Un API care permite codului JavaScript să observe execuția altui cod JavaScript. Uneltele pentru dezvoltatori Firefox utilizează acest API pentru implementarea depanatorului JavaScript.
Date de ieșire personalizate ale consolei web: Cum să extindeți și personalizați datele de ieșire a consolei web și a consolei navigatorului.
Adăugați un panou nou la uneltele pentru dezvoltatori: Scrieți un supliment care adaugă un panou nou la setul de unelte.

Mai multe resurse

În secțiunea dată, sunt enumerate resursele care nu sunt menținute de echipa ce lucrează asupra uneltelor pentru dezvoltatori de la Mozilla, dar care sunt frecvent utilizate de dezvoltatori web. Aici sunt incluse doar câteva suplimente Firefox. Pentru lista deplină accesați categoria „Dezvoltare web” la addons.mozilla.org.

Firebug: O unealtă pentru dezvoltare web foarte populară și puternică care posedă un depanator JavaScript, vizualizatoare și editoare HTML și CSS și monitorizare rețea.
DOM Inspector: Inspectați, răsfoiți și editați DOM-ul paginilor web sau al ferestrelor XUL.
Web Developer: Adaugă un meniu și o bară de unelte navigatorului cu diverse unelte pentru dezvoltatori.

Webmaker Tools: Un set de unelte dezvoltat de Mozilla, destinat dezvoltatorilor web începători.
Unelte de validare W3C: Site-ul W3C găzduiește un număr de unelte pentru verificarea validității site-ului dumneavoastră, care include HTML și CSS.
JSHint: Unealtă pentru analiza codului JavaScript.

Join the Developer tools community

Choose your preferred method for joining the discussion:

Mailing list

IRC: #devtools (learn more)
Team info: Dev tools wiki
Blog: Hacks blog