“A problem well stated is a problem half solved.” --John Dewey
I am going to help you here write the magical code which will never have any 🐞.
Hehe! ok, I am kidding there is no one in this heavenly earth who can teach you to code without bugs.
But there are some ways we can reduce our time to debug and help us understand the 🐞 and source of it.
I hope you are guys are still with me, if you are good, let's get started -
Our first approach to test or debug our code is to log it to the console.
But do you know there are different console methods that we can use to differentiate between our logs?
🔸 The most commonly used console method is
console.log() which prints anything passed to it as arguments on the console
🔸 Multiple arguments can be passed.
🔸 It can be strings, variables, objects, functions, or HTML elements.
🔸 It is used to make conditional log statements on the console.
🔸 It prints the message (passed as the second argument) if the expression (passed as the first argument) is false.
🔸 If the assertion is true nothing is printed on the console.
🔸 It prints a warning message onto the console.
🔸 The message would be highlighted with yellow color.
🔸 It gives us the call stack for the warning log as well which helps to trace the warning in the call stack.
🔸 Just like the
console.warn() it prints the error message on the console.
🔸 The message is highlighted with red color.
🔸 We get the error call stack for easy debugging.
🔸 It prints the number of times the count method has been called for the argument passed to it.
🔸 If no argument is passed to it, it counts for the
🔸 Argument can only be a string.
🔸 It prints arrays and objects into tabular form.
🔸 It needs to have an array or an object as the mandatory argument.
🔸 First column is labeled as
🔸 For arrays, the first column is the indices of the elements
& for objects, its keys.
console.time(label) starts the timer to track the time taken by a task.
console.timeEnd(label) stops the timer for that label and prints the total time taken since it started.
label argument has to be the same and once we call
console.timeEnd(label) the timer is removed from the stack.
🔸 It logs the time elapsed since the timer had started after running the
🔸 Needs to have the same
label argument as the
console.group() groups the logs with an indentation
console.groupEnd() closes the group started before.
🔸 can be used to batch errors and warnings together or print similar information together.
🔸 It shows a complete call stack when debugging from the point it is called.
🔸 It can very handy when debugging a complex code with multiple files and modules.
🔸 When the console gets too cluttered, you can use
console.clear() method to clear the console.
You can print log statements with your own custom styles. There are a bunch of
string substitutions that you can use to manipulate the log statement.
But it does work only with console methods that accept strings as arguments.
Check how using
%c with our string in
console.log() changes the output of the log statements.
Alright! that's the end of today's post. I hope you guys liked it and maybe you would start using the above console methods in proper use-cases instead of using just
console.log() for all your debugging.
“If your only tool is a hammer then every problem looks like a nail.”
-- Abraham Maslow
If you are someone who is interested in Frontend development and wants to know more about it, consider following me 👇
Feedbacks, good or bad are appreciated 🧡
Until next time, keep coding, keep learning and KEEP DEBUGGING. 😁