Help! Something isn't working and I don't know why! : An introduction to console.log and ipdb

In my current software development program we began working in JavaScript and then later in React, and I often found myself struggling to understand why something wasn't working with my code. I would often code and code and then finally look at the browser and be beyond confused when my code didn't work how I thought it would. Or would, there were errors, and the browser wouldn't load at all!

That is when I remembered we had been introduced to a particular function to help us. That is:

console.log()

According to GeeksforGeeks, console.log() is defined as, "The console.log() is a function in JavaScript that is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user."[1]

Now what does that mean exactly?

The simplest way to understand console.log() is to think of it as a helper function, where anything you need to test can be printed to the console.

But what is the console?

The console is a something that can be accessed from most internet browsers and allows you as a developer to test JavaScript.[2]

In the console one can type and execute JavaScript code.[2] This allows one to test various functions and other aspects of their code. Additionally and more importantly for this blog, the console can print messages from the code that have been console.logged.

How does this help us? If we use console.log() as we code, we will be less likely to hit an error that we don't understand at all or make it too far while coding incorrectly.

Console.log() can be used as such:

console.log("Does this work?")

In this cause the console.log could be placed inside a larger block of code to check whether or not the code has run correctly.

Console.log() could also be used to log something that you don't know what it is. For example with an event listener, the console.log() function can be used as such:

console.log(e)

Here the console log will log the event object that comes from the event listener. Once you have access to that event object you can look at it and decide what to do next.

The true importance of console.log() come in the more you use it. Anytime you need to understand what is going on in your code in JavaScript it is a very helpful function to figure it out!

So that was all well and good for me while working in JavaScript. I learned to really appreciate and use console.log() a lot. But then we moved on to working on python. Without a browser, console.log() was gone.

With python, I could print things to the command line using the print() function. Quickly, I learned that print() can help.

For example, if I hit a print() statement, I know my code has at least gotten to that point. Additionally, without the browser print statements can be helpful to know what is going on. For example when running a seed file to seed a database, adding print statements along the way allows one to see what is going on, and a final message saying something like successfully seeded can help one to know that the database should now be seeded with the seed information.

But I still felt somewhat lost without console.log(). How could I know what variables, functions, and other items I have access to and how they are working?

In came ipdb. Unlike I originally jokingly thought, ipdb is NOT the internet potato database. No, instead ipdb is more similar to debugger in JavaScript in that it is actually a breakpoint in the code. But as I hadn't used debugger in JavaScript much, this reminded me more of console.log() in that it also shows one that they have made it to a specific point in the code and can allow one to inspect something.

Unlike console.log() ipdb is not automatically available. It must be imported as shown below:

import ipdb

Then in your code you can type ipdb.set_trace() at any point. This will stop your code, and push you into the ipdb session. Here you can test variables and functions.

Ipdb is certainly not exactly the same as console.log(), but it did help me a lot while feeling adrift in the beginning with python.

Now in my program, we are starting to work with full stack application, allowing me to use ipdb and console.log in the same project! This has allowed me to really see and appreciate the strengths and drawbacks of both, and I am happy to have both tools to help me with my coding!

(Cross posted on Medium at: Help! Something isn't working and I don't know why! : An introduction to console.log and ipdb).

[1] Author Unknown. “JavaScript console.log() Method.” GeeksforGeeks. https://www.geeksforgeeks.org/javascript-console-log-method/#article-meta-div (accessed August 10, 2023).

[2] Lisa Tagliaferri. "How To Use the JavaScript Developer Console." DigitalOcean. https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-developer-console (accessed August 10, 2023).