S4xE4: Teaching Practice Byte: Coding Tutor
Episode Summary
Philip Guo, an Associate Professor of Cognitive Science at the University of California, San Diego, built Python Tutor, which is neither just for Python nor really a tutor. It’s actually a tool to visualize what code is doing! In today’s episode, he talks about the other programming languages it supports (Java, C, and C++), gives examples of how he uses it, and explains the nuances of when to use it.
You can also download this episode directly.
Episode Notes
You can find Philip’s coding tutor at https://pythontutor.com/
Transcript
[00:04] Kristin: Hello and welcome to the CS podcast, a podcast where we talk about teaching computer science with computer science educators. I am your host, Kristin Stephens-Martinez, an Assistant Professor of the Practice at Duke University. Joining me today is Philip Guo, Associate Professor of Cognitive Science at the University of California San Diego, Philip. Thank you so much for coming on the podcast.
[00:24] Philip: Well, thanks for having me. I’m really excited to talk to you. I’ve been listening to the podcast for a while, you know. Long-time listener. First-time speaker, I guess.
[00:31] Kristin: Awesome. So, today’s episode is a TPB, teaching practice byte, or in this case tool. In a single sentence, what would you say is your tool, Philip?
[00:43] Philip: So the thing I’m here to talk about is a tool called PythonTutor, which is a way to automatically visualize what code does, especially in introductory CS classes. And it works not just for Python but for languages like Java, C, and C++ as well.
[01:00] Kristin: Awesome. So let’s start out by saying, talking about where do you use PythonTutor? What classes? And, I guess normally I ask how many students but potentially that is kind of a moot question. But let’s see.
[01:13] Philip: Yeah. So the tool is really designed for, I would say, you know, CS0, CS1, CS2. So, basically, any introductory programming class where students are writing, you know, small self-contained snippets of code. So like, you know, implement a function to do X or write a class and write a test to call it. And you know, the way I’ve designed the tool covers a pretty wide spectrum of these. I would say like any problem that you would encounter in an introductory CS class, that is what I call self-contained, right? So something that is, you know, that can be completely described on the page and that also like fits on a page or like a slide of code, this tool will provide a way to visualize what is going on as the code runs one step at a time.
[02:04] Kristin: OK. So, I know we’re in an audio medium and this is a visual tool. But could you give us a general idea of what the student experience would be when they use the tool so that our audience gets a sense of like, would this be useful in their classroom? And where?
[02:20] Philip: Yeah, that’s a great, that’s a great great challenge. I’ll give you just a straightforward example and then we can talk about the different use cases both for instructor and student. So I will actually attempt to do this in audio. So imagine you’re in Python and you, you know, you have a piece of code that’s, you know, X equals, you know, left bracket, one comma two, comma three, right bracket, right? So you define X, it’s a list of 1, 2, 3 and then the second line is Y equals X, right? So just those two lines of code, if you ask beginners, what does that do? They could come up with all sorts of different answers depending on their mental model, what’s going on, especially in that second line. What is Y equals X do? It could do one of several things, right? It could make a whole entire copy of that list and then assign Y to that. It could also point X and Y to the same list. Or it could, you know, we’ve done, you know, people have done experiments on mental models and novices. You could imagine X is a variable, it has an arrow pointing to a list, and then Y is a variable that points to X which doesn’t seem to make sense if you know Python. But you know, people might think that. Or X and Y both might point to the same list. Or X and Y point to different lists that are both 1, 2, 3. And, and maybe in a language like C++, Y equals X might call a copy constructor and actually make a whole copy in languages like MATLAB or C++, it might make a copy. But in Python, what actually happens is that Y and X are now arrows to the same list, there’s only one list in memory. So, with a tool like Python tutor, you can see exactly that happening, you can see that a graphic representation of a, you know a name X with an arrow and there is a list object 1, 2, 3. And the second line there is a Y name and then has an arrow to the same 1, 2, 3.
[04:05] Philip: And most notably, you know, the way that you do this without PythonTutor is that you put print statements, right? You would put print statements or you would use a debugger. And if you print it out X and Y, they would both say bracket one, comma two, comma three, and you have no way of knowing, especially as a novice, that they are actually the exact same list. So, PythonTutor kind of solve tries to solve this problem by visually representing like what is going on in memory. So that’s kind of a, kind of an illustrative use case.
[04:35] Kristin: So for, for the actual experience that someone goes through because I’ve used PythonTutor actually for a long time. Is the first page you put it, you just paste in some code, and then you click on the visualize button. And then the next page, it shows you the code you have, and then it has on the other side, on the right the visualizations that you’re talking about, and they have a little like next button to see what’s going on. I’m just realizing that the prior TPB episode is about tangible physical objects to visualize code because it’s with it was Colleen Lewis. And so this is now the the visual representation without the physical objects to help students understand what’s going on. So, It’s almost like you have this transition from the first Teaching Practice Byte which is with physical objects. And now this time, I’m talking about it in terms of full visual representation on a screen which I find funny. So the thing that I’m wondering about is that it’s called PythonTutor. But one of the reasons why you’re on the podcast is that it uses other languages. So how is it potentially different if, instead, I wanted to visualize Java or C++ or something like that?
[05:50] Philip: Yeah, it’s a great question. There’s a running joke for many years now that the name was PythonTutor, but it’s actually not just for Python and it doesn’t actually tutor you. So, it should be called non-Python non-Tutor. Neither part of the name is actually accurate. But yeah, so, you know, back to Colleen’s episode, that’s, that’s great you had her on because you know, her physical memory models was actually a big inspiration for me to work on the Java side. So that actually it’s uncanny because we developed it independently. But actually, the visualizations for Java look basically exactly like her memory models, except I don’t have, you know, cute plushy, you know, stuffed animals. But exactly right. There are names or slots there are, you know, she uses strings or ropes, we use arrows, and they’re like actual objects that she has like actually, you know, dogs and tigers and cats and stuff, and we just have, you know, boxes and color diagrams and stuff. Yeah.
[06:46] Philip: So for other languages, the user experience is exactly the same. You paste in code, you write or paste in code, and it’s just a web editor. It’s just a website you can visit, you write code. When you hit visualize it, compiles it in the back end on a server. So for C, C++, Java it compiles it, and then it produces the runtime execution trace, and then it gives you the interface where you can step through execution. And it’s kind of cool. The cross-language aspect is kind of cool in my mind because it’s a unified representation. So, like one of the things I’ve always wanted to do, you know, in the future in my lack of free time, is to kind of do a more formal study of the, you know, people talk about learning different languages, right? You start with Python in CS1, and then in CS2 or software engineering, you learn Java. Or you go from Java to Python, or you go from C++ to Java. And I think the cool thing about using a tool like PythonTutor is that the front-end interface actually looks very similar. So, you can hopefully see analogs, right? So if you define an object or a program in Python and you define one in Java, the diagrams actually look quite alike because you have the concept of a class, you have the concept of an object, the concept of attributes or fields or methods or you know a this pointer or something. So yeah, so the user experience is largely the same for these different languages as well. And Java is something I’ve been working on a lot recently because, you know, it’s used in AP computer science in high schools, in high school curriculum, and also in intro CS curriculum. So I, I try to make sure that the diagrams really cover the scope of what teachers and students need to know in those classes.
[08:22] Kristin: OK. So we’re getting more into the like, where else could it work and where would it not work part of the episode. So, I think a question that I have is I’m thinking through the key differences between Python, Java, and C++. And so for Java, it has all of those libraries that is kind of like, the CS2 at Duke, one of the key things that we kind of focus on; like do you understand that, sure, you can use an array, but there’s an ArrayList, and it has all these features to it like. And sometimes you have to think through the trade-offs between using one data structure over another and that kind of thing. Can Python Tutor handle that? For Java? And then similar question but for C++ probably the biggest thing is that now you can have references. Like you have pointers and references. And you can have a reference to a variable suddenly, and like that can be very. It’s like, you know, pointers on steroids for C++. Does Python Tutor handle that, too?
[09:15] Philip: Yeah. So, on the Java front. Yeah. So, right now, it doesn’t do the collections classes. So it just does a built-in array, but like that’s definitely on the roadmap to show to actually be able to render, for example, an ArrayList, a LinkList, a HashMap, Set. You know, because conceptually, the diagrams have several kinds of there’s a list like object, there is a kind of a mapping, a dictionary in Python or a map interface in Java, and there’s a set interface, right? So yeah, on the road map, if we can visualize those in the near future, that would be awesome. On the C++ front, it does visualize references. A similar way to pointers. I guess it just annotates the type that says this is a, you know, it whatever ampersand, you know. So and it actually, you know, when you’re, you know, passing something by reference into a function, it will actually show that both of those that reference points to the original thing. So, that when you’re in the function, and you modify the variable through the reference, the original one will get modified as well. So, references are shown in C++, and also, you know, I think one of the big benefits of this tool for C and C++ is understanding pointers and references, right? Because indirection, you know, even pointers to pointers and you know, kind of allocating and freeing memory, and those are things that are, you know, quite core to teaching C and C++ and we do show that, which is cool.
[10:40] Kristin: So now I I’m curious, you said allocating and freeing memory. How is that shown in PythonTutor?
[10:46] Philip: So the memory model there is, it’s still a bit abstracted, right? So it’s not showing like literally all the bytes, right? It’s not like here’s like an array of memory that you allocate. So, it’s showing, you know, if you, if you, I tell you this audio, right? So if you have a line that says, you know, int star X equals malloc, you know, five size of int or whatever, when you run that line, what will happen is that it will show that X is a variable and it points to a block of memory that is on the heap and it’s actually five ints and they’re all question marks because when you do a malloc, it doesn’t actually fill in the memory with anything, they’re all uninitialized. So then the next line, if you start filling in stuff like, you know, X bracket three is a value, then only that one gets filled in. So it’s actually memory accurate in the sense of it will show what has been allocated and it will actually show what’s been initialized as well so that you don’t actually print out, you know, these garbage nonsense values, which you would if you had GDB, right? If you use a debugger and you try to look at it, it would print out uninitialized values for you, which is confusing potentially.
[11:53] Kristin: So does this mean that PythonTutor could potentially show a student when they have a runaway memory leak?
[12:02] Philip: Yeah. So, let’s see what happens in that case. Yeah, I mean, I think that what it does show is if you’re trampling over memory, you’re not supposed to. So, because it, it, it’s a faithful representation of the stack and the heap. It can actually show especially on the stack, right, like these sort of stack overflow or buffer overflow things. It will show that I think what happens on the heap is that because so basically, I don’t want to get into the weeds too much for this podcast, but it uses Valgrind, which is a memory safety detection tool. So Valgrind is a tool that allows you to basically track what memory has been allocated or initialized. So that the visualizer uses that. So what Valgrind does though is that if you go out of bounds, it actually issues an error. So it actually puts kind of a memory safety layer on top. So like, you can’t just keep going out of bounds because as soon as you are out of bounds, it will throw an except, and it will terminate the program. So, but the thing is on the stack and in the global you can trample over anything because that memory has always been allocated. So, you can actually come up with examples where you have a pointer to something on the stack and then you just start doing arithmetic and walking over it, and you’re just clobbering other values on the stack. And that’s, that’s what really happens if you have C and C++ code and it’s something we illustrate, which is cool.
[13:20] Kristin: Oh, I think that’s, I think that’s hilarious. I, I feel like there, there’s some security professor that could, like, take this as an example and tell their students like this is how we’re going to learn how to hack pointers.
[13:34] Philip: Yeah, I would, I mean, I think that would be an awesome use case. And in fact, again, I don’t want to super dive into the particular tool, but like I, I made a view recently that’s actually like a bit level view. So you can actually expand every byte of memory. You can see the ones and zeros, which is useful for if you want to show like low-level operations, or if you are teaching C, you can teach like bit masking, bit shifting. Also, different sizes of integers, right? So like you can show if you are signing an end to a short or something, it actually just truncates the higher whatever 16 bits, and you can just see literally the same number but like only the lower whatever bits are shown. So, all of that is in the tool because especially for C like, you want to show sometimes those low-level, low-level things.
[14:20] Kristin: Awesome. I think, I think that’s like it’s like an Easter egg. I wasn’t aware PythonTutor could do. But now I’m like, I, I this would never happen in my own class. I feel like I need to find a professor that like I, I want you to try and use this as a lesson in your class because I think it would be hilarious.
[14:35] Philip: Yeah, or you can ask them to try to break it too. You know, that I welcome that as well because, you know, that will help me to, you know, patch things up. You know, I shouldn’t have to do an open invitation to break things. But, you know, I want the tool to be robust and to be, you know, that’s part of the ethos of this tool is that it should quote unquote, just work, right? Like whatever code you throw at it, it should either work or I should give you an error saying OK, your code is too big, or it runs for too long time out. Such.
[15:00] Kristin: So, it’s good to always talk about what the tool can do, but let’s pause and also talk about what the tool can’t do. Like where would it not make sense to use that?
[15:10] Philip: That’s a great question. Like the way I describe it on the website, if your coder diagrams can’t fit on like a whiteboard or on like presentation slides, then it’s probably too big for PythonTutor. So, you know, people have been like, oh, wow. Can I just paste in, you know, 1000 lines of code? I’m trying to debug my actual software and use it. And that’s obviously no, because you know, the diagrams would get too out of hand. So yeah, I would just say the scope is, you know, any code that you want to fit on a presentation slide when you’re teaching or on the whiteboard when you’re drawing out, you know if you’re in a TA office hours and you’re trying to explain how something works. This tool is really, it really is about scope. Yeah, so anything, you know, if you’re in a software engineering class and you need to, you know, push in hundreds of lines of code and external libraries and everything that’s obviously going to be way out of scope for that. The other ways out of scope is that you need to access files or the network or anything that is not self-contained, right? If you need to read files from a bunch of databases or data files or, or go crawl the web or something like we run in a very sandbox environment where you can’t, you know, access anything externally.
[16:22] Kristin: So let’s be super concrete for a moment, and like, what is a literal way that you’ve used PythonTutor to help your students learn something? So you gave the example about pointers. But let’s, let’s try a different example.
[16:34] Philip: Yeah. One example that’s a classic one is like recursion, right? So if you’re teaching recursion, this idea of, you know, you’re potentially calling the same function a bunch of times with different parameters. You know, how is that represented, you know, like the factorial one, it’s like a boring example that everyone, you know, teaches first. You know, just the idea that you could call the same factorial function, you know, five times each time you call it’s a new stack frame. And the parameter is, you know, different, right? Five factorial, then four factorial, three factorial, two factorial, one factorial, and so forth. So with this tool, you can step through it and see at every step you’re calling other functions, you’re pushing another thing on the stack, and the parameter is different. And then when you, at the base case, you start rolling it back up again so that you start doing the products and the stack frame rolls up and then the product keeps on accumulating. Like that’s something that traditionally, instructors have just drawn on the board, right? You’re like, OK, I’m going to call five factorial, and then we’re going to have a new stack frame that four and then three, and then you kind of, you know, make marks, and you know, and, and do that. So that’s an example of something a tool really excels at just showing different function calls. So that’s something I’ve used.
[17:45] Kristin: So, what about future plans for the tool? Like, what are you thinking about?
[17:50] Philip: Yeah, that’s a great, great question. Future plans. You know, despite, despite me not wanting to jump on the generative AI LLM, you know, ChatGPT-hype, I have jumped on it. So, what I, I, the latest feature I’ve actually implemented is this, get AI help button which is sort of Clickbait because PythonTutor doesn’t actually have an LLM or anything built in. What it actually does is it actually pops the interface that helps you craft a prompt to paste into your favorite AI tool. So the idea is that, when you get click at a help, it will make a prompt for you that has a little preamble that says like, you know, I need an introductory programming student. I would like help on Python or whatever. And you know, please only use constructs that, you know, someone in intro class would know about, you know, don’t use complicated external libraries, kind of tuning the LLM to, to, you know, make beginner-friendly code and then it would paste in your code in the prompt. And then there is a set of preset questions you can ask like, you know, I think I have a bug in my code or like help explain, explain this what this piece of code does for me, or I don’t know, add some comments to this code to explain it and then you know, the student can write whatever prompt they want, right? But the idea is to basically generate a text prompt that they can go and paste into their favorite tool if they feel like they need assistance with that. So I think that there is a lot of potential in these AI tools and helping students understand in a more formative way, right?
[19:23] Kristin: So let’s go with too long, didn’t listen. Can you give me a rundown of your practice or in this case, your tool in three minutes or less?
[19:29] Philip: Wow, this is, this is time, pressure is on. Yeah. So what we talked about was this tool called PythonTutor, which you can visit and put a link on it. It’s just PythonTutor dot com, or if you Google or Bing for PythonTutor, it will be the first link, and it’s a web-based tool where you go to the website, you pick a language like Python, Java, C, C++, javascript and you paste in your code, or you write your code in an online editor, and you hit a visualized button, and it will actually run your code on a server and it will actually come back and show you step by step just like a debugger. Step by step, step one, step two, step three, exactly what is going on in memory at those steps and where your code is executing.
[20:10] Philip: And, this is a tool that can be used both by instructors to illustrate examples. So an instructor can use it in front of the class to demonstrate like live coding, or they can use it to make a video recording or a tutorial, or they can use screenshots from it to put in a textbook. So it can be used by instructors, which is one half of the puzzle. The other half is that it can be used directly by students to debug their homework assignment. So, I think by far, the largest user base are students. So they are, they, they are working on some code for a problem. They don’t know what’s going on. It’s giving some weird exception. They paste in their code in the tool and the tool, run the code for them, and show them. Oh, wow. You know, you’re getting an exception here because it’s a, you know, I don’t array out of bounds error, and they can actually just go back and forth and see, oh, it’s an array out of bound error because I’m using this variable and I’m counting I’m off by one or something so that they can revise their code and they revise their code, they run again and when they visualize and they see that the index is always in bounds now and great, they got rid of their error. So it can be used by both instructors to illustrate and also by students to, self debug. And it’s free to use, it’s online, and it’s yeah, and something I’ve worked on for, I think, around 13 years now because I feel old. Yes, I, I’ve supported this tool for quite a long time and, you know, used it in teaching and supported other structures in using it. I just love for your audience to try it out and let me know what they think.
[21:42] Kristin: Awesome. Well, thank you so much for joining us, Philip.
[21:46] Philip: Awesome. Yeah, it was a pleasure. It was really fun just to talk about both the tool itself and also just kind of implications for instructors and content design and everything else too. That’s cool.
[21:54] Kristin: And this was the CS podcast hosted by me, Kristin Stephens-Martinez and produced by Chris Martinez. If you’d like to help us stay ad, commercial, and sponsor-free consider supporting us on Patreon. Link is on our website. And remember teaching computer science is more than just knowing computer science. And I hope you found something useful for your teaching today.