Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Examina, edita y depura HTML, CSS y  JavaScript en el ordenador y en el móvil
Instala Firefox Developer Edition

¿Qué hay de nuevo en Firefox Developer Edition?

Firefox Developer Edition es una versión de Firefox adaptada para desarrolladores, ofreciendo las últimas características y herramientas de desarrollo experimental. La actual edición de desarrollo (Firefox Developer Edition) incluye estos cambios en las herramientas de desarrollador:

Comparte tus ideas

Comparte tus ideas

Pregunte por las nuevas propiedades en las herramientas de desarrollador o vote por las ideas que otros desarrolladores están solicitando.

Creando

Herramientas de autorización para sitios web y aplicaciones web.

Scratchpad
Un editor construido dentro de Firefox que te permite escribir y ejecutar JavaScript.
Editor de estilos
Revisa y edita estilos CSS para la página actual.
Editor de sombras
Revisa y edita los vertex y fragmentos de sombras usado por WebGL.
Editor de audio web
Examina el gráfico de los nodos de audio en un contexto de audio y modifica sus parámetros.

Explorando y depurando

Examina, explora y depura sitios web y aplicaciones web.

Consola Web
Mira mensajes de registro (logs) en una página web e interactua con la página usando JavaScript.
Inspector de página
Revisa y modifica el HTML y CSS de la página.
Depurador JavaScript
Deten, ve paso a paso, examina y modifica el JavaScript que está ejecuntandose in una página.
Monitor de red
Mira las solicitudes de red hechas cuando una página está cargada.
Inspector de almacenamiento
Inspecciona cookies, almacenamiento local, Inspect cookies, local storage, indexedDB y almacenamiento de session presente en una página.
Barra de desarrollador
Una interface de linea de comandos para el desarrollador.
Vista 3D
Visualization 3D de la página.
Eyedropper
Selecciona un color de la página.
Trabajando con iframes
Como seleccionar un iframe en particular.

Móvil

Herramientas para desarrollo móvil.

Administrador de aplicaciones
El administrador de aplicaciones ha sido reemplazado por WebIDE.
WebIDE
El reemplazo para el App Manager, disponible desde Firefox 33 en adelante.
Simulador de Firefox OS
Corre y depura tu aplicación de Firefox OS en el escritorio, sin necesidad de un dispositivo Firefox OS real.
Responsive Design View
Mira como tu sitio o aplicación se verá en diferentes pantallas sin cambiar el tamaño de la ventana del navegador.
Depurando Firefox para Android
Conecta las herramientas de desarrollador a Firefox para Android.
Depurando Firefox para Android con WebIDE
Para Desktop Firefox 36+ / Android Firefox 35+, existe un proceso más sencillo.
Valence
Conecta las herramientas de desarrollo de Chrome con Android y Safari en iOS

Rendimiento

Diagnostica y arregla problemas de rendimiento.

Performance tool
Analiza la capacidad de respuesta de tu sitio web, del JavaScript y el rendimiento del diseño.
Frame rate graph
Revisa la velocidad de frames de tu sitio web.
Waterfall
Averigua como esta funcionando tu sito web en el navegador.
Call Tree
Averigua donde está el codigo JavaScript perdiendo el tiempo.
Flame Chart
Muestra las funciones que están en la cola de  trabajo a lo largo de un perfil.
Paint Flashing Tool
Resalta las partes de la página que son repintadas en respuesta a eventos.
Reflow Event Logging
Ver eventos en la consola web de reflujo.
Network Performance
Muestra cuanto tardan en cargar las partes de tu sitio web.

 

 

Depuración del navegador

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

Browser Console
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
Browser Toolbox
Attach the Developer Tools to the browser itself.

Extending the devtools

The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.

Add a new panel to the devtools
Write an add-on that adds a new panel to the Toolbox.
Remote Debugging Protocol
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
Source Editor
A code editor built into Firefox that can be embedded in your add-on.
The Debugger Interface
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
Web Console custom output
How to extend and customize the output of the Web Console and the Browser Console.
Example devtools add-ons
Use these examples to understand how to implement a devtools add-on.

Más recursos

Esta sección muestra una lista de recursos que no están mantenidos por el equipo de desarrolladores de herramientas de Firefox, pero que son ampliamente usados por los desarrolladores web. Hemos incluido algunos complementos para Firefox en esta lista, pero para un listado completo vea la categoria  "Desarrollo web" en addons.mozilla.org.

Firebug
Una potente y popular herramienta de desarrollo web, que incluye un depurador para JavaScript, visor y editor de CSS y HTML, y un monitor de red.
DOM Inspector
Inspecciona, busca y edita los DOM de las páginas web o las ventanas XUL.
Web Developer
Añade un menú y una barra de herramientas al navegador con varias utilidades para el desarrollo web.
Webmaker Tools
Un conjunto de utilidades creadas por Mozilla, enfocadas para la gente que empieza con el desarrollo Web.
W3C Validators
La web del W3C alberga herramientas para comprobar y validar su sitio web, incluyendo su HTML y CSS.
JSHint
Herramienta para el análisis del código JavaScript.

Join the Developer tools community

Choose your preferred method for joining the discussion: