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;
for (i = 0; i < 1000000000; i++) {
  // some code
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.


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!

javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Web Developer

Looking for an attractive & user-friendly web developer? HourlyDeveloper.io, a leading web, and mobile app development company, offers web developers for hire through flexible engagement models. You can **[Hire Web...

Why Web Development is Important for your Business

With the rapid development in technology, the old ways to do business have changed completely. A lot more advanced and developed ways are ...

Important Reasons to Hire a Professional Web Development Company

    You name the business and I will tell you how web development can help you promote your business. If it is a startup or you seeking some...

Hire Dedicated eCommerce Web Developers | Top eCommerce Web Designers

Build your eCommerce project by hiring our expert eCommerce Website developers. Our Dedicated Web Designers develop powerful & robust website in a short span of time.

How long does it take to develop/build an app?

This article covers A-Z about the mobile and web app development process and answers your question on how long does it take to develop/build an app.