Hoje estamos publicando uma nota sobre os recursos do uso do console JavaScript em navegadores que estão fora do conhecido comando
console.log() . Na verdade, este comando é a ferramenta mais simples para depurar programas, o que permite gerar algo para o console. No entanto, o conhecimento de alguns recursos desta ferramenta permitirá que aqueles que a utilizam aumentem a eficiência do trabalho.
Comando Console.log () e nomes de variáveis
O caso de uso mais simples para
console.log() é, por exemplo, produzir alguma string ou objeto. Por exemplo, imprima a linha no console:
console.log('Is this working?');
Agora imagine que você precisa gerar vários objetos para o console. Por exemplo - como:
const foo = { id: 1, verified: true, color: 'green' }; const bar = { id: 2, verified: false, color: 'red' };
Talvez seja mais lógico usar vários comandos do formulário
console.log(variable) para resolver esse problema. Embora os dados cheguem ao console, um problema fica claro quando é produzido.
Dê uma olhada no que é exibido no console.
Não há nomes de variáveis no consoleComo você pode ver, os nomes das variáveis
foo e
bar não estão aqui. Os objetos, usando o ícone de seta nas partes esquerdas das linhas, podem ser expandidos, mas mesmo olhando a estrutura interna dos objetos, pode ser muito difícil entender qual objeto é exibido no console. Para resolver esse problema, os nomes de propriedades de objetos calculados nos ajudarão. Ou seja, esse recurso de literais de objeto, que apareceu no ES6, permite que você use um design conveniente do seguinte formato:
console.log({ foo, bar });
Com essa abordagem, um objeto chegará ao console cujos nomes de propriedades serão os nomes dos objetos variáveis que precisam ser exibidos. Além disso, isso permite que você se livre de algumas chamadas para
console.log() , usadas anteriormente para exibir objetos separadamente.
Comando console.table ()
Você pode melhorar ainda mais a aparência do que o programa exibe no console formatando o conteúdo dos objetos em uma tabela. Isso terá um bom efeito na legibilidade das informações. Ou seja, estamos falando do fato de que, se você exibir objetos com os mesmos nomes de propriedades ou matrizes de objetos semelhantes no console, poderá usar o comando
console.table() . Aqui está o resultado da execução de um comando no formulário
console.table({ foo, bar }) .
Comando Console.table () em açãoComando Console.group ()
Este comando pode ser usado se você precisar agrupar determinados dados relacionados e criar estruturas a partir de grupos aninhados que aumentam a usabilidade de trabalhar com esses dados.
Além disso, essa abordagem pode ser usada nos casos em que vários comandos para enviar algo ao console são executados em uma determinada função, e é necessário que seja possível separar claramente, de relance, os resultados de tais comandos dos outros.
Suponha que exibamos informações sobre determinados usuários no console:
console.group('User Details'); console.log('name: John Doe'); console.log('job: Software Developer');
Aqui está a aparência dos resultados desse código.
Agrupando os resultados dos comandos de saída de dados no consoleAo usar o comando
console.group() , os grupos são, por padrão, exibidos em formato expandido. Para torná-los minimizados, você pode usar o comando
console.groupCollapsed() vez deste comando. Para visualizar o conteúdo desse grupo, você precisará expandi-lo usando o ícone localizado à esquerda do nome do grupo.
Console.warn () e console.error ()
Dependendo da situação, os comandos
console.warn() e
console.error() podem ser úteis para enfatizar a importância de algumas mensagens exibidas no console. Eles são usados, respectivamente, para exibir avisos e erros.
Avisos e errosTalvez o comando
console.info() , projetado para exibir mensagens informativas, também seja útil.
Ao personalizar a aparência das mensagens exibidas no console, você pode ir ainda mais longe estilizando-as. Você pode usar a diretiva
%c para estilizar o texto exibido no console. Isso pode ser útil, por exemplo, para organizar uma separação visual de informações provenientes de subsistemas para acessar determinadas APIs, de subsistemas responsáveis pelo processamento de eventos gerados pelo usuário e assim por diante. O principal aqui é desenvolver algumas regras de estilização e aderir a elas. Aqui está um exemplo de como personalizar a aparência da saída de dados no console:
console.log('%c Auth ', 'color: white; background-color: #2274A5', 'Login page rendered'); console.log('%c GraphQL ', 'color: white; background-color: #95B46A', 'Get user details'); console.log('%c Error ', 'color: white; background-color: #D33F49', 'Error getting user details');
Você também pode configurar outras propriedades CSS do texto, como
font-size e
font-style .
Estilo de saída de dados para o consoleComando Console.trace ()
O comando
console.trace() imprime os resultados do rastreamento de pilha no console e permite avaliar o que aconteceu em um ponto específico do programa durante sua execução. Por exemplo, existem alguns métodos que, em determinadas situações, precisam ser chamados apenas uma vez, digamos + métodos para remover informações do banco de dados. É possível verificar se
console.trace() realmente executa apenas uma única chamada para esse método. Este comando permite exibir informações no console que ajudam a verificar a operação correta dos mecanismos internos dos programas.
Comando console.time ()
Uma das tarefas importantes que o desenvolvedor front-end enfrenta é fornecer código de alta velocidade. O comando
console.time() permite medir o tempo de execução das operações e exibir o que você conseguiu descobrir no console. Por exemplo, usando este comando, examinamos alguns ciclos:
let i = 0; console.time("While loop"); while (i < 1000000) { i++; } console.timeEnd("While loop"); console.time("For loop"); for (i = 0; i < 1000000; i++) {
Veja o que entrou no console depois de executar este código.
Resultados do uso do console.time ()Sumário
Neste artigo, vimos algumas pequenas coisas úteis em relação à saída de dados no console do navegador. Se você não conhecia esses recursos antes, esperamos que agora você tenha novas ferramentas JavaScript úteis.
Caros leitores! Se você estiver desenvolvendo grandes projetos JavaScript, solicitamos que você nos informe sobre os meios pelos quais você resolve problemas de log neles.