javascript : Web APIs (console)

console

// console
//? .log(), .warn(), .error(), .dir()

// -log : general message
// -warn : warning message
// -error : error message
// -dir : Output an object whose properties can be viewed

console.log(document.body);
console.warn(document.body);
console.error(document.body);
console.dir(document.body);

//? .count(), .countReset()
// Prints or initializes the cumulative number of console method calls.

console.count('a'); // 1
console.count('a'); // 2
console.count('a'); // 3
console.countReset('a'); // 0
console.count('a'); // 1

//? .time(), .timeEnd()
// Displays the number of milliseconds between the start and the end of the timer to the console.
console.time('loop');
for (let i = 0; i < 10000; i += 1) {
  console.log(i);
}
console.timeEnd('loop'); // You can see how long it takes for certain logic in between to be processed.

//? .trace()
// Traces and prints the method call stack.

function a() {
  function b() {
    function c() {
      console.log('Log!');
      console.trace('Trace!');
    }
    c();
  }
  b();
}
a();

//? .clear()
// Delete all messages logged to the console.

console.clear();

//! Replace formatting characters
//? %s - apply as text
//? %o - apply to object
//? %c - Apply as CSS

const a = 'The brown fox';
const b = 3;
const c = {
  f: 'fox',
  d: 'dog',
};

console.log('%s jumps over the lazy dog %s times', a, b);
console.log('%o is Object', c);
console.log(
  '%cThe brown fox %cjumps over %cthe lazy dog',
  'color: brown; font-family: serif; font-size: 20px',
  '',
  'font-size: 18px; color: #fff; background-color: green;'
);