From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/pt-br/tools/browser_console/index.html | 179 +++++++++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 files/pt-br/tools/browser_console/index.html (limited to 'files/pt-br/tools/browser_console') diff --git a/files/pt-br/tools/browser_console/index.html b/files/pt-br/tools/browser_console/index.html new file mode 100644 index 0000000000..e9b80811f7 --- /dev/null +++ b/files/pt-br/tools/browser_console/index.html @@ -0,0 +1,179 @@ +--- +title: Console do navegador +slug: Tools/Browser_Console +tags: + - Debugging + - Desenvolvimento Web + - Ferramentas + - console do navegador + - 'desenvolvimento web: ferramentas' +translation_of: Tools/Browser_Console +--- +
{{ToolsSidebar}}

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.

+ +
+

Obs: A partir do Firefox 30, o Console de linha de comando do navegador (para executar expressões em JavaScript) está desabilitado por padrão. Para habilitá-lo configure a opção devtools.chrome.enabled para true em about:config, ou defina a opção “Enable chrome debugging” nas configurações das ferramentas de desenvolvedor.

+
+ +

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. +
  2.  A partir do teclado: pressione Ctrl+Shift+J (ou Cmd+Shift+J no Mac).
    3. +
+ +

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:

+ + + +

Registros no Console do navegador

+ +

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

+ + + +

Entretanto, ele exibe mensagens a partir de:

+ + + +

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:

+ + + +

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

+ +
+

A partir do Firefox 30, a linha de comando no Console do navegador está desabilitada por padrão. Para habilita-la defina a configuração devtools.chrome.enabled para true no about:config, ou a opção “Enable chrome debugging” nas configurações de ferramentas de desenvolvedor.

+
+ +

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("http://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("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

-- cgit v1.2.3-54-g00ecf