---
title: Herramientas
slug: Tools
tags:
  - Desarrollando Mozilla
  - 'Desarrollo Web: Herramientas'
  - Desarrollo web
  - Herramientas
  - Necesita Revisión Técnica
  - Necesita traducción
  - NeedsMarkupWork
  - TopicStub
translation_of: Tools
---
<div>{{ToolsSidebar}}</div>
<div class="summary"><span class="seoSummary">Examina, edita y depura HTML, CSS y  JavaScript en el ordenador y en el móvil</span></div>

<div class="column-container zone-callout"><a href="https://www.mozilla.org/en-US/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Instala Firefox Developer Edition</a>

<h3 id="What's_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">¿Qué hay de nuevo en Firefox Developer Edition?</h3>

<p><a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a> 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 (<a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>) incluye estos cambios en las herramientas de desarrollador:</p>

<ul>
 <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Server">Registro del servidor en la Consola Web</a></li>
 <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">Busqueda rápida de la regla sobre escrita en la declaración del CSS</a></li>
 <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">"Usar en Consola" en el item de menu contextual en el Inspector</a></li>
 <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Strict_search">Opción "estricto" para filtrado en las reglas de la vista</a></li>
 <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Network">Entradas de red en la Consola ahora enlaza al Monitor de Red</a></li>
 <li><span class="author-g-1scq3ywqbljc5puc">Nueva barra lateral UI para WebIDE</span></li>
</ul>
</div>

<div class="column-container zone-callout"><a href="http://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Comparte tus ideas</a>

<h3 id="Share_your_ideas" name="Share_your_ideas">Comparte tus ideas</h3>

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

<p><img alt="" src="https://mdn.mozillademos.org/files/10529/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p>

<div class="column-container">
<div class="column-half">
<h2 id="Creating" name="Creating">Creando</h2>

<p>Herramientas de autorización para sitios web y aplicaciones web.</p>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt>
 <dd>Un editor construido dentro de Firefox que te permite escribir y ejecutar JavaScript.</dd>
 <dt><a href="/en-US/docs/Tools/Style_Editor">Editor de estilos</a></dt>
 <dd>Revisa y edita estilos CSS para la página actual.</dd>
 <dt><a href="/en-US/docs/Tools/Shader_Editor">Editor de sombras</a></dt>
 <dd>Revisa y edita los vertex y fragmentos de sombras usado por <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Editor de audio web</a></dt>
 <dd>Examina el gráfico de los nodos de audio en un contexto de audio y modifica sus parámetros.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Exploring" name="Exploring">Explorando y depurando</h2>

<p>Examina, explora y depura sitios web y aplicaciones web.</p>

<dl>
 <dt><a href="/en-US/docs/Tools/Web_Console">Consola Web</a></dt>
 <dd>Mira mensajes de registro (logs) en una página web e interactua con la página usando JavaScript.</dd>
 <dt><a href="/en-US/docs/Tools/Page_Inspector">Inspector de página</a></dt>
 <dd>Revisa y modifica el HTML y CSS de la página.</dd>
 <dt><a href="/en-US/docs/Tools/Debugger">Depurador JavaScript</a></dt>
 <dd>Deten, ve paso a paso, examina y modifica el JavaScript que está ejecuntandose in una página.</dd>
 <dt><a href="/en-US/docs/Tools/Network_Monitor">Monitor de red</a></dt>
 <dd>Mira las solicitudes de red hechas cuando una página está cargada.</dd>
 <dt><a href="/en-US/docs/Tools/Storage_Inspector">Inspector de almacenamiento</a></dt>
 <dd>Inspecciona cookies, almacenamiento local, Inspect cookies, local storage, indexedDB y almacenamiento de session presente en una página.</dd>
 <dt><a href="/en-US/docs/Tools/GCLI">Barra de desarrollador</a></dt>
 <dd>Una interface de linea de comandos para el desarrollador.</dd>
 <dt><a href="/en-US/docs/Tools/3D_View">Vista 3D</a></dt>
 <dd>Visualization 3D de la página.</dd>
 <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt>
 <dd>Selecciona un color de la página.</dd>
 <dt><a href="/en-US/docs/Tools/Working_with_iframes">Trabajando con iframes</a></dt>
 <dd>Como seleccionar un iframe en particular.</dd>
</dl>
</div>
</div>

<hr>
<div class="column-container">
<div class="column-half">
<h2 id="Mobile" name="Mobile">Móvil</h2>

