Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.
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.
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.
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
consolefornecido 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.
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
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.
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, 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 an array of DOM nodes that match. This is like for
document.querySelectorAll(), but returns an array instead of aNodeList. $0- The currently-inspected element in the page.
$_- 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. This helper accepts multiple different ways of identifying the frame to switch to. You can supply any of the following:
- a selector string that will be passed to
document.querySelectorto locate the iframe element - the iframe element itself
- the content window inside the iframe
See working with iframes.
- a selector string that will be passed to
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
outerHTMLis copied. Otherwise,JSON.stringifywill 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
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.