How to Use console to Debugging in JavaScript

How to Use console to Debugging in JavaScript

Debugging of our JavaScript code, we use console.log object a lot.

Debugging of our JavaScript code, we use console.log object a lot. This helps us to determine and troubleshoot the issue on a web page in the browser. This console object can be used during the development process and also enables the developer to see the value of an expression in the specific page context. In general, it facilitates monitoring, writing, and evaluating in the browsers' developer tool (F12).

There are a few more important members of this Object and that can make our debugging a lot easier.

Tracing of the Operation/Step
  1. console.log() – this is used for logging any type of message in the console.

console.log() code with output
  1. console.warn() – it prints the message in the console as a warning with method information with a yellow warning sign.

console.warn() code with output
  1. console.info() – it prints the information in the console. It can be used interchangeably with console.log but the purpose of using console.info restricts the messages to be information type.

console.info() code with output
  1. console.error() –It prints the console message with a red icon and can be very easily identifiable.

console.error() code with output
  1. console.trace() – it provides the stack trace of the method where it is being called from.

console.trace() code with output
  1. console.count() – It gives the count of a specific method call.

console.count() code with output
Grouping of logs
  1. console.group() – This can be used to group similar logs. By default, it will be expanded. It can have nesting of other groups as well.

console.group() code with output
  1. console.groupEnd() –it marks the end of any group.

  2. console.groupcollapsed() –it is the same as console.group but it remains collapsed by default.

console.groupCollapsed() code with output
Display of logs
  1. console.clear() –if you don’t need previous logs and want to start over, Console.clear will clear the console and only subsequent logs will be written thereafter.

console.clear() code with output
  1. console.table() –This is a very useful way of viewing the data in tabular format. This table can be sorted by any column by clicking any header.

  2. Case a) If we are passing an array as parameter, then it shows the first column as the index.

console.table(array) code with output
  1. Case b) If the passed parameter is an object then we can have a custom column.

console.table(object) code with output
The execution time of operation
  1. console.time() –It marks the start of any operation. We can also use a label to make it identifiable among many times.

  2. console.timeEnd() – It marks the end of any operation and is printed with the used label.

console.time() code with output

There are a few more methods in console object but most of them are not standard and not supported by all the browsers.

This article was originally published on taagung and the complete code used in this article is available here for your practice.

<!DOCTYPE html>  
<html>  
<body>  
    <h1>JavaScript console Introduction</h1>  
    <script>          
        console.log("My New Log");  
        console.info("this is info log");  
        console.error("Error log");  
        console.warn("Warning log");  
        console.group("Parent Group");  
        console.groupCollapsed("My New Group");  
        console.log("Begininig of the group");  
        console.log("Log Number #1");  
        console.log("Log Number #2");  
        console.log("Log Number #3");  
        console.groupEnd();  
  
        console.log("Out of the Group now");  
        console.groupEnd();  
  
        console.clear();  
        console.table(["taagung", "C# Corner", "MSDN"]);  
  
        function Article(authorName, articleName) {  
            this.authorName = authorName;  
            this.articleName = articleName;  
        }  
        var author = {};  
  
        author.atul = new Article("Atul Sharma", "SOUND Programming Methodology");  
        author.tuba = new Article("Tuba Mansoor", "Angular Tutorial");  
        author.mahesh = new Article("Mahesh Chand", "C# Corner Plateform");  
  
        console.table(author);  
  
        myFirstMethod();  
          
  
        function myFirstMethod() {  
            mySecondMethod();  
        }  
  
        function mySecondMethod() {  
            myThirdMethod();  
              
        }  
  
        function myThirdMethod() {  
            console.trace();  
        }  
  
        TimeElapsed();  
        function TimeElapsed() {  
            console.time("PositiveForloopTime");  
            for (var i = 0; i < 100000; i++) {  
                  
            }  
            console.timeEnd("PositiveForloopTime");  
  
            console.time("NegativeForloopTime");  
            for (var i = 100000; i < 0; i--) {  
                  
            }  
            console.timeEnd("NegativeForloopTime");  
        }  
  
        CalledFunction();  
        CalledFunction();  
        CalledFunction();  
  
        function CalledFunction() {  
            console.count("Called Count");  
        }  
    </script>  
  
</body>  
</html>  

Thank you, hope this tutorial will surely help and you if you liked this tutorial, please consider sharing it with others

6 Tips for JavaScript Console Debugging

6 Tips for JavaScript Console Debugging

If you are a JavaScript developer, you have probably used console.log() a lot to debug your applications. In this post, lets look into some debugging tips, that will help you debug your application using the console.

If you are a JavaScript developer, you have probably used console.log() a lot to debug your applications. Did you know you could do more than just the plain console.log() logging. In this post, lets look into some debugging tips, that will help you debug your application using the console.

