{"id":37080,"date":"2025-01-17T09:52:46","date_gmt":"2025-01-17T12:52:46","guid":{"rendered":"https:\/\/www.locaweb.com.br\/ajuda\/?post_type=ht_kb&#038;p=37080"},"modified":"2025-01-17T09:52:46","modified_gmt":"2025-01-17T12:52:46","slug":"console-log","status":"publish","type":"ht_kb","link":"https:\/\/www.locaweb.com.br\/ajuda\/wiki\/console-log\/","title":{"rendered":"Como usar o console.log() para exibir mensagens de log? | VPS Locaweb\/Cloud Server Pro"},"content":{"rendered":"<p>O <strong>console.log()<\/strong> \u00e9 uma ferramenta essencial para desenvolvedores <a href=\"https:\/\/www.locaweb.com.br\/blog\/temas\/codigo-aberto\/o-que-e-javascript\/\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript<\/a> que permite a exibi\u00e7\u00e3o de mensagens de log no console do navegador.<\/p>\n<p>Esse m\u00e9todo \u00e9 amplamente utilizado para <strong>depura\u00e7\u00e3o de c\u00f3digo, rastreamento de vari\u00e1veis e monitoramento do fluxo de execu\u00e7\u00e3o de um programa<\/strong>. Neste guia completo, vamos explorar como utilizar o console.log() de forma eficiente para melhorar o seu processo de desenvolvimento com o VPS Locaweb ou o Cloud Server Pro<\/p>\n<h2>N\u00edveis de mensagens do console<\/h2>\n<p>Al\u00e9m do m\u00e9todo console.log(), existem outras op\u00e7\u00f5es que permitem exibir mensagens com diferentes n\u00edveis de import\u00e2ncia:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong>console.log()<\/strong>: mensagens gerais de informa\u00e7\u00e3o;<\/li>\n<li><strong>console.info()<\/strong>: mensagens informativas;<\/li>\n<li><strong>console.warn()<\/strong>: mensagens de aviso;<\/li>\n<li><strong>console.error()<\/strong>: mensagens de erro;<\/li>\n<li><strong>console.debug()<\/strong>: mensagens de depura\u00e7\u00e3o (nem sempre vis\u00edveis por padr\u00e3o).<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Cada um deles pode ser usado de acordo com a natureza da informa\u00e7\u00e3o que voc\u00ea deseja registrar. Dessa forma, \u00e9 mais f\u00e1cil <strong>identificar e filtrar mensagens importantes<\/strong> durante o desenvolvimento.<\/p>\n<h2>Sintaxe console.log()<\/h2>\n<p>Conhe\u00e7a a sintaxe b\u00e1sica do console.log() no <strong>Javascript<\/strong>:<\/p>\n<pre><em>console.log(object1 [, object2, ..., objectN]);<\/em>\r\n\r\n<em>console.log(msg [, subst1, ..., substN]);<\/em><\/pre>\n<p>Onde usar?<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><em>object1 <\/em><em>&#8230; <\/em><em>objectN<\/em>: uma lista de objetos JavaScript a serem impressos;<\/li>\n<li><em>msg<\/em>: uma string JavaScript cont\u00e9m zero ou mais strings de substitui\u00e7\u00e3o;<\/li>\n<li><em>subst1<\/em><em> &#8230; <\/em><em>substN<\/em>: objetos JavaScript para substituir strings de substitui\u00e7\u00e3o dentro da string msg.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Como usar o console.log()?<\/h2>\n<p>Agora, veja como usar o console.log () na pr\u00e1tica!<\/p>\n<h3>Registrar v\u00e1rios tipos de valores<\/h3>\n<p>O console.log() pode registrar v\u00e1rios tipos de valores, como strings, n\u00fameros, objetos, arrays, entre outros.<\/p>\n<h4>Exemplo<\/h4>\n<pre><em>console.log(\"Ol\u00e1 Mundo!\");<\/em>\r\n\r\n<em>console.log(1234);<\/em>\r\n\r\n<em>console.log(true);<\/em>\r\n\r\n<em>console.log([1, 2, 3]);<\/em>\r\n\r\n<em>console.log({name: \"Jo\u00e3o\", age: 30});<\/em><\/pre>\n<h3>Registrar valores com especificadores de formato<\/h3>\n<p>Podemos usar especificadores de formato na string <em>msg<\/em> para substituir valores.<\/p>\n<h4>Exemplo<\/h4>\n<pre><em>console.log(\"Meu nome \u00e9 %s e eu tenho %d anos\", \"Maria\", 25); <\/em><\/pre>\n<p><em>\/\/ Sa\u00edda: Meu nome \u00e9 Maria e eu tenho 25 anos<\/em><\/p>\n<p>Os especificadores mais comuns s\u00e3o:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><em>%s<\/em> \u2014 String;<\/li>\n<li><em>%d<\/em> ou <em>%i <\/em>\u2014 Inteiro;<\/li>\n<li><em>%f<\/em> \u2014 Float;<\/li>\n<li><em>%o<\/em> \u2014 Objeto.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Agrupar mensagens de log<\/h3>\n<p>Podemos agrupar mensagens com os m\u00e9todos <em>console.group()<\/em> ou <em>console.groupCollapsed()<\/em> e finalizar com <em>console.groupEnd()<\/em>.<\/p>\n<h4>Exemplo<\/h4>\n<pre><em>console.group(\"Informa\u00e7\u00f5es do usu\u00e1rio\");<\/em>\r\n\r\n<em>console.log(\"Nome: Jo\u00e3o\");<\/em>\r\n\r\n<em>console.log(\"Idade: 30\");<\/em>\r\n\r\n<em>console.groupEnd();<\/em><\/pre>\n<p>Com isso, as mensagens agrupadas no console ser\u00e3o exibidas.<\/p>\n<h2>Navegadores compat\u00edveis com console.log()<\/h2>\n<p>O console.log() \u00e9 suportado em todos os principais navegadores modernos:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li>Chrome;<\/li>\n<li>Firefox;<\/li>\n<li>Safari;<\/li>\n<li>Edge;<\/li>\n<li>Opera;<\/li>\n<li>Internet Explorer 8+.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>Agora que voc\u00ea j\u00e1 sabe como usar o console.log(), aproveite para testar em seus projetos JavaScript!<\/p>\n<p>Quer aprender mais sobre JavaScript? Leia tamb\u00e9m:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><a href=\"https:\/\/www.locaweb.com.br\/blog\/categoria\/?\/dom-javascript\" target=\"_blank\" rel=\"noopener noreferrer\">JavaScript DOM<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h2>Perguntas frequentes<\/h2>\n<h3>Para que serve a fun\u00e7\u00e3o console log?<\/h3>\n<p>A fun\u00e7\u00e3o console.log() serve principalmente para:<\/p>\n<ul>\n<li style=\"list-style-type: none;\">\n<ul>\n<li><strong>Depura\u00e7\u00e3o de c\u00f3digo<\/strong>: permite que os desenvolvedores visualizem o valor de vari\u00e1veis e o resultado de express\u00f5es em tempo real;<\/li>\n<li><strong>Rastreamento de execu\u00e7\u00e3o<\/strong>: ajuda a entender o fluxo de execu\u00e7\u00e3o do c\u00f3digo e mostra quais partes do script s\u00e3o executadas;<\/li>\n<li><strong>Exibi\u00e7\u00e3o de informa\u00e7\u00f5es<\/strong>: \u00fatil para mostrar mensagens informativas durante o desenvolvimento ou testes;<\/li>\n<li><strong>Verifica\u00e7\u00e3o de dados<\/strong>: permite inspecionar a estrutura e o conte\u00fado de objetos e arrays complexos.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h3>Como executar console log?<\/h3>\n<p>Para executar o console.log(), siga os passos abaixo:<\/p>\n<ol>\n<li style=\"list-style-type: none;\">\n<ol>\n<li>Abra o editor de c\u00f3digo da sua prefer\u00eancia;<\/li>\n<li>Insira o c\u00f3digo JavaScript e inclua as chamadas <em>console.log()<\/em>;<\/li>\n<li>Se voc\u00ea trabalha em um ambiente de navegador:<\/li>\n<li>Se voc\u00ea usa Node.js:<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n<h3>O que significa console na programa\u00e7\u00e3o?<\/h3>\n<p>Na programa\u00e7\u00e3o, especialmente no contexto de desenvolvimento web e JavaScript, &#8220;console&#8221; refere-se \u00e0<strong> interface de linha de comando fornecida pelos navegadores e ambientes de execu\u00e7\u00e3o JavaScript<\/strong> (como Node.js).<\/p>\n<p>Essa interface permite que os desenvolvedores interajam com o ambiente de execu\u00e7\u00e3o, visualizem sa\u00eddas de depura\u00e7\u00e3o e executem comandos JavaScript em tempo real.<\/p>\n<p>O objeto console em JavaScript fornece acesso a essa interface de depura\u00e7\u00e3o e oferece m\u00e9todos como<em> log()<\/em>, <em>error<\/em><em>()<\/em>, <em>warn()<\/em>, entre outros, para exibir diferentes tipos de informa\u00e7\u00f5es.<\/p>\n<p>Voc\u00ea tamb\u00e9m poder\u00e1 executar o console.log() via terminal com o comando node nomedoarquivo.js. Confira:<\/p>\n<p>C\u00f3digo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-37081 size-full\" src=\"https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/codigo-console.png\" alt=\"exemplo de c\u00f3digo console.log\" width=\"941\" height=\"685\" srcset=\"https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/codigo-console.png 941w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/codigo-console-300x218.png 300w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/codigo-console-768x559.png 768w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/codigo-console-50x36.png 50w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/codigo-console-60x44.png 60w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/codigo-console-100x73.png 100w\" sizes=\"auto, (max-width: 941px) 100vw, 941px\" \/><\/p>\n<p>Resultado:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-37082\" src=\"https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/resuultado-console-log-300x83.png\" alt=\"resultado console.log\" width=\"300\" height=\"83\" srcset=\"https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/resuultado-console-log-300x83.png 300w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/resuultado-console-log-768x213.png 768w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/resuultado-console-log-50x14.png 50w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/resuultado-console-log-60x17.png 60w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/resuultado-console-log-100x28.png 100w, https:\/\/www.locaweb.com.br\/ajuda\/wp-content\/uploads\/2025\/01\/resuultado-console-log.png 941w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>O console.log() \u00e9 uma ferramenta essencial para desenvolvedores JavaScript que permite a exibi\u00e7\u00e3o de mensagens de log no console do navegador. Esse m\u00e9todo \u00e9 amplamente utilizado para depura\u00e7\u00e3o de c\u00f3digo, rastreamento de vari\u00e1veis e monitoramento do fluxo de execu\u00e7\u00e3o de um programa. Neste guia completo, vamos explorar como utilizar o&#8230;<\/p>\n","protected":false},"author":48,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[118,106],"ht-kb-tag":[],"class_list":["post-37080","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-vps-locaweb","ht_kb_category-cloud-server-pro"],"_links":{"self":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/37080","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/comments?post=37080"}],"version-history":[{"count":1,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/37080\/revisions"}],"predecessor-version":[{"id":37083,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb\/37080\/revisions\/37083"}],"wp:attachment":[{"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/media?parent=37080"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb-category?post=37080"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.locaweb.com.br\/ajuda\/wp-json\/wp\/v2\/ht-kb-tag?post=37080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}