path: root/files/es/tools/browser_console/index.html

---
title: Consola del Navegador
slug: Tools/Browser_Console
tags:
  - Depuración
  - Desarrollo web
  - 'DesarrolloWeb:Herramientas'
  - Herramientas
  - Navegador
translation_of: Tools/Browser_Console
---
<p>La Consola del Navegador es como la <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Consola Web</a>, <span id="result_box" lang="es"><span>pero se aplica a todo el navegador en lugar de a una sola pestaña de contenido</span></span>.</p>

<p><span id="result_box" lang="es"><span>Por lo tanto, registra el mismo tipo de información que la Consola Web: solicitudes de red, JavaScript, CSS, errores y advertencias de seguridad y mensajes registrados explícitamente por código JavaScript.</span> <span>Sin embargo, en lugar de registrar esta información para una sola pestaña de contenido, registra información para todas las pestañas de contenido, complementos y código propio del navegador.</span></span></p>

<p><span id="result_box" lang="es"><span>Si también desea utilizar las otras herramientas de desarrollador web en la caja </span></span><span lang="es"><span>de herramientas </span></span><a href="/en-US/docs/Tools/Tools_Toolbox">(Toolbox)</a> <span lang="es"><span>Web estándar con código de complemento o explorador, considere la posibilidad de utilizar el cuadro de herramientas del navegador</span></span> <a href="/en-US/docs/Tools/Browser_Toolbox">(Browser Toolbox)</a><span lang="es"><span>.</span></span></p>

<p><span id="result_box" lang="es"><span>Del mismo modo, puede ejecutar expresiones JavaScript utilizando la consola del explorador.</span> <span>Sin embargo, mientras la Consola Web ejecuta el código en el ámbito de la ventana de la página, la consola del explorador los ejecuta en el ámbito de la ventana chrome del navegador.</span> <span>Esto significa que puedes interactuar con todas las pestañas del navegador usando el</span></span> <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> <span lang="es"><span>global e incluso con el XUL utilizado para especificar la interfaz de usuario del navegador.</span></span></p>

<div class="geckoVersionNote">
<p><span id="result_box" lang="es"><span>Nota: La línea de comandos de la consola del navegador (para ejecutar expresiones JavaScript) está desactivada de forma predeterminada.</span> <span>Para habilitarla, establezca la preferencia </span></span><code>devtools.chrome.enabled</code><span lang="es"><span> a true en about: config o configure la opción "Habilitar explorador {{Glossary ("chrome")}} y add-on debugging toolboxes" (Firefox 40 y posterior) en la opción</span> <span>Configuración de la herramienta de desarrollador</span></span> <a href="/en-US/docs/Tools/Settings">(developer tool settings)</a><span lang="es"><span>.</span></span></p>
</div>

<h2 id="Abrir_la_Consola_del_Navegador"><span class="short_text" id="result_box" lang="es"><span>Abrir la Consola del Navegador</span></span></h2>

<p><span id="result_box" lang="es"><span>Puede abrir la consola del navegador de dos formas:</span></span></p>

<ol>
 <li><span id="result_box" lang="es"><span>Desde el menú: seleccione "Consola del navegador" en el submenú "Desarrollador web" en el menú de Firefox (o en el menú Herramientas si muestra la barra de menús o está en OS X)</span></span></li>
 <li><span class="short_text" id="result_box" lang="es"><span>Desde el teclado: pulse</span></span> Ctrl+Shift+J (o Cmd+Shift+J en un Mac).</li>
</ol>

<p><span id="result_box" lang="es"><span>También puedes iniciar la consola del navegador lanzando Firefox desde la línea de comandos y pasando el argumento </span></span><code>-jsconsole</code>:</p>

<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre>

<p><span class="short_text" id="result_box" lang="es"><span>La consola del navegador se ve así:</span></span></p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p><span id="result_box" lang="es"><span>Puede ver que la consola del navegador se ve y se comporta de forma muy similar a la</span></span> <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Consola Web</a>:</p>

<ul>
 <li>La mayor parte de la ventana es ocupada por <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">el panel que muestra mensajes</a></li>
 <li>arriba, la <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">barra de herramientas</a> le permite filtrar los mensajes que se muestran</li>
 <li>abajo, el <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">interprete de linea de comandos</a> le permite evaluar la expresión JavaScript.</li>
</ul>

<h2 id="Registro_de_Consola_del_Navegador">Registro de Consola del Navegador</h2>

<p>El registro de consola del Navegador registra el mismo tipo de mensajes que la consola Web:</p>

