Console Web

Começado com o Firefox 4, o antigo "Error Console" foi substuído em favor de um novo, melhorando o 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 informaçõ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ê exibir a barra de menu ou está no Mac OS X), ou pressionando seu Ctrl - 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 quatro á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 Logs: 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. Assim salva os espaços de logo para você ter uma visão melhor do que está acontecendo.

O Display exibe 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, com o menu "Position" na barra de ferramenta.

Abaixo da barra de ferramenta temos o nosso próprio log, e abaixo é a linha de comando, onde você pode executar JavaScript em tempo real, uma barra de redimensionamento fica em baixo (ou em cima, 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, e é 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 em tempo real usando a linha de comando fornecida pelo Web Console, Veja a caixa pequena com o prompt ">" , isso é a linha de comando.

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

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

Nota: se você quiser digitar mais de uma 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 nós 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 estiver usando o Web Console, ele não é a janela de objeto que poderia estar rodando o conteúdo do código. Isto permite que você crie variáveis sem contaminar o conteúdo das namespace.

Atalhos do teclado

Atalho	Descrição
↑	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, isso 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 sugestão atual.
Shift-Return	Expande o tamanho do texto inserido na caixa da linha de comando, linha por linha.
Escape	Cancela a autocompletação.
Tab	Gera uma sugestão de autocomplete e aceita a primeira.

Comandos de ajuda

A linha de comando JavaScript fornecida pelo Console Web oferece algumas funções auxiliares embutidos que tornam certas tarefas mais fáceis.

$(): FX16+ Procura uma seqüência de seletor CSS, retornando o primeiro elemento que corresponda. equivalente a document.querySelector() ou chama a função de $ na página, se ele existir.; FX4 to FX16 Procura uma string como um ID de um nó DOM; este é um atalho para document.getElementById() ou chama a função de $ na página, se ele existir.
$$(): Procura uma seqüência de seletor CSS, retornando uma lista de DOM nós que correspondem. Este é um atalho para document.querySelectorAll().
$0: O elemento atualmente inspecionados na página.
$x(): Avaliar uma expressão XPath e retornar um array de nós correspondentes.
keys(): Dado um objeto, retorna uma lista de keys (ou nomes de propriedade) no objeto. Este é um atalho para object.keys.
values(): Dado um objeto, retorna uma lista de valores nesse objeto, serve como um complemento para keys ().
clear(): Limpa a área de saída do console.
inspect(): Dado um objeto, abre o inspetor de objeto para aquele objeto.
pprint(): Formata o valor especificado de forma legível, o que é útil para despejar o conteúdo de objetos e arrays.
help(): Exibe o texto de ajuda. Na verdade, em um exemplo maravilhoso de recursão, ele vai lhe trazer a esta página.

Manipulando a página

Você pode fazer mudanças dos valores das 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é definir as funções para a página, por exemplo, 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 de saída de um objeto, você vê no log [object objectName]. Se você clicar nele você pode inspecionar o objeto, então no exemplo acima , se você clicar no [object Object] você pode ver esta janela:

Isto exibe 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 e exibir os conteúdos atuais do objeto.

Console Web

Abrindo o Web Console