1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
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 = "<h1>this page has been eaten</h1>";
}, 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>
|