<ul>
 <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">Solicitudes HTTP</a></li>
 <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Advertencias y errores</a> <span id="result_box" lang="es"><span>(incluidos JavaScript, CSS, advertencias y errores de seguridad y mensajes registrados explícitamente por código JavaScript utilizando la </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">consola</a> API)</li>
 <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Mensajes de entrada / salida</a>: <span id="result_box" lang="es"><span>comandos enviados al navegador a través de la línea de comandos, y el resultado de ejecutarlos.</span></span></li>
</ul>

<p>Sin embargo, tambien muestra mensajes provenientes de:</p>

<ul>
 <li>contenido web alojado por todas las pestañas del navegador</li>
 <li>el propio codigo del navegador</li>
 <li>complementos.</li>
</ul>

<h3 id="Mensajes_provenientes_de_complementos">Mensajes provenientes de complementos</h3>

<p>La consola del navegador muestra mensajes registrados por todos los complementos de Firefox.</p>

<h4 id="Console.jsm">Console.jsm</h4>

<p>Para utilizar la API de consola de un complemento tradicional o bootstrapped, obtenlo desde el modulo de consola.</p>

<p>Un simbolo exportado por Console.jsm es "console". a continuación se muestra un ejemplo de como accesarlo. lo que añade un mensaje a la Consola del Navegador.</p>

<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm");
console.log("Hello from Firefox code"); //output messages to the console</pre>

<p>Aprenda mas:</p>

<ul>
 <li><a href="/en-US/docs/Web/API/console">referencia de la consola API</a></li>
 <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm codigo fuente en Mozilla DXR</a></li>
</ul>

<h4 id="HUDService">HUDService</h4>

<p>Tambien existe el HUDService el cual permite el acceso a la Consola de Navegador. El modulo está disponible en <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a>. Así vemos que no solo podemos acceder a la consola del Navegador sino tambien a la consola web.</p>

<p>Aqui hay un ejemplo de como limpiar el contenido de la consola del navegador:</p>

<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
var HUDService = devtools.require("devtools/client/webconsole/hudservice");

var hud = HUDService.getBrowserConsole();
hud.jsterm.clearOutput(true);</pre>

<p>Si usted quisiera accesar al documento contenido del la consola del navegador, esto puede hacerce mediante el HUDService. Este ejemplo a continuación  hace que cuando usted sobrepase el boton  "Clear" limpiará la Consola del navegador:</p>

<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm");
var HUDService = devtools.require("devtools/client/webconsole/hudservice");

var hud = HUDService.getBrowserConsole();

var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
clearBtn.addEventListener('mouseover', function() {
  hud.jsterm.clearOutput(true);
}, false);</pre>

<h4 id="Caracteristicas_Adicionales_Disponibles">Caracteristicas Adicionales Disponibles</h4>

<p>Para los <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Complementos SDK</a>, la consola API está disponible automaticamente. A continuación se muestra un ejemplo de complemento que registra un error cuando el usuario hace click en un widget:</p>

<pre class="brush: js">widget = require("sdk/widget").Widget({
  id: "an-error-happened",
  label: "Error!",
  width: 40,
  content: "Error!",
  onClick: logError
});

function logError() {
  console.error("something went wrong!");
}</pre>

<p>Si uested <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">construye este como un archivo XPI</a>, entonces abra la consola del navegador, y entonces abra el archivo XPI en Firefox e instalelo, verá una etiqueta widget con el mensaje "Error!" en la barra del complemento:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Haga click en el icono. verá un mensaje como este aparecer en la consola del navegador:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Para complementos basados unicamente en SDK, al mensaje se le antepone el nombre del complemento ("log-error"), haciendolo mas facil de encontrar todos los mensajes de este complemento utilizando la caja de busqueda del <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filtro de salida"</a>. Por default, solo los mensajes de error son registrados en la consola, aunque <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">usted puede cambiar este comportamiento en preferencias del navegador</a>.</p>

<h2 id="Consola_de_línea_de_comandos_del_Navegador">Consola de línea de comandos del Navegador</h2>

<div class="geckoVersionNote">
<p>La Consola de linea de comandos del navegador esta deshabilitada de manera predeterminada. Para habilitarla cambie la preferencia de <code>devtools.chrome.enabled</code> hacia <code>true</code> en about:config, o establezca la opción "Enable chrome debugging" dentro de <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p>
</div>

<p>Al igual que la consola Web, el interprete de linea de comando le permite evaluar expresiones JavaScript en tiempo real:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Tambien como el interprete de linea de comando de la consola Web, esta linea de comando soporta <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocompletar</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">historial</a>, y varios <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">atajos de teclado </a>así como <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">comandos de ayuda</a>. si el resultado de un comando  es un objeto, usted puede hacer <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click sobre el objeto para ver sus detalles</a>.</p>

<p>Pero mientras la consola Web ejecuta codigo en el ambito (scope) de la ventana que lo contiene, la consola del navegador ejecuta codigo en el ámbito (scope) de la ventana metálica del navegador. Usted puede confirmar este comportamiento evaluendo <code>window</code>:</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>Esto significa que usted puede controlar en el navegador: abrir, cerrar pestañas y ventanas y cambiar el contenido que ellas alojan, y modificar el UI del navegador al crear, cambiar y remover elementos XUL.</p>

<h3 id="Controlando_el_navegador">Controlando el navegador</h3>

<p>El interprete de linea de comando obtiene acceso al objeto <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a>, a traves de el <code>gBrowser</code> global, y ello le permite a usted controlar el navegador a traves de la linea de comando. Pruebe correr el siguente codigo en la linea de comando en la consola del navegador (recuerde que para enviar multiples lineas de comando a la consola de navegador, utilice Shift+Enter):</p>

<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
newTabBrowser.addEventListener("load", function() {
  newTabBrowser.contentDocument.body.innerHTML = "&lt;h1&gt;this page has been eaten&lt;/h1&gt;";
}, true);
newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre>

<p>Añadirá un listener en el (load event) de la pestaña que este actualmente seleccionada, el cual  terminará la pagina, para posteriormente cargar una nueva pagina.</p>

<h3 id="Modificando_el_UI_del_navegador">Modificando el UI del navegador</h3>

<p>Debido a que el  global <code>window</code> object es la ventana metalica del navegador, usted tambien puede modificar la Inteface de Usuario del navegador. En Windows, el siguente codigo añadira un nuevo ITEM al menu principal del navegador:</p>

<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">En OS X, este codigo similar añadirá un nuevo item al menu "Herramientas":</p>

<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup");
var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
makeTheTea.setAttribute("label", "A nice cup of tea?");
parent.appendChild(makeTheTea);</pre>

<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p>