Console

Console is an Object that provides access to browser’s console. Console Object has different method to display information in browser dev tool.

Logging
Tracing
Clearing
Asserting
Counting
Timing
Grouping
Formating
Styling

Logging

There are four different way to log a message to the console

log() is used to output a messages in console

  console.log('Welcome to devkode 🎉')

warn() is used to output warning messages in console

  console.warn('Lookout! ⚠️')

info() is used to output informative messages in console

  console.info('Just FYI 🙋‍♂️')

error() is used to output error messages in console

  console.error('Boom 💣')

Tracing

The console.trace() method print the stack trace which helps to understand the code execution flow, it will prints the call path taken to reach the point at which we call

  function a() {
    function b() {
        console.trace()
    }
    b();
  }
  a();

Clearing

The console.clear() method clear the console. It prints Console was cleared message after cleaning the previously consoled logs/data.

  console.clear()

Asserting

The console.assert() method is an easy way to run simple assertion tests If the 1st argument evaluates to false, and the subsequent arguments get printed to the console if the assertion fails

  // this will pass, nothing will be logged
  console.assert(2 == '2', '2 not == to "2"');

  // this fails, '3 not === to "3"' will be logged
  console.assert(3 === '3', '3 not === to "3"');

Counting

The console.count() method is used to count the number of times it has been invoked with the same provided label

  [1, 2, 3, 4, 5].forEach(nb => {
    if (nb % 2 === 0) {
      console.count('even');
    } else {
      console.count('odd');
    }
  });

Timing

The console.time() is used to track how long an operation takes

  console.time('For Loop');
  for (var i = 0; i < 10000; i++) {
    // code
  }
  console.timeEnd('For Loop');

Grouping

The console.group() and console.groupend() method is used for grouping or nesting of multiple consoles to make it more readable

  console.group('🖍️ colors');
  console.log('red');
  console.log('orange');
  console.group('HEX');
  console.log('#FF4C89');
  console.log('#7186FE');
  console.groupEnd();
  console.log('blue');
  console.groupEnd();

Formatting

The console object has some methods to prints out objects in a nice formatted way

The console.dir() displays an interactive list of the properties of the specified JavaScript object

  const fancyThings = {
    car: '🏎️ Ferrari',
    watch: '⌚ Cartier',
    clothing: {
      shoes: '👠 Christian Louboutin',
      dress: '👗 Versace'
    },
    boat: '🛥️ Sunseeker'
  }
console.dir(fancyThings);

The console.dirxml(), it prints out a DOM element’s markup

  console.dirxml(document.body);

The console.table() helps us to console objects in nice tabular format
The console.table() comes with inbuilt sorting. You can sort the table by a particular column by clicking on that column's label

  var mike = { id: 1, name: 'Mike', course: 'JavaScript' };
  var tom  = { id: 2, name: 'Tom', course: 'ES6' };
  console.table({mike,tom});

Styling

Let's make our console more interactive by adding colors into it To add styling in console, pre-pend %c to the message

  console.log('%cWelcome to devkode!', 'color:red; background-color:yellow');

Everything that comes after the first %c will be styled by the string provided by the second argument, then everything after the next %c is styled by the following string argument, and so on

  console.log("%cD%c %cE%c %cV%c %c KODE", 'font-size: 32px; line-height: 1.5; color: #fff;background-color: #EF7D00; padding: 4px 14px;','','font-size: 32px; line-height: 1.5; color: #fff;background-color: #EF7D00; padding: 4px 14px;','','font-size: 32px; line-height: 1.5; color: #fff;background-color: #EF7D00; padding: 4px 14px;','','font-size: 32px; line-height: 1.5; color: #fff;background-color: #bb1919; padding: 4px 20px 4px 0;')

gopal1996/console.md