JavaScript Console – Life Saving Tricks

JavaScript Console – Life Saving Tricks

Are you still having those console.log lines to debug your code or to inform other devs for the use of your code?

If so, read on…

Designed Log Message
console.log('%cdesigned', 'css:rules; right:here');

designed console.log

Different Types Of Log Messages
  • log: We all know this one
  • Warn: eye-catching yellow exclamation message
  • info: looks similar to “log”
  • error: eye-catching red error message

** warn & error will add a counter to the console counters

console.log('some log message');
console.info('some info message');
console.warn('some warning message');
console.error('some error message');

types of console logs

Join Logs to a Group
  • group: start the group
  • groupCollapse: same as “group” but collapsed by default
  • groupEnd: close the above group
    console.group('groupName');
    console.log('some message');
    console.log('another message');
    //close the closes above group, ie: groupName
    console.groupEnd(); 
    

group console logsgroup console logs collapsed

Track Time With Console
console.time(eventName);
//some long process
console.timeEnd(eventName);

designed console.log

Leave a Reply

Your email address will not be published. Required fields are marked *