1 files changed, 179 insertions, 0 deletions
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
+---
+<div>{{ToolsSidebar}}</div><p>O Console do navegador é como o <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console Web</a>, mas é aplicado a todo o navegador, ao invés de uma única guia de conteúdo.</p>
+
+<p>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.</p>
+
+<p>Se você também quiser usar as outras <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">ferramentas</a> de desenvolvimento web com complementos ou código no navegador, considere o uso de <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox">ferramentas do navegador</a>.</p>
+
+<p>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 <a href="https://developer.mozilla.org/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a>, com o mesmo  XUL usado para especificar a interface de usuário do navegador.</p>
+
+<div class="geckoVersionNote">
+<p>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 <code>devtools.chrome.enabled</code> para <code>true</code> em about:config, ou defina a opção “Enable chrome debugging” nas <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Advanced_settings">configurações das ferramentas de desenvolvedor</a>.</p>
+</div>
+
+<h2 id="Abrindo_o_Console_do_navegador">Abrindo o Console do navegador</h2>
+
+<p>Você pode abrir o Console do navegador de duas maneiras:</p>
+
+<ol>
+ <li>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);</li>
+ <li> A partir do teclado: pressione Ctrl+Shift+J (ou Cmd+Shift+J no Mac).</li>
+</ol>
+
+<p>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.</p>
+
+<p>Você também pode iniciar o Console do navegador iniciando o Firefox a partir da linha de comando, e passando o argumento <code>-jsconsole:</code></p>
+
+<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre>
+
+<p>O Console de navegador se parece com isso:</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>Você pode ver que o Console do navegador se comporta e se parece muito com o <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console">Console Web</a>:</p>
+
+<ul>
+ <li>A maior parte da janela é ocupada pelo <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Message_Display_Pane">painel que exibe as mensagens</a>.</li>
+ <li>No topo, a <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Filtering_and_searching">barra de ferramentas</a> permite que você filtre as mensagens que são exibidas.</li>
+ <li>Na parte inferior, o <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#The_command_line_interpreter">interpretador de linha de comando</a> permite que você avalie expressões JavaScript.</li>
+</ul>
+
+<h2 id="Registros_no_Console_do_navegador">Registros no Console do navegador</h2>
+
+<p>O Console do navegador registra os mesmos tipos de mensagens que o Console Web registra, como:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">Requisições HTTP</a>.</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Warnings_and_errors">Avisos e erros</a> (incluindo JavaScript, CSS, avisos e erros de segurança, e mensagens explicitamente registradas pelo código JavaScript usando a API do <a href="https://developer.mozilla.org/en-US/docs/Web/API/console">console</a>).</li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Entrada/saída de mensagens</a>: comandos enviados para o navegador via linha de comando, e os resultados da execução deles.</li>
+</ul>
+
+<p>Entretanto, ele exibe mensagens a partir de:</p>
+
+<ul>
+ <li>Conteúdos web hospedado por todas as guias.</li>
+ <li>Códigos do próprio navegador</li>
+ <li>Complementos.</li>
+</ul>
+
+<h3 id="Mensagens_de_complementos">Mensagens de complementos</h3>
+
+<p>O Console do navegador exibe mensagens registradas por todos os complementos do Firefox.</p>
+
+<h4 id="Console.jsm">Console.jsm</h4>
+
+<p>Para usar a API do Console de complemento tradicional ou bootstrapped, obtenha-lo a partir do modulo do Console.</p>
+
+<p>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.</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/devtools/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console</pre>
+
+<p>Saiba mais:</p>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/console">Referência da API do Console</a></li>
+ <li><a href="http://mxr.mozilla.org/mozilla-release/source/toolkit/devtools/Console.jsm">Código fonte do Console.jsm no Mozilla Cross-Reference</a></li>
+</ul>
+
+<h4 id="HUDService">HUDService</h4>
+
+<p>Há também o HUDService que permite acessar o Console do navegador. O módulo está disponível no <a href="http://mxr.mozilla.org/mozilla-release/source/browser/devtools/webconsole/hudservice.js">Mozilla Cross-Reference</a>. Podemos ver, que não somente podemos acessar o Console do navegador como também podemos acessar o Console Web.</p>
+
+<p>Aqui está um exemplo de como limpar o conteúdo do Console do navegador:</p>
+
+<pre class="brush: js">Components.utils.import("resource://gre/modules/devtools/Loader.jsm");
+var HUDService = devtools.require("devtools/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);</pre>
+
+<p>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.</p>
+
+<pre class="brush: js">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);</pre>
+
+<h4 id="Características_extras_disponíveis">Características extras disponíveis</h4>
+
+<p>Para <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">complementos SDK</a>, 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:</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>Se você o <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">construiu com um arquivo XPI</a>, 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:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Clique no ícone. Você verá uma saída como esta no Console do 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>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 <a href="https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Filtering_and_searching">filtro de saída</a> na caixa de pesquisa. Por padrão, apenas mensagens de erros são registradas para o Console, embora <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">você pode mudar isso nas configurações do navegador</a>.</p>
+
+<h2 id="Linha_de_comando_no_Console_do_navegador">Linha de comando no Console do navegador</h2>
+
+<div class="geckoVersionNote">
+<p>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 <code>devtools.chrome.enabled</code> para <code>true</code> no about:config, ou a opção “Enable chrome debugging” nas <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Advanced_settings">configurações de ferramentas de desenvolvedor</a>.</p>
+</div>
+
+<p>Como o Console Web, o interpretador de linha de comando permite que você avalie expressões JavaScript em tempo real:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p>
+
+<p>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 <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>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.</p>
+
+<h3 id="Controlando_o_navegador">Controlando o navegador</h3>
+
+<p>O interpretador de linha de comando obtém acesso ao objeto <a href="https://developer.mozilla.org/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a>, através do <code>gBrowser</code>, 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):</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>Isto adiciona um listener para o evento de <code>load</code> da guia atual no momento da criação de uma nova página, e em seguida, carrega a nova página.</p>
+
+<h3 id="Modificando_a_UI_do_navegador">Modificando a UI do navegador</h3>
+
+<p>Uma vez que o objeto global <code>window</code> é 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:</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;">No OS X, este código similar irá adicionar um novo item ao menu “Tools”:</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>