Registrar mensagens no console

Kayce Basques

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

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

Configurar a demonstração e o DevTools

Este tutorial foi elaborado para que você possa abrir a demonstração e testar todos os fluxos de trabalho por conta própria. Ao acompanhar fisicamente, é mais provável que você 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 está à 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 abre à direita da demonstração.

   

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

   DevTools na parte inferior da demonstração:

   DevTools desancorado em uma janela separada:

Visualizar mensagens registradas em JavaScript

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

1. Clique no botão Informações de registro na demonstração. Hello, Console! é registrado no console.

   

2. Ao lado da mensagem Hello, Console! no Console, clique em log.js:2. O painel Origens é 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 chamava console.log('Hello, Console!').

3. Volte para o Console usando um dos seguintes fluxos de trabalho:

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

4. Clique no botão Log Warning na demonstração. O Abandon Hope All Ye Who Enter fica registrado no Console.

   

   Mensagens formatadas dessa forma são avisos.

5. Opcional: clique em log.js:12 para ver o código que causou a formatação da mensagem dessa forma e volte ao Console quando terminar. Faça isso sempre que quiser ver o código que causou o registro de uma mensagem de determinada maneira.

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

   

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

7. Clique em Registrar erro. Esta mensagem de erro é registrada: I'm sorry, Dave. I'm afraid I can't do that.

   

8. Clique em Tabela de registros. Uma tabela sobre artistas famosos é registrada no console.

   

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

9. Clique em Grupo de registros. Os nomes de quatro tartarugas famosas de combate ao crime estão agrupados no rótulo Adolescent Irradiated Espionage Tortoises.

   

10. Clique em Registrar personalizado. Uma mensagem com borda vermelha e plano de fundo azul é registrada no Console.

    

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

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

Acessar 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 Causa 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 Causar erro. 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 Níveis de registro e ative a opção Detalhado, se ela estiver desativada. Saiba mais sobre filtros na próxima seção. Você precisa fazer isso para garantir que a próxima mensagem registrada esteja visível. Observação:se o menu suspenso "Default Levels" estiver desativado, feche a barra lateral do console. Filtre por "Origem da mensagem" abaixo para mais informações sobre a barra lateral do console.

   

4. Clique em Causa violação. 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 ficará cheio de mensagens. O DevTools oferece muitas maneiras diferentes de filtrar mensagens que não são relevantes para a tarefa em questão.

Importante:o Console filtra apenas as mensagens de saída. Todas as entradas que você digitou 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 no nível do Info, enquanto console.error() é uma mensagem no nível do Error.

Observação:para conferir 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 na lista suspensa Log Levels e desative Errors. Um nível é desativado quando não há mais uma marca de seleção ao lado dele. As mensagens no nível Error desaparecem.

   

2. Clique no menu suspenso Níveis de registro novamente e reative Erros. As mensagens de nível Error reaparecem.

Importante:o Console sempre se lembra do filtro suspenso que você aplica. Ela persiste em todas as páginas, bem como nas atualizações de página, DevTools e Chrome. Para aplicar um filtro temporário rapidamente, use a barra lateral.

Filtrar por texto

Quando você quiser ver apenas as mensagens que incluem uma string exata, digite essa string na caixa de texto Filter.

1. Digite Dave na caixa de texto Filter. Todas as mensagens que não incluem a string Dave ficam ocultas. O rótulo Adolescent Irradiated Espionage Tortoises também aparece. Isto é um bug.

   

2. Exclua Dave da caixa de texto Filter. Todas as mensagens reaparecerão.

Filtrar por expressão regular

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

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

   

2. Exclua /^[AH]/ da caixa de texto Filter. Todas as mensagens estão visíveis novamente.

Filtrar por origem da mensagem

Quando você quiser visualizar apenas as mensagens provenientes de um determinado URL, use a barra lateral.

Importante:os filtros da barra lateral são temporários. O Console não mantém esses filtros em todas as páginas, nem nas atualizações da página, do DevTools e do Chrome.

1. Clique em Show Console Sidebar .

   

2. Clique no ícone Expandir ao lado de 12 mensagens. A barra lateral mostra uma lista dos URLs que causaram o registro das mensagens. Por exemplo, log.js causou 11 mensagens.

   

Filtrar por mensagens do usuário

Anteriormente, ao clicar em Informações de registro, um script chamado console.log('Hello, Console!') era usado para registrar a mensagem no console. As mensagens registradas em JavaScript dessa forma são chamadas de mensagens do usuário. Por outro lado, quando você clicou em Cause 404, o navegador registrou uma mensagem no nível Error informando que o recurso solicitado não foi encontrado. Mensagens como essa são consideradas mensagens do navegador. Você pode usar a barra lateral para filtrar as mensagens do navegador e mostrar apenas as mensagens dos usuários.

1. Clique em 9 mensagens do usuário. As mensagens do navegador estão ocultas.

   

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

Use o Console com qualquer outro painel

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

1. Clique na guia Elementos.

2. Pressione Esc. A guia Console da Gaveta é aberta. Ela tem todos os recursos do Console que você usou ao longo deste tutorial.

   

Próximas etapas

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

• Consulte a Referência do Console para conhecer 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 Ver mensagens registradas do JavaScript e conheça os outros métodos console que não foram abordados neste tutorial.
• Consulte a seção Começar para descobrir o que mais você pode fazer com o DevTools.
• Consulte Formatar e estilizar mensagens no console para saber mais sobre o formato console e os métodos de estilo.