Registrar mensagens no console

Kayce Basques

Este tutorial interativo mostra como registrar e filtrar mensagens no Chrome DevTools Console.

Este tutorial deve ser concluído em ordem. Ele pressupõe que você entenda os fundamentos do desenvolvimento da Web, como usar o JavaScript para adicionar interatividade a uma página.

Configurar a demonstração e o DevTools

Este tutorial foi criado para que você possa abrir a demonstração e testar todos os fluxos de trabalho. Quando você acompanha fisicamente, é mais provável que se lembre dos fluxos de trabalho mais tarde.

1. Abra a demonstração.

2. Opcional: mova a demonstração para uma janela separada. Neste exemplo, o tutorial está à esquerda e a demonstração à direita.

   

3. Concentre-se na demonstração e pressione Control+Shift+J ou Command+Option+J (Mac) para abrir o DevTools. Por padrão, o DevTools é aberto à direita da demonstração.

   

4. Opcional: fixe o DevTools na parte de baixo da janela ou desafixe-o em uma janela separada.

   DevTools fixado na parte de baixo da demonstração:

   DevTools desafixado em uma janela separada:

Ver mensagens registradas do JavaScript

A maioria das mensagens que aparecem no console vem dos desenvolvedores da Web que escreveram o JavaScript da página. O objetivo desta seção é apresentar os diferentes tipos de mensagens que você provavelmente verá no console e explicar como registrar cada tipo de mensagem no seu próprio JavaScript.

1. Clique no botão Log Info na demonstração. Hello, Console! é registrado no console.

   

2. Ao lado da mensagem Hello, Console! no console, clique em log.js:2. O painel Sources é aberto e destaca a linha de código que fez com que a mensagem fosse registrada no console.

   

   A mensagem foi registrada quando o JavaScript da página chamou console.log('Hello, Console!').