<p>Herramientas para desarrollo móvil.</p>

<dl>
 <dt><a href="/en-US/Firefox_OS/Using_the_App_Manager">Administrador de aplicaciones</a></dt>
 <dd>El administrador de aplicaciones ha sido reemplazado por <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>.</dd>
 <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt>
 <dd>El reemplazo para el App Manager, disponible desde Firefox 33 en adelante.</dd>
 <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Simulador de Firefox OS</a></dt>
 <dd>Corre y depura tu aplicación de Firefox OS en el escritorio, sin necesidad de un dispositivo Firefox OS real.</dd>
 <dt><a href="https://developer.mozilla.org/en-us/docs/Tools/Responsive_Design_View">Responsive Design View</a></dt>
 <dd>Mira como tu sitio o aplicación se verá en diferentes pantallas sin cambiar el tamaño de la ventana del navegador.</dd>
 <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Depurando Firefox para Android</a></dt>
 <dd>Conecta las herramientas de desarrollador a Firefox para Android.</dd>
 <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Depurando Firefox para Android con WebIDE</a></dt>
 <dd>Para Desktop Firefox 36+ / Android Firefox 35+, existe un proceso más sencillo.</dd>
 <dt><a href="/en-US/docs/Tools/Valence">Valence</a></dt>
 <dd>Conecta las herramientas de desarrollo de Chrome con Android y Safari en iOS</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Performance" name="Performance">Rendimiento</h2>

<p>Diagnostica y arregla problemas de rendimiento.</p>

<dl>
 <dt><a href="/en-US/docs/Tools/Performance">Performance tool</a></dt>
 <dd>Analiza la capacidad de respuesta de tu sitio web, del JavaScript y el rendimiento del diseño.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate graph</a></dt>
 <dd>Revisa la velocidad de frames de tu sitio web.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt>
 <dd>Averigua como esta funcionando tu sito web en el navegador.</dd>
 <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt>
 <dd>Averigua donde está el codigo JavaScript perdiendo el tiempo.</dd>
</dl>

<dl>
 <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt>
 <dd>Muestra las funciones que están en la cola de  trabajo a lo largo de un perfil.</dd>
 <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
 <dd>Resalta las partes de la página que son repintadas en respuesta a eventos.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt>
 <dd>Ver eventos en la consola web de reflujo.</dd>
 <dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt>
 <dd>Muestra cuanto tardan en cargar las partes de tu sitio web.</dd>
</dl>
</div>
</div>

<hr>




<div class="column-container">
<div class="column-half">
<h2 id="Debugging_the_browser" name="Debugging_the_browser">Depuración del navegador</h2>

<p>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.</p>

<dl>
 <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt>
 <dd>See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.</dd>
 <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
 <dd>Attach the Developer Tools to the browser itself.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Extending_the_devtools" name="Extending_the_devtools">Extending the devtools</h2>

<p>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.</p>

<dl>
 <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt>
 <dd>Write an add-on that adds a new panel to the Toolbox.</dd>
 <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt>
 <dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd>
 <dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt>
 <dd>A code editor built into Firefox that can be embedded in your add-on.</dd>
 <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt>
 <dd>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.</dd>
 <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt>
 <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd>
 <dt><a href="/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt>
 <dd>Use these examples to understand how to implement a devtools add-on.</dd>
</dl>
</div>
</div>

<hr>
<h2 id="More_resources" name="More_resources">Más recursos</h2>

<p>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  <a href="https://addons.mozilla.org/es/firefox/extensions/web-development/">"Desarrollo web" en addons.mozilla.org</a>.</p>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
 <dd>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.</dd>
 <dt><a href="/en-US/docs/Tools/Add-ons/DOM_Inspector">DOM Inspector</a></dt>
 <dd>Inspecciona, busca y edita los DOM de las páginas web o las ventanas XUL.</dd>
 <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt>
 <dd>Añade un menú y una barra de herramientas al navegador con varias utilidades para el desarrollo web.</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt>
 <dd>Un conjunto de utilidades creadas por Mozilla, enfocadas para la gente que empieza con el desarrollo Web.</dd>
 <dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt>
 <dd>La web del W3C alberga herramientas para comprobar y validar su sitio web, incluyendo su HTML y CSS.</dd>
 <dt><a href="http://www.jshint.com/">JSHint</a></dt>
 <dd>Herramienta para el análisis del código JavaScript.</dd>
</dl>
</div>
</div>