Console do navegador

O Console do navegador é como o Console Web, mas é aplicado a todo o navegador, ao invés de uma única guia de conteúdo.

Ele registra os mesmos tipos de informações do Console Web – solicitações de rede, JavaScript, CSS, erros e avisos de segurança, e mensagens explicitas registradas pelo código JavaScript. No entanto, ao invés de registrar essas informações para uma única guia de conteúdo, ele registra as informações para todas às guias, complementos, e para o próprio código do navegador.

Se você também quiser usar as outras ferramentas de desenvolvimento web com complementos ou código no navegador, considere o uso de ferramentas do navegador.

Da mesma forma, você pode executar expressões JavaScript usando o Console do navegador. Mas enquanto o Console Web executa o código no âmbito da página, o Console do navegador executa-os no âmbito da janela do navegador. Isto significa que você pode interagir com todas às guias usando o gBrowser, com o mesmo  XUL usado para especificar a interface de usuário do navegador.

Abrindo o Console do navegador

Você pode abrir o Console do navegador de duas maneiras:

1. A partir do menu: selecione a opção “Desenvolvedor” e depois “Console do navegador” (ou no menu Tools se você exibe a barra de menu no OS X);
2.  A partir do teclado: pressione Ctrl+Shift+J (ou Cmd+Shift+J no Mac).

Note que até o Firefox 38, o Console do navegador se tornava oculto pela janela do Firefox, e você poderia selecioná-lo novamente a partir do menu ou do teclado, e em seguida ele era fechado. A partir do Firefox 38, isso tem o efeito de trocar o foco de volta para o Console do navegador, e provavelmente era isso o que você estava querendo.

Você também pode iniciar o Console do navegador iniciando o Firefox a partir da linha de comando, e passando o argumento -jsconsole:

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

O Console de navegador se parece com isso:

Você pode ver que o Console do navegador se comporta e se parece muito com o Console Web:

• A maior parte da janela é ocupada pelo painel que exibe as mensagens.
• No topo, a barra de ferramentas permite que você filtre as mensagens que são exibidas.
• Na parte inferior, o interpretador de linha de comando permite que você avalie expressões JavaScript.

Registros no Console do navegador

O Console do navegador registra os mesmos tipos de mensagens que o Console Web registra, como:

• Requisições HTTP.
• Avisos e erros (incluindo JavaScript, CSS, avisos e erros de segurança, e mensagens explicitamente registradas pelo código JavaScript usando a API do console).
• Entrada/saída de mensagens: comandos enviados para o navegador via linha de comando, e os resultados da execução deles.

Entretanto, ele exibe mensagens a partir de:

• Conteúdos web hospedado por todas as guias.
• Códigos do próprio navegador
• Complementos.

Mensagens de complementos

O Console do navegador exibe mensagens registradas por todos os complementos do Firefox.

Console.jsm

Para usar a API do Console de complemento tradicional ou bootstrapped, obtenha-lo a partir do modulo do Console.

Um símbolo de exportado do Console.jsm é “console”. Abaixo está um exemplo de como acessá-lo, e adicionar uma mensagem para o Console do navegador.

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

Saiba mais:

• Referência da API do Console
• Código fonte do Console.jsm no Mozilla Cross-Reference

HUDService

Há também o HUDService que permite acessar o Console do navegador. O módulo está disponível no Mozilla Cross-Reference. Podemos ver, que não somente podemos acessar o Console do navegador como também podemos acessar o Console Web.

Aqui está um exemplo de como limpar o conteúdo do Console do navegador:

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

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

Se você gostaria de acessar conteúdo do Console do navegador, poderá fazer isso com o HUDService. Este exemplo faz com que quando você passe o mouse sobre o botão “Clear” ele limpe o Console do navegador.

Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
var HUDService = devtools.require("devtools/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);

Características extras disponíveis

Para complementos SDK, a API do Console está disponível automaticamente. Aqui está um exemplo de um complemento que apenas registra um erro quando o usuário clica no 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!");
}

Se você o construiu com um arquivo XPI, abra o Console do navegador, e em seguida abra o arquivo XPI no Firefox e o instale, você verá um widget rotulado como “Error!” na barra de complementos:

Clique no ícone. Você verá uma saída como esta no Console do navegador:

Somente para complementos baseados no SDK a mensagem é prefixada com o nome do complemento (“log-error”), tornando mais fácil encontrar todas as mensagens para este complemento usando o filtro de saída na caixa de pesquisa. Por padrão, apenas mensagens de erros são registradas para o Console, embora você pode mudar isso nas configurações do navegador.

Linha de comando no Console do navegador

Como o Console Web, o interpretador de linha de comando permite que você avalie expressões JavaScript em tempo real:Como o interpretador de linha de comando do Console Web, este também suporta completamento automático, histórico, vários atalhos de teclado e comandos auxiliares. Se o resultado do comando é um objeto, você pode clicar sobre ele e ver seus detalhes.

Mas, enquanto o Console Web executa o código no escopo do conteúdo da janela anexada, o Console do navegador executa o código no escopo da janela do navegador. Você pode confirmar isso avaliando window:

Isto significa que você pode controlar o navegador: abrindo e fechando guias e janelas, e modificando o conteúdo que se encontra nelas, e modificando a UI do navegador, criando, modificando e removendo elementos XUL.

Controlando o navegador

O interpretador de linha de comando obtém acesso ao objeto tabbrowser, através do gBrowser, o que lhe permite controlar o navegador através da linha de comando. Tente executar este código no Console do navegador (para inserir múltiplas linhas no Console do navegador, 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/";

Isto adiciona um listener para o evento de load da guia atual no momento da criação de uma nova página, e em seguida, carrega a nova página.

Modificando a UI do navegador

Uma vez que o objeto global window é a janela do navegador, você pode modificar a interface do usuário. O seguinte código irá adicionar um novo item ao menu principal do navegador:

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

No OS X, este código similar irá adicionar um novo item ao menu “Tools”:

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