JavaScript - Comandos do Console \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 18 Horas 53 Min 32 Seg Tempo restante da oferta: 18 53 32 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) JavaScript - Comandos do Console [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # JavaScript - Comandos do Console Conheça os comandos do console do navegador e domine essa ferramenta para melhorar seus testes ou caça aos bugs do seu JavaScript! [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 6 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console.png) Olá Web Developers! Muitos programadores [JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript/ "JavaScript") usam o comando `console.log` para ajudar a debugar seus códigos. Porém, há vários comandos do console que ficam de fora de suas rotinas, e que são muitas vezes mais indicados para certas ocasiões. ## Comandos do Console para Logs Os comandos do console mais comuns são os que imprimem algo. O método mais usado é o `.log()`, que simplesmente imprime uma mensagem. Similarmente podemos usar outros métodos: - `.info()`: possui um comportamento parecido com o `.log()` - `.warn()`: imprime uma mensagem em estilo de alerta - `.error()`: apresenta uma mensagem de erro Além disso, já mostrei aqui no blog [como estilizar as mensagens do console](https://www.treinaweb.com.br/blog/aprenda-a-formatar-as-mensagens-do-console-do-navegador/ "como estilizar as mensagens do console") no navegador. Também pode ser bem útil. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) ## Exibindo dados em tabelas Se você precisa analisar vários dados que estão dentro de um Array, pode ser mais interessante usar o comando `.table()`. Se você passar um Array com objetos, eles serão exibidos em uma tabela. Você pode até escolher ordenar os dados por um campo. ![JavaScript Console - Table](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/javascript-console-table.png) Além disso, você também pode passar um objeto. Neste caso, cada propriedade do objeto será exibida em uma linha da tabela. ## Lista interativa das propriedades do objeto Às vezes queremos imprimir coisas como um elemento do DOM. Porém, isso faz o elemento HTML ser impresso no console. Em contrapartida, caso você queira que as propriedades do elemento sejam exibidas, você pode usar o `console.dir()` no lugar. O `dir()` faz com que todas as propriedades de um objeto sejam exibidas. Veja a comparação em relação ao `console.log` ao imprimir um elemento ``. ![JavaScript Console - Dir](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/javascript-console-dir.png) [ ![Kotlin - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/kotlin.svg) Curso Kotlin - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/kotlin-fundamentos) ## Comandos do Console para Agrupar Informações Certamente você já teve a necessidade de imprimir vários valores juntos. Caso tenha usado o `console.log()`, há uma chance do log ter ficado um pouco bagunçado. Há comandos do console que nos fornecem uma maneira simples de agrupar vários logs. Veja no código abaixo: ```javascript console.group('Cursos'); console.log('TreinaWeb') console.groupCollapsed('Categorias') console.log('Front-End'); console.log('Back-End'); console.log('Mobile'); console.groupEnd() console.log('AvMakers') console.groupCollapsed('Categorias') console.log('Edição de Vídeo'); console.log('Modelagem 3D'); console.log('Motion Design'); console.groupEnd() console.groupEnd() ``` Usamos o `.group()` para criar o nome de um grupo. Em seguida nós usamos o `.log()` normalmente. Ao final, fechamos o grupo com `.groupEnd()`. Os grupos criados podem ser fechados, ou seja, por padrão eles são apresentados abertos. No entanto, você pode declarar grupos que sejam apresentados já fechados. Basta usar o `.groupCollapsed()` no lugar de `.group()`. Dessa maneira, caso haja muitos dados, seu console não ficará tão bagunçado. ![JavaScript Console - Group](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/javascript-console-group.png) A identação usada nesse código não é necessária. Eu coloquei apenas para deixar o código mais legível para mostrar onde um grupo inicia e onde ele é encerrado. ## Contando Ocorrências É provável que em algum momento você precise saber quantas vezes um código foi executado. E temos os comandos do console `.count()` e `.countReset()` exatamente para isso! Primeiramente precisamos passar um nome para o `.count()`, como `console.count('cadastro')`. Sempre que esse comando for executado, um contador vai ser incrementado e impresso no console. Para que o contador seja reiniciado, basta indicar o nome do contador para o `.countReset()`, como `console.countReset('cadastro')`. ## Indicando o caminho de execução Sabe quando você precisa se lembrar como determinada função está sendo chamada, mas não lembra o caminho? Para que você poupe tempo, experimente usar o `.trace`. ```javascript function cadastrar() { enviarDados(); } function enviarDados(){ console.trace(); } cadastrar() ``` Como resultado, você terá o caminho, a lista de funções executadas, até chegar no `console.trace()`. ![JavaScript Console - Trace](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/javascript-console-trace.png) [ ![Visão Computacional - Reconhecimento Facial](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/visao-computacional.svg) Curso Visão Computacional - Reconhecimento Facial Conhecer o curso ](https://www.treinaweb.com.br/curso/visao-computacional-reconhecimento-facial) ## Contando o tempo Também temos o comando `console.time()` para indicar o início e fim de uma contagem de tempo. É um comando muito bom para você verificar quanto tempo uma operação está levando. Falei melhor sobre esse comando no post das várias formas que temos para [Testes de Performance](https://www.treinaweb.com.br/blog/testes-de-performance-javascript/ "Testes de Performance") em códigos JavaScript. ## Limpando a bagunça Com o fim de seus testes, você pode limpar o console com as teclas `Ctrl + L`. Mas isso também pode ser feito programaticamente com o comando `console.clear()`. Quando estou testando algo e já tenho muitos logs ou o programa está dando vários alertas que ainda estou investigando, costumo executar esse comando para limpar o console para mim logo na inicialização da aplicação. Assim meus logs não se misturam com outros. - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #console ](https://www.treinaweb.com.br/blog/tag/console) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/02/ESTRUTURAS-CONDICIONAIS-REPETICAO-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Estruturas condicionais e estruturas de repetição em JavaScript ](https://www.treinaweb.com.br/blog/estruturas-condicionais-e-estruturas-de-repeticao-em-javascript) Neste artigo veremos como utilizar as estruturas condicionais (if, else) e as estruturas de repetição (while, for) no JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/GUIA-LINGUAGEM-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Guia da Linguagem JavaScript ](https://www.treinaweb.com.br/blog/guia-da-linguagem-javascript) Neste Guia da Linguagem Javascript vamos abordar aspectos fundamentais, como: tipos de dados, variáveis, objetos, arrays e muito mais. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01133925/javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 9 anos atrás ## [ O que se pode fazer com JavaScript hoje em dia? ](https://www.treinaweb.com.br/blog/o-que-se-pode-fazer-com-javascript-hoje-em-dia) Conheça as várias áreas onde podemos trabalhar com JavaScript além do navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/12/por-que-ainda-usamos-o-terminal-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ Por que ainda usamos o terminal? ](https://www.treinaweb.com.br/blog/por-que-ainda-usamos-o-terminal) Entenda por que em um mundo tão moderno, com mouses e touch screens, ainda usamos terminais para trabalhar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/04/23151556/MÓDULOS-NPM-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 8 anos atrás ## [ Criando módulos globais do NPM ](https://www.treinaweb.com.br/blog/criando-modulos-globais-do-npm) Aprenda a fazer seus próprios módulos globais do NPM e crie ferramentas executadas diretamente do terminal em apenas 5 passos! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/google-devtools-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 4 anos atrás ## [ Google DevTools e suas funcionalidades ](https://www.treinaweb.com.br/blog/google-devtools-e-suas-funcionalidades) Neste artigo, veremos algumas maneiras pelas quais o Google DevTools pode ser usado para melhorar o desenvolvimento dos nossos projetos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/aprenda-a-formatar-as-mensagens-do-console-do-navegador-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Aprenda a formatar as mensagens do console do navegador ](https://www.treinaweb.com.br/blog/aprenda-a-formatar-as-mensagens-do-console-do-navegador) Veja como é possível formatar as mensagens do console do navegador e até mesmo imprimir imagens nele. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/javascript_generators-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ JavaScript Assíncrono com Generators ](https://www.treinaweb.com.br/blog/javascript-assincrono-com-generators) Generators são uma funcionalidade que veio no ES2015 para nos auxiliar no desenvolvimento de código assíncrono. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/usando-o-async-await-do-javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Usando o Async / Await do JavaScript ](https://www.treinaweb.com.br/blog/usando-o-async-await-do-javascript) Conheça a funcionalidade async / await do JavaScript que nos ajuda a trabalhar com códigos assíncronos como se estivéssemos escrevendo de forma síncrona. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/EJS-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 5 anos atrás ## [ Utilizando template engine EJS com Node.js ](https://www.treinaweb.com.br/blog/utilizando-template-engine-ejs-com-node-js) Neste artigo vamos aprender a utilizar a Template Engine EJS com Node.js e também alguns recursos interessantes desta ferramenta. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/09/TYPESCRIPT-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 5 anos atrás ## [ Como instalar o TypeScript ](https://www.treinaweb.com.br/blog/como-instalar-o-typescript) Neste artigo veremos como instalar o TypeScript, conhecer o arquivo tsconfig, executar nosso primeiro código no Node.js e no navegador. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/12/TS-ZOD-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 3 anos atrás ## [ O que é o Zod? ](https://www.treinaweb.com.br/blog/o-que-e-o-zod) Neste artigo vamos ter uma introdução sobre o Zod, uma biblioteca de declaração e validação de dados em TypeScript e criar um exemplo de como utilizá-la. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **18h 53min 32s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58