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 {#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]