Consola del Navegador

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

La Consola del Navegador es como la Consola Web, pero se aplica a todo el navegador en lugar de a una sola pestaña de contenido.

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

Si también desea utilizar las otras herramientas de desarrollador web en la caja de herramientas (Toolbox) Web estándar con código de complemento o explorador, considere la posibilidad de utilizar el cuadro de herramientas del navegador (Browser Toolbox).

Del mismo modo, puede ejecutar expresiones JavaScript utilizando la consola del explorador. 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. Esto significa que puedes interactuar con todas las pestañas del navegador usando el gBrowser global e incluso con el XUL utilizado para especificar la interfaz de usuario del navegador.

Nota: La línea de comandos de la consola del navegador (para ejecutar expresiones JavaScript) está desactivada de forma predeterminada. Para habilitarla, establezca la preferencia devtools.chrome.enabled a true en about: config o configure la opción "Habilitar explorador chrome y add-on debugging toolboxes" (Firefox 40 y posterior) en la opción Configuración de la herramienta de desarrollador (developer tool settings).

Abrir la Consola del Navegador

Puede abrir la consola del navegador de dos formas:

  1. 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)
  2. Desde el teclado: pulse Ctrl+Shift+J (o Cmd+Shift+J en un Mac).

También puedes iniciar la consola del navegador lanzando Firefox desde la línea de comandos y pasando el argumento -jsconsole:

/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole

La consola del navegador se ve así:

Puede ver que la consola del navegador se ve y se comporta de forma muy similar a la Consola Web:

Browser Console logging

The Browser console logs the same sorts of messages as the Web Console:

However, it displays such messages from:

  • web content hosted by all browser tabs
  • the browser's own code
  • add-ons.

Messages from add-ons

The Browser Console displays messages logged by all Firefox add-ons.

Console.jsm

To use the console API from a traditional or bootstrapped add-on, get it from the Console module.

One exported symbol from Console.jsm is "console". Below is an example of how to acess it, which adds a message to the Browser Console.

Components.utils.import("resource://gre/modules/Console.jsm");
console.log("Hello from Firefox code"); //output messages to the console

Learn more:

HUDService

There is also the HUDService which allows access to the Browse Console. The module is available at Mozilla DXR. We see we can not only access the Browser Console but also Web Console.

Here is an example on how to clear the contents of the Browser console:

Components.utils.import("resource://devtools/shared/Loader.jsm");
var HUDService = devtools.require("devtools/client/webconsole/hudservice");

var hud = HUDService.getBrowserConsole();
hud.jsterm.clearOutput(true);

If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:

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);

Bonus Features Available

For Add-on SDK add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:

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

function logError() {
  console.error("something went wrong!");
}

If you build this as an XPI file, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:

Click the icon. You'll see output like this in the Browser Console:

For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the "Filter output" search box. By default, only error messages are logged to the console, although you can change this in the browser's preferences.

Browser Console command line

The Browser Console command line is disabled by default. To enable it set the devtools.chrome.enabled preference to true in about:config, or set the "Enable chrome debugging" option in the developer tool settings.

Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:Also like the Web Console's command line interpreter, this command line supports autocomplete, history, and various keyboard shortcuts and helper commands. If the result of a command is an object, you can click on the object to see its details.

But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating window:

This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.

Controlling the browser

The command line interpreter gets access to the tabbrowser object, through the gBrowser global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):

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

It adds a listener to the currently selected tab's load event that will eat the new page, then loads a new page.

Modifying the browser UI

Since the global window object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:

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);

On OS X, this similar code will add a new item to the "Tools" menu:

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);

Etiquetas y colaboradores del documento

 Colaboradores en esta página: almozara
 Última actualización por: almozara,