Basic debugging method used in JavaScript by many front end developers out there is using console.log() in browser. Most of them use console.log only to output some text at any particular time in code. But, do you know that you can do a lot with just console.log. You can add styles using CSS to output text, perform substitutions and more.
So, first let us start with rewinding what all console.log() can do. It can perform following tasks like,
- Substitutions along with Formatting
- Output with styling using CSS
We would see one by one in detail.
Perform Substitutions using console.log()
To perform substitutions using console.log(), you need to pass two parameters. First parameter is the format specifier which starts with % symbol followed by a character which says whether we want to replace string, integer or object in console output. Let us see one by one.
1) String Substitutions using console.log()
To perform string substitutions, we need to use %s format specifier in console.log().
You could see that console.log() takes two parameters. First parameter has %s format specifier and it means that it should be replaced with the string specified as second parameters and the same is seen in console output.
If you have multiple strings to be replaced, then you need to specify that many %s format specifiers in first parameter and followed by strings to replace in the same order. The same is shown below,
2) Integer Substitutions using console.log()
To perform integer substitutions, we need to use %d or %i format specifier in console.log().
3) Floating Point value substitutions in console.log()
In previous example we have seen how to replace integer values and now we will see how to replace floating point value in console.log().
If you see here, %f is replaced with float value. This would be helpful if you want to see the Date object as below,
4) Substitute with an Object in console.log()
If you want to replace with an object, then we need to use %o as the format specifier.
It displays object in console and you can expand and see all of it's properties.
BONUS: Combine all format specifiers in one output
Till now we have seen each individual format specifier and understood how to replace string, integer, float value and objects. Let us combine all of them in one console.log().
These are different ways to perform substitutions using console.log(). Next we will see how to style using CSS within console.log() itself.
5) Styling Output Using CSS in console.log():
If you want to output a text with some styling, then we can do it using CSS in console.log(). For this we will use %c format specifier in first parameter. Here is the sample of what I am saying,
You need to make sure that there SHOULD NOT BE SPACE between %c and text followed by it.
Also you need to be aware that every text followed by %c will apply the same styling until it come across another %c with another styling.
Multiple styles can also be applied separated by semicolon for the same %c format specifier.
Above styling was called with single %c with multiple styling like color and font-size.
Instead of having inline CSS, we can create variables and have them assigned with styling which we want. Then use those variables in console.log() to get styles applied. This is shown below,
Here I created two variables success and failure with CSS styling and applied them in console.log(). So, it shows Green background for success and Red background for failure.
That’s Awesome. Isn’t it?
These are the different ways to use console.log() to debug JavaScript in browser. Apart from gaining knowledge, learning how to debug, it is fun too.
Let me know if you have any questions or suggestions in comments section.
Have fun in learning!