The Basics of Console Logging

Let’s get the basics of console debugging stated first. I am sure most of you must have used these, and incase you are new to JavaScript, here are some of the more common methods for console logging to help debug your application.

  • console.log – Logs a message or an object to the console.
  • console.info – Logs a message or an object to the console, which is informational.
  • console.warn – Logs the console log message as a warning, to indicate a potential problem.
  • console.error – Logs the console log message as an error, to indicate an error has occurred.
console.log(‘Hello World!’); 
console.info(‘Informational Logging’); 
console.warn(‘Warning to indicate something weird’); 
console.error(‘This is bad, here is the error’); 

The above list covers the common console logs that we see in many codebases. These are hugely helpful while debugging, an application, but that’s not all.

Beyond the Basics of Console Logging

To demonstrate all the examples, you can right click -> inspect, and open the console on any browser. And follow along and type the commands on the console to understand them better while reading this post.

Tip #1: console.table()

I only recently learned about the _console.table(), _and really wish I knew about this earlier for better debugging. Let’s define an object _myShoppingCart _below:

const myShoppingCart = [{
  id: "1",
  name: "Banana",
  price: 10,
},
{
  id: "2",
  name: "Apple",
  price: 20,
},
{
  id: "3",
  name: "Orange",
  price: 30,
}];

If I used the usual console.log() to log the myShoppingCart, the result will look like below:

Let’s say you have a huge object, and things would look cleaner and easier to debug if it were in the form of a table. Look nowhere else. You can use the console.table() to print your object in the form of a nice table to get a better view.

Isn’t this looking nice!

**Note: **One thing to keep in mind is that, _console.table() _can only handle upto 1000 rows.

Tip #2: console.assert()

You can use the console.assert() to perform conditional logging, without the use of an if-else condition. The syntax is **console.assert(condition, message). **When a condition passed is falsy, the assertion can be logged. See examples below to understand them better.

You can clear the console using console.clear(); command.

Tip #3: console.trace()

This is another useful console function. console.trace() is used to output a stack trace to the console. This is very useful, if you are stuck at a certain part of the code while debugging, and want to take a deeper look at the stack trace. This is very useful in ensuring that your code is behaving like it is supposed to and help you navigate through the stack trace.

Tip #4: console.count()

This is super useful, if you have the same piece of code running multiple times, and you want to keep a count of it for some reason. See example below to understand it’s usage.

Notice, that every time the same piece of code is executed_, _the console.count() returns the current count along.

Tip #5: console.memory

If you need a quick snapshot of your memory usage, you could use the console.memory property to get the JavaScript heap size information.

This is will come in handy if there is a performance leak that you suspect while the code is running, and get a quick snapshot of the memory usage on the console.

Tip #6: console.time()

The _console.time() _method starts a timer on the console.

var i;
console.time("test1");
for (i = 0; i < 1000000000; i++) {
  // some code
}
console.timeEnd("test1");
VM732:6 test1: 2624.0439453125ms

You can use it to track how long a piece of code takes to run. You can end the timer using the console.timEnd() method. You can pass label to these methods, to keep track of the console logging as shown in the example above.

Conclusion

That’s a wrap. You can play around with all the other console properties and function, by simply, right clicking on your browser and hitting inspect. You can then open the console tab and try these console logging functions that you just learned. Happy Console Logging!

Top 10 Tips for JavaScript Debugging with Console

Top 10 Tips for JavaScript Debugging with Console

If you are a JavaScript developer, you have probably used console.log() a lot to debug your applications. Did you know you could do more than just the plain console.log() logging. In this post, lets look top 10 JavaScript debugging tips, that will help you debug your application using the console.

I must admit it for the first time, and I’ll use this platform to clean up the skeletons from my development closet. Sometimes, the magic I do — which some call “coding” — is not as perfect as the outcome might appear to my colleagues when the magnificent results are shown to them. Yes, I said it - sometimes, I use the old trial and error we all call debugging :)

For the past decade, one of my passions is front-end development (especially javascript). As a craftsman, I love learning new tools of the trade. In this story, I’m going to give you some awesome tips for debugging like a pro, using the good old console.

Yes, we all know its basics:
console.log(‘Hello World!’); //log a message or an object to console
console.info(‘Something happened…’); //same as console log
console.warn(‘Something strange happened…’); //same as console log but outputs a warning
console.error(‘Something horrible happened…’); //same as console log but outputs an error

So hopefully now, I can give you some tips which you didn’t know before, and which will make you a PRO debugger.

Tip #1 console.trace()

If you want to know where the log is being prompted from use console.trace() to get the stack trace with the logged data.

Tip #2 console.time() && console.timeEnd()

