Tables - Formato tabela

console.table({
  'Time Stamp': new Date().getTime(),
  'OS': navigator['platform'],
  'Browser': navigator['appCodeName'],
  'Language': navigator['language'],
});

Groups - Seções e subseções

console.group('URL Info');
  console.log('Protocol', window.location.protocol);
  console.log('Host', window.origin);
  console.log('Path', window.location.pathname);
  console.groupCollapsed('Meta Info');
    console.log('Date Fetched', new Date().getTime());
    console.log('OS', navigator['platform']);
    console.log('Browser', navigator['appCodeName']);
    console.log('Language', navigator['language']);
  console.groupEnd();
console.groupEnd();

Styles

console.log(
  '%cHello World!',
  'color: #f709bb; font-family: sans-serif; text-decoration: underline;'
);

Times - Contar tempo

console.time("concatenation");
let output = "";
for (var i = 1; i <= 1e6; i++) {
  output += i;
}
console.timeEnd("concatenation");

concatenation: 1206ms - timer ended

// tambem tem
console.timeLog()   // imprime timelog
console.timeStamp() // Imprime TimeStamp

Asserts - Imprime se valor for false

const errorMsg = 'the # is not even';
for (let num = 2; num <= 5; num++) {
  console.log(`the # is ${num}`);
  console.assert(num % 2 === 0, { num }, errorMsg);
}

Counts - Contador

console.count() // contador iniciando em 1
console.reset() // reinicia o contador

Count por rótulo - String

Count por valor

console.count(NaN);         // NaN: 1
console.count(NaN+3);       // NaN: 2
console.count(1/0);         // Infinity: 1
console.count(String(1/0)); // Infinity: 2

Traces - Rastreia o código atraves do metodos

![](https://res.cloudinary.com/practicaldev/image/fetch/s--gI2JQF7_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/M1Bt2Jq/console-trace.png)

Directory - Estrutura um objeto

console.dirxml() // estrutura em xml

Debugs - Só aparece em desenvolvimento

// development
console.debug()  // aparece em desenvolvimento
console.log()    // aparece em desenvolvimento

// production
console.log()    // aparece em production

Log Levels

console.info()   // informacao
console.warn()   // warning - erros não criticos, nao afeta a funcionalidade
console.error()  // error   - erros     criticos

Multi-Values - Estrturar varias informações em um objeto

![](https://res.cloudinary.com/practicaldev/image/fetch/s--00a3YP1_--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://i.ibb.co/ynVWy52/console-deconstructing.png)

Log Strings

• %s - String or any other type converted to string
• %d / %i - Integer
• %f - Float
• %o - Use optimal formatting
• %O - Use default formatting
• %c - Use custom formatting

console.log("Hello %s, welcome to the year %d!", "Alicia", new Date().getFullYear());
// Hello Alicia, welcome to the year 2022!

Template Literals

const a = 5;
const b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);
// "Fifteen is 15 and
// not 20."

Clear

limpar console

Special Browser Methods

• $() - Short-hand for Document.querySelector() (to select DOM elements, jQuery-style!)
• $$() - Same as above, but for selectAll for when returning multiple elements in an array
• $_ - Returns value of last evaluated expression
• • Returns the most recently selected DOM element (in the inspector)
• ... can also be used to grab previously selected UI elements
• $x() - Lets you select DOM elements using an Xpath query
• keys() and values() - Shorthand for Object.getKeys(), will return an array of either obj keys or values
• copy() - Copies stuff to the clipboard
• monitorEvents() - Run command each time a given event is fireed
• For certain common console commands (like console.table()), you don't need to type the preceding console., just run table()
• https://developer.chrome.com/docs/devtools/console/utilities/

Documentação completa

MDN console Documentation Chrome Dev Console Docs.

Boas praticas

• Defina uma regra de lint para evitar que qualquer instrução console.log seja mesclada em sua ramificação principal
• Escreva uma função wrapper para lidar com o log, dessa forma você pode ativar/desativar logs de depuração com base no ambiente, bem como usar níveis de log apropriados e aplicar qualquer formatação. Isso também pode ser usado para integração com um serviço de registro de terceiros com atualizações de código necessárias apenas em um único local
• Nunca registre nenhuma informação confidencial, os logs do navegador podem ser capturados por qualquer extensão instalada, portanto não devem ser considerados seguros
• Sempre use os níveis de log corretos (como informações, aviso, erro) para facilitar a filtragem e a desativação
• Siga um formato consistente para que os registros possam ser analisados por uma máquina, se necessário
• Escreva mensagens de log curtas e significativas sempre em inglês
• Incluir o contexto ou categoria nos registros
• Não exagere, registre apenas informações úteis