É difícil imaginar o desenvolvimento em JS sem gerar informações para o console. Metaforicamente falando, console.log () é a cura para a maioria das doenças de código.

Depurar é quase como investigar um crime em que você também é o principal culpado - Filipe Fortes

Mas, além da função console.log () comumente usada, existem muitas outras ferramentas que podem simplificar bastante o processo. Vejamos alguns deles com exemplos simples.

console.log (), .info (), .debug (), .warn (), .error ()

O mais simples é imprimir a linha com uma cor correspondente ao tipo de evento.

Usamos espaços reservados

Para substituir dados em uma linha por uma mensagem, é mais conveniente usar espaços reservados.

% o - para o objeto
% s - para string
% d - para decimal ou inteiro

Adicionar CSS

Informação insuficiente / aviso / erro? Isso não importa! Você pode aplicar CSS às mensagens do console.

Deseja aplicar CSS a apenas parte da mensagem? Isso é feito assim:

console.dir ()

Geralmente, é muito mais conveniente imprimir uma representação JSON do objeto de interesse para nós.

Saída HTML

Os elementos HTML no console podem ser examinados da mesma maneira que no inspetor.

console.table ()

Deseja ver rapidamente os dados em uma lista do JSON?

console.group () e console.groupEnd ()

As mensagens no console podem ser agrupadas por conveniência.

console.count ()

Esta função registra quantas vezes foi chamada.

Se o rótulo do argumento opcional for passado, a função gravará o número de chamadas com o mesmo rótulo .

Se a função for chamada sem parâmetros, ela gravará o número de chamadas na mesma linha .

console.assert ()

É conveniente usar quando você deseja exibir informações por condição. Somente mensagens em que o primeiro argumento de assert () é falso serão impressas.

console.trace ()

Este método ajudará você a entender como o código atingiu um determinado ponto.

console.time ()

A maneira mais fácil de medir o tempo de execução de um pedaço de código.

console.memory

Deseja finalmente descobrir para onde foi toda a RAM livre?

console.clear ()

Use para começar com uma lousa limpa. Limpa completamente o console das mensagens anteriores.

// time and time end console.time("This"); let total = 0; for (let j = 0; j < 10000; j++) { total += j } console.log("Result", total); console.timeEnd("This"); // Memory console.memory // Assertion const errorMsg = 'Hey! The number is not even'; for (let number = 2; number <= 5; number += 1) { console.assert(number % 2 === 0, {number: number, errorMsg: errorMsg}); } // Count for (let i = 0; i < 11; i++) { console.count(); } // group & groupEnd console.group(); console.log('Test message'); console.group(); console.log('Another message'); console.log('Something else'); console.groupEnd(); console.groupEnd(); // Table const items = [ { name: "chair", inventory: 5, unitPrice: 45.99 }, { name: "table", inventory: 10, unitPrice: 123.75 }, { name: "sofa", inventory: 2, unitPrice: 399.50 } ]; console.table(items) // Clear console.clear() // HTML Element let element = document.getElementsByTagName("BODY")[0]; console.log(element) // Dir const userInfo = {"name":"John Miller", "id":2522, "theme":"dark"} console.dir(userInfo); // Color console.log('%cColor of the text is green plus small font size', 'color: green; font-size: x-small'); // pass object, variable const userDetails = {"name":"John Miller", "id":2522, "theme":"dark"} console.log("Hey %s, here is your details %o in form of object", "John", userDetails); // Default console.log('console.log'); console.info('console.info'); console.debug('console.debug'); console.warn('console.warn'); console.error('console.error');