Working in JavaScript? Then you’re very familiar with console.log()
. Like all javascript programmers, I frequently throw a console.log
into my code. And I really found it the simplest, faster, and a plain way to log something.
(() => {
// do stuff
let msg = 'Success!';
console.log(msg);
})();
Let’s see a few more ways in regards to console logging, that I found a bit more informative, and interesting in my day-to-day development workflow!
Technically console.debug()
console.info()
and console.log()
are identical - the only difference is that debug messages are hidden by default and log messages are visible in the recent versions of Chrome (to see debug messages, you have to set the log level to Verbose
in the Devtools).
(() => {
// do stuff
console.debug('console.debug()');
console.info('console.info()');
console.log('console.log()');
console.error('console.error()');
console.warn('console.warn()');
})();
console.debug
Pure black color text
console.info
Black color text with no icon
console.log
Black color text with no icon
console.error
Red Color text with icon
console.warn
Yellow color text with icon
When logging many variables, sometimes it’s difficult to understand what log corresponds to which variable.
For example, let’s try the code snippet in below:
const sum = (numOne, numTwo) => {
// do stuff
console.log(numOne);
return numOne + numTwo;
};
console.log(sum(2,3));
console.log(sum(5,8));
When the above code is executed, you’ll see just a series of numbers.
To make an association between the logged value and variable, wrap the variable into a pair of curly braces {numOne}
.
console.log({numOne});
Now in your console, you can see the associate variable name with the log.
#productivity #debugging #webdev #javascript #programming #console.log