TzookB

JavaScript Console – Life Saving Tricks

Tue Feb 27 2018

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 {#designedlogmessage}
console.log('%cdesigned', 'css:rules; right:here');

![designed console.log][1]

Different Types Of Log Messages {#differenttypesoflogmessages}
  • 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][2]

Join Logs to a Group {#joinlogstoagroup}
  • 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 logs][3]![group console logs collapsed][4]

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

![designed console.log][5]