Aprenda a formatar as mensagens do console do navegador \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 01 Horas 43 Min 45 Seg Tempo restante da oferta: 01 43 45 [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) Aprenda a formatar as mensagens do console do navegador [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) # 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. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 10 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/aprenda-a-formatar-as-mensagens-do-console-do-navegador.png) Olá, Web Developers! Muitos aqui sabem que os navegadores possuem console e que podemos executar o comando `console.log()` para imprimir mensagens e objetos, o que nos ajuda muito na hora de fazer debug. [ ![Dart - Tópicos Avançados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/dart.svg) Curso Dart - Tópicos Avançados Conhecer o curso ](https://www.treinaweb.com.br/curso/dart-topicos-avancados) Porém, quando entramos em sites como, por exemplo, o Facebook e abrimos o console, podemos ver a seguinte mensagem: ![Facebook Console](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/Facebook-javascript-console-mensagem.png) Muitas pessoas não sabem, mas as mensagens do console podem ser estilizadas em alguns navegadores. Para o exemplo a seguir, abra o console em seu computador e clique na aba `Result`: Você terá o seguinte resultado: ![Console JavaScript - Formatação de Cores](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/javascript-console-formatacao-cores.png) Para poder estilizar as mensagens do console, basta colocar `%c` junto ao texto que você está passando para o comando `console.log()` (ou qualquer outra função que imprima algo no console, como `console.warn()`). Em seguida, basta passar a estilização como um segundo parâmetro. Ela é feita via CSS mesmo: ```js console.log('%c Meu Texto','color: white; background-color: red;'); ``` Mas, já que estamos falando de CSS, que tal também imprimir uma imagem? No console, execute o seguinte comando: ```js console.log('%c', 'padding: 40px 45px;line-height:100px;background:url("http://i65.tinypic.com/dnixjm.png") no-repeat;background-size: cover;'); ``` Você terá o seguinte resultado: ![Console com Imagem](http://i68.tinypic.com/b54knp.png) ## Ok, mas o console é mais para debug. Por que eu usaria isso? Um cenário é quando a sua equipe usa muito o console para monitorar algo durante o desenvolvimento e deixa várias mensagens sendo impressas. Poder formatá-las, colocar imagens, etc, pode ajudar a deixá-lo mais organizado, facilitando a leitura dos conteúdos impressos. Mas há de se ter cautela, pois muitas mensagens sendo impressas com o console aberto podem afetar a performance da sua página e isso vai te atrapalhar no processo de desenvolvimento. Um ótimo caso é fazer algo parecido com o Facebook. Se há possibilidade dos seus usuários abrirem o console para tentar algo, você pode chamar a atenção deles avisando que eles mesmos podem estar correndo algum tipo de risco. O terceiro motivo é quando a intenção é exatamente fazer com que o usuário abra o console para usá-lo. Quando você entra no site da biblioteca RxJS e abre o console, você é recebido com uma simples mensagem dizendo que você pode experimentar os códigos da biblioteca diretamente por ele. Nesse caso, você poderia receber o usuário com o logo do seu projeto e uma mensagem com uma formatação simples (se o navegador dele suportar). ![RxJS Console](http://i67.tinypic.com/6tpg77.png) E aí, o que achou? Já usou essa funcionalidade? Compartilhe com a gente aí nos comentários! [ ![Dart - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/dart.svg) Curso Dart - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/dart-fundamentos) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Front-end ](https://www.treinaweb.com.br/blog/tag/front-end) - [ #CSS ](https://www.treinaweb.com.br/blog/tag/css) 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/2020/01/03075049/Ordenação-de-Cores-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Ordenando Elementos por Cores ](https://www.treinaweb.com.br/blog/javascript-ordenando-elementos-por-cores) Aprenda a ordenar cores e fazer conversões entre os formatos RGB, Hexadecimal e HSL usando JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/condicional-if-else-no-php-aprenda-suas-caracteristicas-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Condicional IF Else no PHP. Aprenda suas características! ](https://www.treinaweb.com.br/blog/condicional-if-else-no-php-aprenda-suas-caracteristicas) Aprenda como trabalhar com condicional if else no php, as principais características dessa estrutura de decisão para a linguagem e as recomendações da PSR12. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/17150002/arrays-no-php-aprenda-como-declarar-e-acessar-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Arrays no PHP: Aprenda como declarar e acessar! ](https://www.treinaweb.com.br/blog/arrays-no-php-aprenda-como-declarar-e-acessar) Aprenda desde o início como declarar e acessar arrays no PHP. Veja o que são arrays, como trabalhar com array simples, associativo e multidimensional. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/15113141/como-declarar-variaveis-no-php-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Variáveis no PHP. Acesse e aprenda como declarar! ](https://www.treinaweb.com.br/blog/variaveis-no-php-acesse-e-aprenda-como-declarar) Aprenda como declarar variáveis no PHP, as principais regras de nomeação de variáveis, suas características e tipos básicos de dados da linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/05155045/Flip-Cards-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 7 anos atrás ## [ CSS: Aprenda a Criar o Efeito de Flip Cards ](https://www.treinaweb.com.br/blog/css-aprenda-a-criar-o-efeito-de-flip-cards) Aprenda a criar o efeito de Flip Cards com CSS puro de maneira bem simples. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/google2-400x280.jpg) [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 10 anos atrás ## [ Aprenda a melhorar suas buscas no Google ](https://www.treinaweb.com.br/blog/aprenda-a-melhorar-suas-buscas-no-google) Conheça os recursos que o Google disponibiliza para aperfeiçoar os resultados das buscas e torná-las mais específicas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/cordova-400x280.jpg) [ Android ](https://www.treinaweb.com.br/blog/categoria/android) 10 anos atrás ## [ Aprenda a instalar o Cordova com Android no macOS ](https://www.treinaweb.com.br/blog/aprenda-a-instalar-o-cordova-com-android-no-macos) Aprenda a configurar o Cordova para compilar no emulador ou direto no dispositivo Android usando o macOS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Introdução ao Maven, aprenda como criar e gerenciar projetos Java ](https://www.treinaweb.com.br/blog/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java) Neste artigo veremos como instalar o Maven e como podemos utilizá-lo para nos auxiliar na criação e no gerenciamento de dependência de um projeto Java. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/foreach-no-php-aprenda-ler-arrays-e-outras-estruturas-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Foreach no PHP. Aprenda ler arrays e outras estruturas! ](https://www.treinaweb.com.br/blog/foreach-no-php-aprenda-ler-arrays-e-outras-estruturas) O loop foreach no PHP é uma estrutura de repetição simples e flexível! Aprenda corretamente como utilizar para percorrer arrays e outras estruturas no PHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/05/como-instalar-o-csharp-e-nosso-primeiro-exemplo-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 4 anos atrás ## [ Orientação a objetos no C# ](https://www.treinaweb.com.br/blog/orientacao-a-objetos-no-csharp) Aprenda como trabalhar com classes, atributos, métodos e objetos no C# e aumente seus conhecimentos nessa linguagem incrível! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/04/o-que-e-o-composer-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 5 anos atrás ## [ Como instalar um pacote com Composer e utilizá-lo em seu projeto PHP ](https://www.treinaweb.com.br/blog/como-instalar-um-pacote-com-composer-e-utiliza-lo-em-seu-projeto-php) Aprenda a instalar e utilizar o gerenciador de dependências Composer e dê o próximo passo rumo a se tornar um desenvolvedor PHP. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/10/configurando-ambiente-de-desenvolvimento-spring-boot-no-macos-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 5 anos atrás ## [ Configurando ambiente de desenvolvimento Spring Boot no MacOS ](https://www.treinaweb.com.br/blog/configurando-ambiente-de-desenvolvimento-spring-boot-no-macos) Aprenda como instalar e configurar o ambiente de desenvolvimento Spring Boot no MacOS 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 **01h 43min 45s** - 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