Executando verificação de segurança...
8
Kevaosz
1 min de leitura ·

Não use mais console.log ❌ da mesma maneira, mas assim... ✔

É 2022 (quase 2023), não use mais o console.log() da mesma maneira, mas assim:

  • Como alguém que trabalhe com frot-end, é importante aprender usar o console.log. Esse método pode permitir que você mostre informações na tela do console ao depurar determinados problemas. 😎

  • ??console.log()??

console() é um dos métodos mais usados em JS, sendo facilmente encontrado em qualquer lugar.

const nome = "rafael";
const idade = 18

console.log(nome, idade);

CONSOLE:

rafael 18

Mas quando há muita informação, fica difícil saber o que isso significa! 🤔

Então...existe alguma maneira para ver o resultado de forma clara e concisa?

Sim, só precisamos agrupar a saída em um objeto! 😁

console.log({name, age, job, hobbies});

TERMINAL

E Voilà!

Um terminal mais limpo, objetivo e com cores! 😉

Caso queira, contribua com dicas/idéias simples aqui embaixo! :)

Carregando publicação patrocinada...
2
rbrocchi

Uma dica https://nodejs.org/api/console.html
Para ver resultados em tela sempre é bom, mas em produção é interessante não ter tanto (ou nenhum rs).
Daí pra frente é interessante usar uma coisa chamada de "errors" e "warn" handlers conjunta a uma ferramenta de monitoramento (um painel para visualizar quando der problema, ou disparar um alerta).

Para brincar e fazer alguns testes, da para também colocar cores no console.

1
1
1
alexalannunes

Uma maneira de visualizar JSON estruturado:

JSON.stringify({name: "tabnews"}, null, 2);

{
    "name": "tabnews"
}

Ou quando querer visualizar todas as props de elemento DOM, o console.log mostra o elemento em si <div />, já o console.dir mostra toda sua estrutura em formato de objeto. Útil quando quiser saber quais props um elemento tem

console.dir(document.body);

🎉

1
1
luccasguimaraes

Excelente! Além disso, se as variáveis estiverem relacionadas a uma mesma entidade, seria bom criarmos um objeto - ao invés de inúmeras variáveis soltas.

Grande abraço \o/

1
1
1
1
1
caetanoburjack

Uma outra possibilidade, caso queira estruturar um pouco melhor os dados, é, ao invés de .log, usar o .table, que exibiria esses dados em formato de tabela.
Acho mais agradável de visualizar. E quanto maior o volume de dados, melhor.

1