Maneiras de formatar a saída do console em JavaScript

Os desenvolvedores de JavaScript estão familiarizados com a humilde função console. log (). Embora o registro do console possa parecer simples, há muito mais informações disponíveis no objeto console. Vejamos como você pode aprimorar suas mensagens de registro com formatação avançada.

O básico

Vamos recapitular as funções de console mais usadas:

• console. log (dados, ... args) – Registra dados no console. Quaisquer outros argumentos passados ​​também serão emitidos na mesma linha.
• console. info (data, ... args) – Equivalente a console. log (), mas normalmente com formatação enfatizada – O Chrome, por exemplo, adiciona um fundo azul e uma informação “ i ” ícone.
• console. error (dados ... args) – O mesmo que console. log (), exceto que a saída é direcionada para o fluxo stderr (erro). A maioria dos navegadores formata automaticamente a saída com um fundo vermelho para indicar que ocorreu um erro.
• console. warn (data, ... args) – O mesmo que console. error (), exceto que um fundo amarelo é normalmente aplicado para indicar o status de aviso menos grave.

Especificadores de formato

Os desenvolvedores geralmente passam apenas um único argumento para os comandos acima. No entanto, todos eles aceitam vários argumentos, que são automaticamente concatenados na saída final.

Você também pode usar argumentos com especificadores de formato compatível com printf definidos por uma string em dados:

const value = 10; const available = " available & quot ;; console. log & # 40; " Existem% d opções & quot ;, valor, disponível & # 41 ;; // Logs " Existem 10 opções disponíveis "

Os especificadores de formato disponíveis são os seguintes:

• % s – Formate como string.
• % i – Formate como um número inteiro.
• % f – Formate como um valor de ponto flutuante.
• % O – Formate como um objeto JavaScript.
• % o – Formate como um elemento DOM.
• % c – Formate como uma regra CSS, que é aplicada à linha de registro emitida.

O suporte para os dois últimos varia de acordo com o mecanismo JavaScript. Eles estão disponíveis em navegadores modernos, mas não necessariamente em outros contextos de execução.

Adicionando imagens

Usando o especificador de formato CSS, é possível incluir imagens na saída do console! Isso funciona em navegadores, mas não terá suporte em ambientes CLI como Node. js.

const css = & # 91; " background-image: url (https://example. com) ", " background-size: cover ", " height: 100px ", " padding: 15px " ;, " largura: 100px " & # 93 ;; console. log & # 40; "% cEu sou uma imagem! & quot ;, css. join & # 40; & quot ;; " & # 41; & # 41 ;;

Nós sequestramos CSS &’ regra de imagem de fundo para renderizar a imagem. Embora possa parecer despreocupado, pode haver casos de uso práticos se a depuração envolver o trabalho com imagens. Você pode verificar as imagens que estão sendo recuperadas sem realmente emiti-las para a página.

Saída tabulada

JavaScript inclui suporte integrado para a emissão de dados tabulados para o console. Use console. table () com um array de objetos uniformes. Os cabeçalhos das colunas serão determinados automaticamente, com base nas propriedades comuns a cada objeto.

objetos const = & # 91; & # 123; a: 1, x: " a " & # 125;, & # 123; a: 2, x: " b " & # 125; & # 93 ;; console. table & # 40; objetos & # 41 ;;

Isso pode ser extremamente útil quando você está trabalhando com objetos em massa. Em vez de ter que iterar um array e chamar console. log () com cada item, apenas use console. table () e se beneficie da saída formatada automaticamente.

Saída condicional

Você pode usar a função console. assert () para condicionar a saída ao valor de uma expressão. Isso reduz o código que você precisa escrever em comparação com a introdução de um console. log () com uma instrução if.

Sua mensagem só será registrada se a expressão for avaliada como falsa. Uma expressão avaliada como verdadeira resultará em nada sendo emitido.

console. assert & # 40; true, " Eu nunca apareço " & # 41 ;;   console. assert & # 40; false, " Serei registrado " & # 41 ;;

A função console. assert () não afeta o tempo de execução. Nenhum erro será lançado se a declaração falhar; sua expressão é usada unicamente para determinar se deve ser feito logon no console.

Grupos de mensagens

Você pode agrupar visualmente seções de saída junto com console. group (). Isso aplicará um recuo automático às linhas subsequentes usando um número predefinido de espaços.

Para fechar o grupo, chame console. groupEnd (). Isso restaura o recuo anterior.

Você pode chamar console. group () várias vezes antes de console. groupEnd () para criar uma saída profundamente aninhada. console. groupEnd () reverte o recuo passo a passo, então você &’ precisará corresponder ao número de chamadas group () e groupEnd () antes de voltar ao nível padrão.

Contadores

Use console. count (rótulo) para criar um contador interno com um determinado nome:

console. count & # 40; " meu-contador " & # 41 ;; // meu-contador: 1 console. count & # 40; " meu-contador " & # 41 ;; // meu-contador: 2

Isso fornece uma maneira direta de emitir valores incrementais. Você não precisa especificar um nome – o contador padrão será usado automaticamente. Você pode redefinir os contadores para 0 usando console. countReset (rótulo).

Temporizadores

O console possui suporte integrado para o tempo de operação. O tempo decorrido é medido em milissegundos e emitido em segundos (por exemplo, “ 1.234s ”); não há garantia de alta precisão.

console. time & # 40; & # 41 ;; // ... algum tempo depois ... console. timeEnd & # 40; & # 41 ;; // Emite o tempo decorrido (" 1.234s ")

Os temporizadores suportam rótulos opcionais da mesma forma que os contadores. Isso permite que você gerencie vários timers simultaneamente ao cronometrar diferentes aspectos do seu código.

Métodos de utilidade

O objeto console inclui vários métodos utilitários que ajudam a gerenciar sua saída.

• console. clear () – Limpa o console de todas as saídas visíveis. Os efeitos irão variar de acordo com o ambiente de execução.
• console. dir (obj, options) – Emite uma lista de todos os pares de propriedade / valor enumeráveis ​​do objeto obj. Você pode personalizar a profundidade de recursão usando a propriedade de profundidade do objeto de opções.
• console. trace () – Emite um rastreamento de pilha para o ponto atual em seu código, permitindo a depuração direta do caminho de execução seguido.

Existem outros métodos não padronizados que dependem do mecanismo. Um exemplo é console. profile (), que está amplamente disponível, mas com implementações diferentes. Em navegadores, geralmente invoca perfis de alta precisão para ajudá-lo a diagnosticar problemas de desempenho.

Conclusão

Há muito mais no console do JavaScript do que o console. log () básico! Dedicar um tempo para aprender as funções disponíveis pode acelerar drasticamente a depuração, principalmente ao trabalhar com objetos complexos ou saída rápida.

Os recursos disponíveis dependem do mecanismo JavaScript com o qual você está trabalhando. Geralmente, você obterá o estilo mais avançado de um navegador atualizado, embora o Node. js também suporte a maioria das técnicas que descrevemos aqui.