DEV Community

Deanna Swallow
Deanna Swallow

Posted on

Debugging By Displaying Info

When I first started coding, I grossly underestimated the value of displaying information to the screen. I had the notion of "if it works, it works, and if it doesn't, it doesn't." Anyone who's been coding for a bit will probably laugh at that. I started with Python, and print became my best friend once I learned how to utilize it. I've since learned Visual Basic, C++, and JavaScript. With each of those, I made note quickly of how to display things.

Let's say you're just starting out, and you've got a simple for loop doing some math for you, but you're not getting the results you expected. You're probably wondering why, and how to find the problem. With production code, you want to be concise and efficient, but when you're learning, it's okay to be verbose. Do it. Look at the formula you're using, and put more variables in for testing purposes. Once you find the problem, you can edit your code to make it better (however you define "better").

In my recent attempt at solving Part 1, Day 1 of Advent of Code, I wasn't getting the sum as expected. I was keeping track of the running total(sum) in total (original, right?), so I started sticking console.log("current total is "+total); after every single line that did something. Hey, look at that! It's broken on line [whichever one it was]. I made adjustments, ran it again, got it right on the second try. I went back and took out all those console.log statements, and it was nice and readable again.

I'm also working on an AngularJS project right now, and I'm doing the same thing. More complicated concepts, and it can be hard sometimes to track what info is where at any given point in time. Since its base is JavaScript, I can still console.log a lot of things, but couldn't figure out how to stick it in at certain points. A mentor introduced me yesterday to the concept of breakpoints. Super helpful! I was having difficulty visualizing what $scope was holding at key points, and this solved it and let me see on my screen what it was and wasn't doing.

I cannot emphasize enough how helpful it is to literally see what your program is doing. Learn how to display things. It makes everything else you learn easier.

Top comments (4)

Collapse
 
aspittel profile image
Ali Spittel

Print statements are awesome for debugging! I would also try import pdb; pdb.set_trace()
in Python as well to set breakpoints! It will bring up a REPL at the point where you are having unexpected results so you can play around and work on fixing it!

Collapse
 
deannaswallow profile image
Deanna Swallow

Getting back to Python is on my to-do list. When I get there, I will absolutely do this! Thanks for the heads up!

Collapse
 
bradleyarvin profile image
Brad Arvin

First of all, congrats on writing literally infinitely mode articles about tech than me! Also when debugging JavaScript, you can use the “debugger” command. At least on chrome, if you have the code inspection open on your browser, it’ll let you debug the code. You should totally check it out.

Collapse
 
deannaswallow profile image
Deanna Swallow

See, every time I think I know all the fun stuff, someone shows me another great tool! Thank you so much!