3. Navegue de volta para o console usando um dos seguintes fluxos de trabalho:

   • Clique na guia Console.
   • Pressione Control+[ ou Command+[ (Mac) até que o console esteja em foco.
   • Abra o menu de comandos, comece a digitar Console, selecione o comando Show Console Panel, e pressione Enter.

4. Clique no botão Log Warning na demonstração. Abandon Hope All Ye Who Enter é registrado no console.

   

   Mensagens formatadas dessa forma são avisos.

5. Opcional: clique em log.js:12 para conferir o código que fez com que a mensagem fosse formatada dessa forma e navegue de volta para o console quando terminar. Faça isso sempre que quiser conferir o código que fez com que uma mensagem fosse registrada de uma determinada maneira.

6. Clique no ícone Expandir na frente de Abandon Hope All Ye Who Enter. O DevTools mostra o stack trace que leva à chamada.

   

   O stack trace informa que uma função chamada logWarning foi chamada, que por sua vez chamou uma função chamada quoteDante. Em outras palavras, a chamada que aconteceu primeiro está na parte de baixo do stack trace. É possível registrar stack traces a qualquer momento chamando console.trace().

7. Clique em Log Error. A seguinte mensagem de erro é registrada: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Clique em Log Table. Uma tabela sobre artistas famosos é registrada no console.

   

   Observe como a coluna birthday só é preenchida para uma linha. Confira o código para descobrir o motivo.

9. Clique em Log Group. Os nomes de quatro tartarugas famosas que combatem o crime são agrupados sob o rótulo Adolescent Irradiated Espionage Tortoises.

   

10. Clique em Log Custom. Uma mensagem com uma borda vermelha e um fundo azul é registrada no console.

    

A ideia principal aqui é que, quando você quiser registrar mensagens no console do JavaScript, use um dos métodos console. Cada método formata mensagens de maneira diferente.

Há ainda mais métodos do que os demonstrados nesta seção. No final do tutorial, você vai aprender a conferir o restante dos métodos.

Ver mensagens registradas pelo navegador

O navegador também registra mensagens no console. Isso geralmente acontece quando há um problema com a página.

1. Clique em Cause 404. O navegador registra um erro de rede 404 porque o JavaScript da página tentou buscar um arquivo que não existe.

   

2. Clique em Cause Error. O navegador registra um TypeError não detectado porque o JavaScript está tentando atualizar um nó DOM que não existe.

   

3. Clique no menu suspenso Log Levels e ative a opção Verbose se ela estiver desativada. Você vai aprender mais sobre filtragem na próxima seção. É necessário fazer isso para garantir que a próxima mensagem registrada fique visível. Observação:se o menu suspenso "Níveis padrão" estiver desativado, talvez seja necessário fechar a barra lateral do console. Filtre por "Origem da mensagem" abaixo para mais informações sobre a barra lateral do console.

   

4. Clique em Cause Violation. A página deixa de responder por alguns segundos e, em seguida, o navegador registra a mensagem [Violation] 'click' handler took 3000ms no console. A duração exata pode variar.

   

Filtrar mensagens

Em algumas páginas, o console fica cheio de mensagens. O DevTools oferece muitas maneiras diferentes de filtrar mensagens que não são relevantes para a tarefa em questão.

Ponto-chave:o console filtra apenas as mensagens de saída. Todas as entradas digitadas no console permanecem lá.

Filtrar por nível de registro

Cada método console.* recebe um nível de gravidade: Verbose, Info, Warning ou Error. Por exemplo, console.log() é uma mensagem de nível Info, enquanto console.error() é uma mensagem de nível Error.

Observação: Para uma lista completa de métodos console.* e os níveis de gravidade deles, consulte a referência da API Console.

Para filtrar por nível de registro:

1. Clique no menu suspenso Log Levels e desative Errors. Um nível é desativado quando não há mais uma marca de seleção ao lado dele. As mensagens de nível Error desaparecem.

   

2. Clique novamente no menu suspenso Log Levels e reative Errors. As mensagens de nível Error reaparecem.

Ponto-chave:o console sempre se lembra do filtro suspenso aplicado. Ele persiste em todas as páginas, bem como em recarregamentos de páginas, do DevTools e do Chrome. Para aplicar rapidamente um filtro temporário, use a barra lateral.

Filtrar por texto

Quando quiser conferir apenas as mensagens que incluem uma string exata, digite essa string na caixa Filter.

1. Digite Dave na caixa Filter. Todas as mensagens que não incluem a string Dave ficam ocultas.

   

2. Exclua Dave da caixa Filter. Todas as mensagens reaparecem.

Filtrar por expressão regular

Quando quiser mostrar todas as mensagens que incluem um padrão de texto, em vez de uma string específica, use uma expressão regular.

1. Digite /^[AH]/ na caixa Filter. Digite esse padrão no RegExr para uma explicação do que ele está fazendo.

   

2. Exclua /^[AH]/ da caixa Filter. Todas as mensagens ficam visíveis novamente.

Filtrar por origem da mensagem

Quando quiser conferir apenas as mensagens que vieram de um determinado URL, use a barra lateral.

Ponto-chave:os filtros da barra lateral são temporários. O console não mantém esses filtros em todas as páginas, bem como em recarregamentos de páginas, do DevTools e do Chrome.

1. Clique em Show Console Sidebar .

   

2. Clique no ícone Expandir ao lado de 12 Messages. A barra lateral mostra uma lista de URLs que fizeram com que as mensagens fossem registradas. Por exemplo, log.js causou 11 mensagens.

   

Filtrar por mensagens do usuário

Anteriormente, quando você clicou em Log Info, um script chamou console.log('Hello, Console!') para registrar a mensagem no console. Mensagens registradas do JavaScript como essa são chamadas de mensagens do usuário. Por outro lado, quando você clicou em Cause 404, o navegador registrou uma mensagem de nível Error informando que o recurso solicitado não foi encontrado. Mensagens como essa são consideradas mensagens do navegador. É possível usar a barra lateral para filtrar mensagens do navegador e mostrar apenas mensagens do usuário.

1. Clique em 9 User Messages. As mensagens do navegador ficam ocultas.

   

2. Clique em 12 Messages para mostrar todas as mensagens novamente.

Usar o console com qualquer outro painel

E se você estiver editando estilos, mas precisar verificar rapidamente o registro do console para algo? Use a gaveta.

1. Clique na guia Elements.

2. Pressione Escape. A guia Console da gaveta é aberta. Ela tem todos os recursos do console que você usou neste tutorial.

   

Próximas etapas

Parabéns, você concluiu o tutorial. Clique em Dispense Trophy para receber seu troféu.

• Consulte a referência do console para conferir mais recursos e fluxos de trabalho relacionados à interface do console.
• Consulte a referência da API Console para saber mais sobre todos os métodos console que foram demonstrados em Conferir mensagens registradas do JavaScript e conferir os outros métodos console que não foram abordados neste tutorial.
• Consulte Primeiros passos para conferir o que mais você pode fazer com o DevTools.
• Consulte Formatar e estilizar mensagens no console para saber mais sobre todos os métodos de formatação e estilo console.