If you are trying to find a sneaky performance issue, start counting time with console.time() and print with console.timeEnd().

Tip #3 console.memory

If your performance issue is even trickier, and you are looking for a sneaky memory leak, you might like to try and utilize console.memory (property, not a function) to check out your heap size status.

Tip #4 console.profile(‘profileName’) & console.profileEnd(‘profileName’)

This is not standard, but is widely supported. You can start and end a browser performance tool - performance profile from the code using console.profile(‘profileName’) and then console.profileEnd(‘profileName’). This will help you profile EXACTLY what you want, and prevents you from having to be mouse-click, timing dependent.

Tip #5 console.count(“STUFF I COUNT”)

In a case of recurring function or code, you can use console.count(‘?’) to keep count of how many times your code is read.

Tip #6 console.assert(false, “Log me!”)

Yes, conditional logging without wrapping your logs with if-else :)
You can use console.assert(condition, msg) to log something when the condition is falsy.
*disclaimer — in Node.js this will throw Assertion Error!

Tip #7 console.group(‘group’) & console.groupEnd(‘group’)

After writing so many logs, you might want to organize them. A small and useful tool for that is the console.group() & console.groupEnd(). Using console group, your console logs are grouped together, while each grouping creates another level in the hierarchy. Calling groupEnd reduces one.

Tip #8 String substitutions

When logging, you can incorporate variables using string substitutions. These references should be types (%s = string, %i = integer, %o = object, %f = float).

Tip #9 console.clear()

Well, having written so many logs, it’s now time to clear your console a little.

Tip #10 console.table()

Saving the best for last, this is a true gem in my opinion! You can actually print a very nice table with the objects you log using the console.table()

I really hope these tips make your debugging a bit more productive, and even a little fun!

JavaScript console is more than console.log()

JavaScript console is more than console.log()

Did you know about console.warn(), console.error(), console.dir() and console.table()?

Did you know about console.warn(), console.error(), console.dir() and console.table()?

One of JavaScript’s most straightforward approach to troubleshoot anything is to log stuff utilizing console.log. But the console provides many other methods that can help you debug better.

Let’s start with it. Logging a string or a lot of JavaScript objects is the very basic use case.

Just like this,

console.log('Where am I?');

Assume we have scenario when we have a lots of objects and need to log them into console.

const foo = { id: 1, height: '200px', width: '100px' };
const bar = { id: 2, height: '250px', width: '200px' };

Only console.log(variable) one after the other is the most intuitive way to log this. When we see how it appears on the console, the problem becomes more apparent.

Variable names are not visible

As you can see, variable names are not visible. Sometimes, it gets hard or annoying when you have lots of outputs and have to expand one by one each of them to understand which object or variable is it.

One solution to avoid this is to use console.log as this:

console.log({ foo, bar });

This also reduces the number of console.log lines in our code.

console.warn() & console.error()

Depending on the situation, you can add logs using console.warn() or console.error() to make sure that your console is more readable. In some browsers, console.info() also displays an ‘i’ icon.

console.error() and console.warn()

console.group()

This can be used when grouping or nesting together relevant details to enable you to read the logs easily.

This can also be used if you have a few log statements within a function and you want the scope of each statement to be clearly visible.

For example, if you log the details of a shopping cart:

console.group('Shopping Cart');
console.log('user: John Doe');
// Group Start
console.group('Shopping item');
console.log('Name: JS Book 1');
console.log('Author: Unknown author');
console.log('ISBN: 048665088X');
console.groupEnd();
// Group strat
console.group('Shopping item');
console.log('Name: JS Book 2');
console.log('Author: Unknown author');
console.log('ISBN: 048665087X');
console.groupEnd();
console.groupEnd();

console.table()

We can take this one step further by putting all these in a table together to make it more readable. Use console.table() every time you have objects with common properties or an array of objects. Console.table({foo, bar }) can be used here and the console displays:

console.table()

console.trace()

This will show you the call path taken to reach the point at which you call <a href="https://developer.mozilla.org/en-US/docs/Web/API/Console/trace" target="_blank">console.trace</a>()

console.time()

Starts a timer you can use to track how long an operation takes. You give each timer a unique name, and may have up to 10,000 timers running on a given page. When you call <a href="https://developer.mozilla.org/en-US/docs/Web/API/Console/timeEnd" target="_blank">console.timeEnd</a>() with the same name, the browser will output the time, in milliseconds, that elapsed since the timer was started.

console.time();
for (let i = 0; i < 100000; i++) {
  // some code
}
console.timeEnd();

console.time()

console.clear()

Clears the console. The Console’s contents will be replaced with an informational message like “Console was cleared”.

console.dir()

console.dir is the way to see all the properties of a specified JavaScript object in console by which the we can easily get the properties of the object.