Firefox Developer Tools

Examinar, editar i depurar HTML, CSS i JavaScript a l'escriptori i al mòbil

Què hi ha de nou a Firefox Developer Edition?

Firefox Developer Edition és una versió del Firefox adaptada per als desenvolupadors, que ofereix les últimes característiques de Firefox i eines de desenvolupament experimentals. L'actual versió de Developer Edition inclou aquestes actualitzacions en les eines de desenvolupament:

Comparteix les teves idees

Demanar noves característiques en les eines de desenvolupament o votar per les idees d'altres desenvolupadors que estan demanant.

Creació

Eines d'autor per a llocs web i aplicacions web.

Bloc de notes (Scratchpad): Un editor de text integrat a Firefox que us permet escriure i executar JavaScript.
Editor d'Estils: Veure i editar els estils CSS de la pàgina actual.
Editor Shader: Veure i editar vèrtexs i ombrejadors de fragments utilitzats per WebGL.
Web Audio Editor: Examinar el gràfic de nodes d'àudio en un context d'àudio, i modificar els seus paràmetres.

Explorar i depurar

Examinar, explorar i depura llocs web i aplicacions web.

Consola Web: Veure els missatges registrats en una pàgina web, i interactuar amb la pàgina utilitzant JavaScript.
Inspector de Pàgina: Veure i modificar la pàgina HTML i CSS.
Depurador JavaScript: Parar, pas a pas, examinar i modificar el codi JavaScript que s'executa en una pàgina.
Monitor de xarxa: Veure les sol·licituds de xarxa que es realitzen quan es carrega una pàgina.
Inspector d'emmagatzematge: Inspeccionar les cookies, emmagatzematge local, IndexedDB i emmagatzematge de les sessions presents en una pàgina.
Barra d'eines de desnvolupador: Una interfície de línia d'ordres per a les eines de desenvolupament.
Vista 3D: Visualització en 3D de la pàgina.
Comptagotes: Tria un color de la pàgina.
Treballar amb iframes: Com apuntar a un iframe en particular.

Mòbil

Eines per al desenvolupament mòbil.

App Manager: App Manager ha estat substituït per WebIDE.
WebIDE: Substitueix a App Manager, disponible a Firefox 33 en endavant.
Simulador Firefox OS: Executar i depurar l'aplicació Firefox OS a l'escriptori, sense necessitat d'un veritable dispositiu de Firefox OS.
Visualització sensible al diseny: Veureu com el vostre lloc web o aplicació es veu en diferents mides de pantalla sense canviar la mida de la finestra del navegador.
Depurar Firefox per Android: Connectar les eines de desenvolupament de Firefox per Android.
Depurar Firefox per Android amb WebIDE: Per Desktop Firefox 36+ / Android Firefox 35+ , hi ha un procés més simple.
Valence: Connectar les eines per a desenvolupadors de Chrome en Android i Safari en iOS

Rendiment

Diagnosticar i solucionar problemes de rendiment.

Eina de rendiment: Analitza la capacitat de resposta general, el rendiment de Javascript i el disseny del lloc.
Gràfic de velocitat de fotogrames: Veure la velocitat de fotogrames del vostre lloc.
Waterfall: Esbrinar el que el navegador està fent mentre executa el vostre lloc.
Arbre de crides: Esbrinar on el vostre codi JavaScript està invertint mes temps.

Gràfic de Flama: Veure quines funcions estan a la pila al llarg d'un perfil de rendiment. .
Eina Paint Flashing: Destaquen les parts de la pàgina que es repintan en resposta als esdeveniments.
Registre d'esdeveniments de reflux: Veure esdeveniments de reflux a la consola web.
Rendiment de la xarxa: Veure quant temps triga les parts del vostre lloc han carregar-se.

Depuració del navegador

Per defecte, les eines de desenvolupament estan associades a una pàgina o aplicació web. Però també es pot connectar al navegador com un tot. Això és útil per al navegador i el desenvolupament de complements.

Consola del navegador: Veure els missatges registrats i els complements del navegador i executar codi JavaScript en l'àmbit del navegador.
Caixa d'eines del navegador: Fixar les eines de desenvolupament al navegador.

Ampliació dels DevTools

Les eines de desenvolupament estan dissenyades per a ser extensibles. Els complements del Firefox poden accedir a les eines de desenvolupament i els components que s'utilitzen per estendre les eines existents i afegir noves eines. Amb el protocol de depuració remota podeu implementar els vostres propis clients i servidors de depuració, el que us permet depurar llocs web utilitzant les seves pròpies eines o depurar diferents objectius utilitzant les eines de Firefox.

Afegir un nou panell per als devtools: Escriure un complement que afegeixi un nou panell a la caixa d'eines.
Protocol de depuració remota: Protocol utilitzat per connectar les eines de desenvolupament de Firefox per a un objectiu de depuració com una instància de Firefox o un dispositiu Firefox OS.
Editor de codi font: Un editor de codi integrat a Firefox que pot ser incorporat en el seu complement.
Interfície de depuració: Una API que permet al codi JavaScript observar l'execució d'un altre codi JavaScript. Les eines de desenvolupament de Firefox utilitzen aquesta API per a implementar el depurador de JavaScript.
Sortida perosnalitzada de la consola web: Com estendre i personalitzar la sortida de la Consola Web i la Consola del Navegador.
Exemple de complements de devtools: Utilitzeu aquests exemples per a comprendre com implementar un complement de DevTools.

Més recursos

Aquesta secció enumera els recursos que no són mantinguts per l'equip d'eines de desenvolupament de Mozilla, però que són àmpliament utilitzats pels desenvolupadors web. Hem inclòs alguns complements de Firefox en aquesta llista, però per a la llista completa vegeu en addons.mozilla.org categories en "Desenvolupament Web”.

Firebug: Una eina de desenvolupament web molt popular i potent, incloent un depurador de Javascript, visualitzador i editor d'HTML i CSS i monitor de xarxa.
DOM Inspector: Inspeccionar, revisar i editar el DOM de pàgines web o finestres XUL.
Desenvolupament web: Afegeix un menú i una barra d'eines al navegador amb diverses eines per a desenvolupament web.

Eines Webmaker: Conjunt d'eines desenvolupades per Mozilla, dirigides a persones que s'inicien en el desenvolupament web.
W3C Validators: La pàgina web de W3C alberga una sèrie d'eines per a comprovar la validesa del vostre lloc web, incloent HTML i CSS.
JSHint: Eina d'anàlisi de codi JavaScript.

Join the Developer tools community

Choose your preferred method for joining the discussion:

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