Deep-Zoom Debugger Demo with Huiqi Zhou

I demo the deep-zoom debugger to my colleague Huiqi Zhou.

Transcript

The following transcript was automatically generated by an algorithm.

00:02 : relatively representable okay all right
00:07 : nice oh we're gonna get this infinite oh
00:13 : this is good enough all right so I
00:16 : wanted to show you what I've been
00:18 : working on um
00:20 : and I call it the deep zoom debugger it
00:24 : is to use to visualize the execution
00:28 : state of a program I have three
00:31 : different programs one is reverse a
00:34 : string one is Fibonacci sequence using
00:41 : recursion and then I also have Fibonacci
00:43 : sequence using a while loop the programs
00:47 : are written in a language I made code I
00:49 : call it the play programming language
00:53 : that's not super important like the
00:55 : programming language is very very basic
00:58 : it has very very limited feature set so
01:00 : it's not trying to be a cool programming
01:04 : language or anything the main thing I'm
01:08 : working on is this debugger concept and
01:13 : whenever you execute a program I'll show
01:17 : you how I execute a program so I go over
01:21 : to the play language project and I can
01:24 : say run this Fibonacci sequence
01:30 : recursion program and it will run it
01:33 : it'll show you the answer or whatever
01:36 : it's printout was if there was a
01:38 : printout it'll showed it to you in
01:40 : yellow and then the other messages are
01:43 : just telling you what the compiler did
01:45 : one of the things it does is it treats
01:48 : this history file which contain it
01:51 : contains a snapshot of the state of the
01:53 : program at every single step of the
01:55 : program yeah so it's right I actually
02:00 : have a debug I have a text-based
02:02 : debugger which can take
02:09 : can take the program and then step
02:12 : through it just like a normal debugger
02:15 : okay you see so the middle is the stack
02:19 : frame so so the main call it fit with
02:22 : seven and then fit with seven call it
02:25 : fit with six and so forth right so you
02:29 : can step forwards and backwards like you
02:31 : can with Python tutor so that's the they
02:35 : want that's a big piece of this but I
02:37 : made a visual debugger which can do this
02:41 : and this is the deep zoom debugger so
02:44 : you see this is like a Google View sort
02:47 : of concept is similar to the file
02:58 : browser the file file is very similar to
03:01 : that so but this is you're visualizing
03:05 : the execution of the program and the
03:09 : main function is always the entry point
03:12 : of the program in my language so you are
03:17 : always supposed to make a main function
03:19 : when you run the program it's going to
03:21 : call the main function so this is like
03:24 : it's not an actual line of code in your
03:26 : program but it's implied that some
03:29 : somebody is gonna call your main
03:31 : function you drill into it and then you
03:35 : get the source code of your of your main
03:38 : function it will show you the others
03:41 : line numbers over here you show you the
03:45 : intermediate steps that it's it's done
03:48 : and show you the intermediate values so
03:50 : it tells you oh this this evaluated fit
03:53 : with seven and the answer was 13 if you
03:57 : drill down then it can show you the
04:00 : execution of fit with argument seven and
04:05 : this is what it did it doesn't actually
04:07 : show you every line of source code it
04:09 : only shows you the lines of source code
04:11 : that were executed which is at first I
04:18 : thought that was weird but now I kind of
04:21 : like
04:22 : so we'll see I don't know exactly
04:24 : another option might be showed the other
04:27 : lines of code that were skipped but show
04:29 : them in a different color or something
04:31 : but but right now I just showed only the
04:34 : lines of code that were executed so you
04:37 : can see well it'll sort of show you the
04:41 : values in the relevant places what the
04:44 : values were at those points in time if
04:46 : you're there's a function call it will
04:48 : show you that both the input and the
04:50 : output of the function call if there's a
04:53 : return statement it'll show you the
04:55 : return value that the return statement
04:58 : returned if there's a if there's an
05:01 : assignment which there isn't right now
05:03 : but I could make one if I wanted to
05:05 : extract this as a variable I want to do
05:17 : that I can then rerun this program oh I
05:24 : just named it wrong okay I'll do that
05:30 : okay so it runs it it generates another
05:33 : history file and I'm going to because
05:36 : the debugger isn't a separate project
05:39 : right now I have to copy the stuff over
05:42 : so I'll copy both the history file over
05:45 : and the program over and then reload the
05:51 : debugger running the program generates
05:59 : two history yeah
06:01 : and now it shows you whenever there's a
06:04 : variable assignment will show you what
06:07 : value got assigned to it as a result of
06:10 : that assignment so that you see that
06:12 : right here paste right you have a new
06:18 : friend you you see everything yeah yeah
06:23 : you can think of this as a D you're
06:27 : zooming into a frame yeah you're zooming
06:30 : into a frame of a call stack yes
06:33 : assuming you can keep zooming we're
06:37 : we're at N equals five now and N equals
06:40 : 5 is gonna call fit for and fit 3 etc
06:42 : right so we can zoom in even more and
06:51 : finally you get to the base case where
06:53 : it just returns one that does the
06:59 : concept and it's is very different from
07:03 : normal debuggers I think because because
07:11 : this is very this is very V Joe
07:13 : especially for recursive because you can
07:16 : like drill into what's going on inside
07:19 : mm-hmm
07:20 : yeah this is visually making it's more
07:24 : more assessable people didn't like say I
07:28 : understand their recursion yeah yeah
07:31 : yeah yeah III think that's a good point
07:33 : it could be used as a teaching tool for
07:35 : recursion because it it really
07:39 : demonstrates what's happening input is
07:46 : the program and the history so the
07:50 : history will say hey which branch did I
07:53 : run the program mm-hmm I'll go through
07:59 : the history file with you but only
08:01 : before that I also want to show you like
08:04 : the Fibonacci sequence with implemented
08:08 : using a loop just for comparison yes
08:16 : exactly so it's gonna be quite different
08:20 : so I'm gonna change this to 5th loop
08:27 : okay drill down it still has a fit
08:31 : function but but now it looks like this
08:35 : so this is it this is a while loop and
08:39 : as you can see the body of the while
08:41 : loop just get pasted over and over again
08:45 : I was debating whether I like this or
08:51 : not because because the alternative
08:53 : would have been and this I got a lot of
08:56 : inspiration from Brett Victor's talk
08:59 : where he showed a demo like this kind of
09:03 : partially copied his thing so he showed
09:07 : the demo where you go through the lines
09:10 : and then on the side you show the values
09:13 : of the things as you as you're assigning
09:15 : values to them so I think this idea is
09:20 : very good for learners like it's it's
09:25 : it's a visual thing it there's no time
09:28 : component we've flattened out the time
09:30 : component you don't have to step to see
09:33 : the change in state right it's more like
09:36 : math you're solving a math problem and
09:40 : then this is just like scratch paper
09:42 : values that you're putting on the paper
09:45 : so you just read the thing from top to
09:48 : bottom you know like like like a photo
09:59 : gallery that you can click to the next
10:02 : and then go to the next and then you
10:03 : will see like the global variable top
10:06 : getting changed I don't know but this is
10:09 : culture this is more for obvious and you
10:12 : can see the whole thing
10:13 : yeah with what they're having to click
10:16 : I'm trying really hard to avoid having
10:19 : to click through to advance this date do
10:24 : you see what I mean cuz but but what
10:27 : what Brett Victor did was he actually he
10:30 : didn't have this repeating of the loop
10:33 : body he had one loop but then these as
10:36 : these values are changing
10:38 : the next iteration then he would have
10:42 : he'll have like the next equal three in
10:48 : the next iteration and one equal to
10:52 : etcetera so here have these lines and
10:56 : that he has a another bar and then he
11:00 : has more values and for the next
11:01 : iteration after that and so forth yeah
11:09 : divider is Israel like this but but my
11:13 : thought was well that can easily get
11:15 : very very long if your loop iterates
11:18 : many times you're gonna hurt and also
11:24 : once it goes so far then you don't see
11:27 : the lines of code over here anymore
11:29 : because you're like you're having to
11:31 : scroll all the way to the right
11:33 : to see these values I'm not unless you
11:35 : make these like sticky to the value I
11:39 : guess you could do that and maybe you
11:44 : can look there's no strew but some I I
11:53 : kind of really trying to hang on to the
11:57 : idea that this is this is almost like
12:01 : I'm trying to make an analogy to a
12:05 : physical piece of paper that's
12:08 : infinitely large so I don't want there
12:13 : to be an interaction in order to advance
12:16 : the time I want it to be just you can
12:19 : see everything right in front of you
12:21 : and all you're doing is looking closer
12:24 : and looking farther away but but you
12:28 : know this is still design phase things
12:30 : can we could still change this like
12:32 : they're a open to different ideas so
12:36 : yeah so you're saying like have like a
12:39 : have like a button here to event to
12:46 : advance the body to the next iteration
12:49 : of the loop and then all these values
12:51 : are going
12:51 : change when you click time because the
12:59 : we we talk about like the concept of
13:01 : it's like frames but we don't say like
13:05 : the time of the friends like there's not
13:08 : like a timing difference but this is
13:11 : like obviously a time issue or a time
13:15 : well we do this should be extended to
13:19 : time because when we're dealing with you
13:23 : eyes you're gonna have user events right
13:28 : and those happen in time so oh this is
13:33 : also takes a lot of inspiration from the
13:36 : the chrome dev tools CPU profiler which
13:40 : which we use a lot recently right so
13:44 : it's got its got this it's got this
13:48 : screenshot timeline at the top right
13:51 : it's got this screenshot timeline here
13:54 : and then and then down here it's got a
13:58 : flame graph and each each vertical slice
14:01 : of the frame graph kind of represents a
14:04 : point in execution time of the program
14:07 : and then for each point in execution
14:10 : time there's a corresponding screenshot
14:13 : the you can see what the screen looks
14:17 : like at that point in time and I want to
14:20 : eventually implement that as well but I
14:23 : wondered it the timeline to be vertical
14:25 : instead of horizontal because I want to
14:28 : actually show the lines of code whereas
14:31 : that tool doesn't so how do you
14:40 : represent the friend though you're like
14:42 : oh currently I'm inside this frame well
14:45 : yeah yeah so then if you I think that
14:48 : still works because because if you're
14:53 : looking at here I could have a timeline
14:56 : whoops I could have a timeline next to
14:59 : well I guess there wouldn't be anything
15:01 : here but so this just be a timeline
15:04 : here right and the the we can think of
15:10 : this section as subdivided in time the
15:21 : devtool profile were like sideways yeah
15:25 : okay kind of but but then there's
15:27 : there's weird things I think I'll have
15:30 : to deal with some because if I want the
15:34 : time to be divided up evenly it's
15:37 : actually a pretty big challenge to do
15:39 : that and and I'm not sure whether I
15:42 : should do that or not like if I want to
15:44 : say this is 10 milliseconds per tick
15:48 : well it it might be difficult to achieve
15:51 : that because because some some of the
15:54 : lines take longer than other lines to
15:57 : execute right it could be a sync but
16:02 : regardless of whether it's a sync
16:05 : like maybe line number six or maybe not
16:09 : even different different executions of
16:11 : line number six can have a different
16:13 : time value so this might be like 20
16:16 : milliseconds and then this might be 15
16:19 : milliseconds that this this line yes you
16:37 : can I'm just saying if I were trying to
16:40 : respect the evenness of the ticks then
16:45 : like this would need to be a box that's
16:48 : 20 times higher taught are taller than
16:52 : this one that's true
17:01 : I could I'm just curious that that might
17:04 : look kind of weird though but but maybe
17:06 : that's an option that can be turned on
17:08 : and off because because if this guy is
17:12 : 20 times taller than this guy you may
17:15 : not be able to see this line at all
17:18 : that's also done here you're only seeing
17:21 : so you like seeing oh that and then like
17:25 : that and I'm seeing that right that this
17:29 : one is too thin for you to read the text
17:31 : and maybe if you're if you're trying to
17:35 : work on the performance that's what you
17:38 : want but if not then maybe that's not
17:39 : what you want