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 {{Glossary ("chrome")}} y add-on debugging toolboxes" (Firefox 40 y posterior) en la opción Configuración de la herramienta de desarrollador (developer tool settings).
Puede abrir la consola del navegador de dos formas:
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:
El registro de consola del Navegador registra el mismo tipo de mensajes que la consola Web:
Sin embargo, tambien muestra mensajes provenientes de:
La consola del navegador muestra mensajes registrados por todos los complementos de Firefox.
Para utilizar la API de consola de un complemento tradicional o bootstrapped, obtenlo desde el modulo de consola.
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.
Components.utils.import("resource://gre/modules/Console.jsm");
console.log("Hello from Firefox code"); //output messages to the console
Aprenda mas:
Tambien existe el HUDService el cual permite el acceso a la Consola de Navegador. El modulo está disponible en Mozilla DXR. Así vemos que no solo podemos acceder a la consola del Navegador sino tambien a la consola web.
Aqui hay un ejemplo de como limpiar el contenido de la consola del navegador:
Components.utils.import("resource://devtools/shared/Loader.jsm");
var HUDService = devtools.require("devtools/client/webconsole/hudservice");
var hud = HUDService.getBrowserConsole();
hud.jsterm.clearOutput(true);
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:
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);
Para los Complementos SDK, 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:
widget = require("sdk/widget").Widget({
id: "an-error-happened",
label: "Error!",
width: 40,
content: "Error!",
onClick: logError
});
function logError() {
console.error("something went wrong!");
}
Si uested construye este como un archivo XPI, 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:
Haga click en el icono. verá un mensaje como este aparecer en la consola del navegador:
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 "Filtro de salida". Por default, solo los mensajes de error son registrados en la consola, aunque usted puede cambiar este comportamiento en preferencias del navegador.
La Consola de linea de comandos del navegador esta deshabilitada de manera predeterminada. Para habilitarla cambie la preferencia de devtools.chrome.enabled hacia true en about:config, o establezca la opción "Enable chrome debugging" dentro de developer tool settings.
Al igual que la consola Web, el interprete de linea de comando le permite evaluar expresiones JavaScript en tiempo real:
Tambien como el interprete de linea de comando de la consola Web, esta linea de comando soporta autocompletar, historial, y varios atajos de teclado así como comandos de ayuda. si el resultado de un comando es un objeto, usted puede hacer click sobre el objeto para ver sus detalles.
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 window:
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.
El interprete de linea de comando obtiene acceso al objeto tabbrowser, a traves de el gBrowser 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):
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/";
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.
Debido a que el global window 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:
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);
En OS X, este codigo similar añadirá un nuevo item al menu "Herramientas":
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);
