Console Web

Começado com o Firefox 4, o antigo Error Console foi substuído em favor de um novo, melhorado Web Console, o Web Console é algo que você pode visualizar tudo o que está acontecendo na web, lhe mostrando mensagens de erro outras informações logadas, Além de existir métodos de chamada para saída de informações ao console, tornando a ajuda do debugging útil, e você analisar o JavaScript em ação.

O Web Console não vai substituir as ferramentas avançadas de debugging como o do Firebug, o que ele pode lhe oferecer. entretanto, é uma maneira de usuários remotos de seu site e de aplicação web coletar relatório de logs do console e outras inforamções para você, e também fornece uma versão light para debugar o conteúdo, se você não tem o Firebug instalado, em caso de algo estar errado.

Nota: O Error Console ainda está disponível; você pode reabilita-lo mudando o devtools.errorconsole.enabled para true e reinicando o navegador.

Abrindo o Web Console

Abrir o Web Console é simples selecionando a opção "Web Console" do submenu Web Developer no Menu Firefox (ou menu de Ferramentas se você exibi a barra de menu ou está no Mac OS X), ou pressionando seu Control-Shift-K (Command-Option-K no Mac) no atalho do teclado. o Web Console aparecerá no topo da tela, listando o conteúdo e um espaço.

No Windows, a opção do menu para Web Console é no Firefox->Web Developer->Web Console.

Usando o Web Console

A interface do Web Console consiste em qutro áreas: a barra de ferramentas, o log, a linha de comando. e a barra redimensionamento.

Nota: Antes do Firefox 12, As entradas de log do Web Console só acontecia quando o Web Console estava aberto. Começando no Firefox 12, os logs de entrada e mensagens de erro acontecen antes do Web Console estar aberto e são visíveis quando você abre ele pela primeira vez.

Existe quatro tipos de mensagens que pode ser exibida no log:

Mensagens de Rede: Essas mensagens são geradas pelo navegador, mostrando a resquisições de rede, Se você clicar em uma requisição de rede, você pode ver os cabeçalhos e outras informações sobre a requisição, incluindo a resposta, se você quiser o log inteiro de requisição e resposta, incluindo dadism e clicando com o botão direito no log e escolher a opção "Log Request and Response Bodies" do menu contextual que aparece, Veja Network message window para uma visão do que o output parece.for a look at what the output looks like.
Mensagens de CSS: Essas mensagens são geradas pelo navegador para informar você os erros de CSS que ocorreu durante a renderização do conteúdo.
Mensagens de JavaScript: Essas mensagens são usada pelo o navegador mostrando os erros de JavaScript, como erros de sintaxe, que ocorre durante a interpretação do código JavaScript. Para uma lista de erros JavaScripts.
Mensagens de Logging: Essas mensagens são saídas explícitas por códigos JavaScript usando métodos no objeto console fornecido pelo navegador.

Quando a mesma mensagens é multiplas vezes exibida, o Web Console lista apenas uma delas, com um contador a direta exibindo quantas vezes foi repetido. Isto salva os espaços de logo para você ter uma visão melhor do que está acontecendo.

O Display exibi cada um daqueles tipos de mensagens e pode ser habilitado e desabilitado, clicando no botão correspondente na barra de ferramento do Web Console. Você ainda pode filtrar a exibição digitando o texto na caixa de edição "Filtro", para limpar conteúdo da exibição do log, clique no botão "Limpar" .

Você pode mover o Web Console entre o topo e o rodapé da janela, ou pode dedicar a uma janela, usando o pop-up menu "Position" na barra de ferramenta.

Abaixo a barra de ferramenta é o seu própio log, e abaixo que é a linha de comando, onde você pode executar JavaScript em tempo real, Uma barra de redimensionamento é abaixo (ou acima, se o Web Console está na parte de baixo da jenela em vez do topo).

Janela de mensagem de Rede

Veja o que é uma janela de informação de requisição de rede parece.

Descendo o scroll fornecerá a resposta do cabeçalho, se você habilitou a saída do corpo de requisição e resposta, esses são apresentados nesta janela também.

O tempo listado depois do status HTTP na janela de mensagem de rede, é o tempo necessário para transferir a resposta completa, quie é para os dois header e body.

Nota: Somente o primeiro megabyte do dado é logado para cada requisição ou resposta, então requisição e respostas grandes serão truncadas.

O interpretador de linha de comando

Você pode interpretar expressões JavaScript e tempo real usando a linha de comando fornecida pelo Web Console, Veja a caixa pequena com o prompt ">" ? Isso é a linha de comando.

Quialquer expressão JavaScript que você escrever será avaliado, e o resultado da saída estará no log do console, você pode fazer qualquer coisa, computações simples até expressões complexas que pode até incluir variáveis definidas na página atual.

