--- title: Firefox Developer Tools slug: Tools tags: - Developing Mozilla - Guide - NeedsTranslation - Tools - TopicStub - Web Development - 'Web Development:Tools' - 'l10n:priority' translation_of: Tools ---
{{ToolsSidebar}}
Examinar, editar i depurar HTML, CSS i JavaScript a l'escriptori i al mòbil
Instal.lar Firefox Developer Edition

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

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.