Unstuck Episode 2: See Code Run

This is episode 2 of Unstuck - the show for code learners. In this one, I respond to a viewer comment, then walk through using Python Tutor to visualize your code while it is running, then I show you how to visualize your code on your own - without the help of a software tool. Enjoy!

One of the things that make learning to code is harder is that it is hard to visualize a process - what a program looks like while it is running. You can look at the code - and it will help, but it's not the same thing. Not being able to see the process is like trying to fix a car without being able to open up the hood - it's not impossible - this is what Click and Clack the Car Talk guys do all the time, but they are experts, and even they have mixed success. If you really want to understand how programs work, and more specifically how your program works, or doesn't, you want to be able to see it in action. Luckily, there are tools that help you do this.

Python Tutor

Python Tutor is one such visualization tool. Despite the name, it actually supports several programming languages, including Python, Java, JavaScript, TypeScript, Ruby, C, C++. Let's try it! I am going to "start writing and visualizing code now!"

This tool runs directly in the browser, so there's nothing to download. I could choose from these languages, but I will stick with Python. I am going to write a program to calculate the average of an array of scores.

In the video, I walk through the following code line by line:

scores = [6, 5, 7, 8, 10]
sum = 0
for score in scores:
  sum = sum + score
average = sum / len(scores)
print "Average score is %d" % average

A really cool feature of Python Tutor is that a shared session mode which allows multiple people to visualize the same code at the same time. As you can imagine, this is really useful for mentoring.

Do It By Hand

So python tutor is a great way to get a deeper understanding of how your code actually works, and it's so easy to use! Almost too easy. Remember what I said about easy? Easy is not necessarily good. For learning, difficult is better. So, I am going to show you an exercise for you to practice visualizing the process of a program, in a more effortful way - and that is to draw it yourself!

So I have a program which finds the highest number in a list of numbers and prints it out, and in the video I execute this program line by line by hand using pen and paper.

scores = [6, 5, 7]
highest = 0
for score in scores:
  if highest < score:
    highest = score
print "Highest score is %d" % highest

Okay, so when you do everything by hand, you may make mistakes, so it's a good idea to check your answer at the end by running the program or using something like Python Tutor.

Python Tutor is great, but it is only meant for small, self-contained programs. It's a good thing that there's another tool that will help you visualize programs - the debugger. In future episodes I will deep dive into using the debugger.

Like Python Tutor, the debugger allows you to step through a program line by line, and inspect the current values of variables. I will cover using the debugger on the next episode.


You homework is to write a simple program - between 5 to 15 lines long, and then execute that program by hand on pen and paper. Then, execute that same program using python tutor. Please post your work in the comments! Take a picture of your handwriting!

blog comments powered by Disqus