Você pod também usar a teclas "cima" e "baixo" para navegar atravpes do histórico de comandos que você entrou no console. e autocompletar opções que são fornecidas

Nota: se você quiser digitar mais que uma linha na linha de comando, você poder pressionar shift-enter e apenas enter para cada linha.

Uso Básico

Você pode usar o interpretador de linha de comando como uma simples calculadora, você provavelmente não usará, mas você pode:

Por convenicência, o Web Console tentará autocompletar variáveis e nome de funções que ele enxergou. Se você acha que está errado, você pode ainda continuar escrevendo (e atualizará o que você achou), ou você pode apertar o tab para pegar a proxima combinação:

Você pode acessar diretamente as variáveis definidas na página:

Aqui nós vimos que jQuery é usado para a página que estamos aberta . Note que acontece se nos escrevermos "JQuery." e então apertar tab.

Se nós continuarmos apertando tab , nós vamos pegar umas dicas sucessivamente com o que nós estamos procurando.

Nota: Enquanto usa o Web Console, esta não é a janela de objeto como poderia estar rodando o conteúdo do código . Isto você permite você criar variáveis sem contaminar o conteúdo do namepsace.

Atalhos do teclado

Shortcut	Description
↑	Move para a próxima entrada no histórico de comandos ou. se um popup de autocomplete está aberto, e seleciona as sugestões anteriores.
↓	Move para a próxima entrada no histórico de linha de comando, ou, se um popup de autocomplete está aberto seleciona a próxima sugestão.
Ctrl-A	Move o cursor para o início da linha (Nota: começado no Firefox 22, isto selecionará todos os textos no Windows).
Ctrl-E	Move o cursor para o final da linha.
Return	Executa o código escrito na linha de comando ou, se um popup de autocomplete estiver aberto, escolhe a a sugestao atual
Shift-Return	Expande o tamanho do text inserido na caixa da linha de comando linha, linha por linha.
Escape	Cancela a autocompletação.
Tab	Gera uma sugestão de autocomplete e aceita a primeira.

Comandos de Ajuda

The JavaScript command line provided by the Web Console offers a few built-in helper functions that make certain tasks easier.

$(): Looks up a CSS selector string, returning the first element that matches. Equivalent to document.querySelector() or calls the $ function in the page, if it exists.
$$(): Looks up a CSS selector string, returning a list of DOM nodes that match. This is a shortcut for document.querySelectorAll().

From Firefox 41, this method is no longer a shortcut for document.querySelectorAll() and instead returns an array of elements.
$0: The currently-inspected element in the page.
$_: New in Firefox 39. Stores the result of the last expression executed in the console's command line. For example, if you type "2+2 <enter>", then "$_ <enter>", the console will print 4.
$x(): Evaluates an XPath expression and returns an array of matching nodes.
keys(): Given an object, returns a list of the keys (or property names) on that object. This is a shortcut for Object.keys.
values(): Given an object, returns a list of the values on that object; serves as a companion to keys().
clear(): Clears the console output area.
inspect(): Given an object, opens the object inspector for that object.
pprint(): Formats the specified value in a readable way; this is useful for dumping the contents of objects and arrays.
help(): Displays help text. Actually, in a delightful example of recursion, it will bring you to this page.
cd(): Switch JavaScript evaluation context to a different iframe in the page. See working with iframes.
copy(): New in Firefox 38. Copy the argument to the clipboard. If the argument is a string, it's copied as-is. If the argument is a DOM node, its outerHTML is copied. Otherwise, JSON.stringify will be called on the argument, and the result will be copied to the clipboard.
clearHistory(): New in Firefox 39. Just like a normal command line, the console command line remembers the commands you've typed. Use this function to clear the console's command history.
Please refer to the Console API for more information about logging from content.

Manipulando a página

você pode fazer mudanças dos valores da variáveis na página para testar alguma coisa. ou apenas adicionar "janela" para o inicio do nome da variável. mudando a visibilidade da página, por exemplo, se o código na página define uma variável contadora, você póde mudar com:

window.counter = newvalue

Você pode até definiar funções para a página. por exemplom considere a página do Reddit, onde nós sabemos que existe um cabeçalho que o Id é "header", nós podemos esconde-lo chamando um método do jQuery hide();

Inspetor de Objetos

Gecko 10.0 note

(Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7)

Começando no Gecko 10.0 (Firefox 10.0 / Thunderbird 10.0 / SeaMonkey 2.7), a variável $0 pode ser usada para referenciar a seleção do elemento atual quando o Page Inspector está aberto..

Qualquer momento a saída de um objeto, você ve no log [object objectName]. Se você clicar nele você pode inspeciuonar o objeto, então o exemplo acima , se você clicar no [object Object] você pode ver esta janela:

Isto exibi para você o estado de do objeto no momento do clique para abrir o inspetor. Clique no botão de atualização para atualizar a janela para exibir os conteúdos atuais do objeto.