Data Visualization in Debugging

In this video Huiqi and I talk about the role of data visualization in debuggers.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : uh one thing i do want to say
00:03 : about our project is i
00:07 : i really think that a
00:11 : like visualization is so important
00:14 : in um in debugging
00:17 : like finding out what's going on
00:20 : um about your program uh
00:24 : for the even though like people don't
00:27 : think
00:27 : right now when people think debugging
00:29 : they don't think visualization
00:32 : at all because they just think it's like
00:34 : a very tedious process
00:36 : but but in reality when
00:40 : in reality when you're doing intense
00:42 : debugging work what you're doing is
00:46 : visualization visualizing in your head
00:49 : what's going on
00:51 : um so i think
00:55 : um like something like this like google
00:57 : earth
00:59 : is i think
01:02 : like visualizing code
01:06 : can probably learn from this kind of
01:09 : paradigm
01:10 : of zooming in zooming in and zooming out
01:13 : to more
01:14 : and more details and zooming back the
01:17 : point is
01:17 : you you need to have a
01:21 : solid understanding of the program
01:24 : both at a high level and at a low level
01:27 : as well
01:28 : and and you also need to be able to
01:30 : switch
01:32 : from high to low and from low to high
01:35 : very quickly in some cases
01:38 : um and i think this is like a
01:43 : very good analogy and like i think we
01:46 : should
01:46 : aim for something so a user interface
01:49 : like this or like the mandelbrot set
01:52 : is a similar thing but well would you
01:56 : see this as like say a tree but it's
02:00 : like
02:00 : all collapse right and then if you want
02:03 : to drill down to a branch
02:04 : you can expand that branch yeah normally
02:08 : you don't
02:08 : spend most of the branches yeah a tree
02:12 : is um one way of
02:16 : doing it yes but and and it
02:19 : i think is something we should offer
02:23 : or try but i don't know i don't think
02:26 : it's
02:26 : as powerful as this um
02:31 : well this is just a different vigil of a
02:34 : tree
02:35 : you will see it right i mean you can
02:37 : move around
02:38 : but it's still like a tree and then you
02:41 : can like focus
02:42 : one place at one time and just drill
02:46 : down
02:46 : i mean i i don't see this like totally
02:48 : different from a tree other than this is
02:50 : a different vigil
02:52 : yeah yeah
02:55 : if you think yeah when you say tree it
02:57 : could mean different things
02:58 : um i was thinking the
03:02 : the sort of collapsible tree uh which
03:05 : is yeah uh i mean yeah this is
03:09 : you can think of the google earth
03:11 : visualization as
03:12 : a tree where you're right zooming
03:15 : towards the leaves
03:16 : when you're zooming in uh and then back
03:19 : up
03:20 : and they they actually do represent it
03:22 : like that they they have
03:24 : the images in a a tree hierarchy
03:28 : um right they have like the high
03:31 : resolution image
03:32 : ordered in a tree
03:36 : so yeah so i mean and this is one way of
03:40 : visualizing but
03:41 : i think there are other ways of
03:43 : visualizing
03:44 : as well um so one example
03:48 : like i would like to talk about actually
03:51 : is
03:52 : um i i ran into a problem
03:55 : where in my javascript
03:59 : api server where
04:02 : it was running into this infinite
04:05 : recursion problem
04:06 : and then we had a stack overflow error
04:09 : and
04:10 : it took me a long time to get to the
04:13 : root problem
04:14 : but but i spend a lot of time on it
04:17 : because
04:18 : to me it was worth it i i think most
04:21 : developers would probably have
04:23 : like gave given up and went on to
04:25 : something else
04:27 : but i stuck with it anyway
04:30 : and the way i had
04:33 : like it was a slow process and basically
04:36 : what i did was i
04:37 : came up with i wrote some code
04:41 : in there to kind of to
04:46 : do a bunch of print statements uh and
04:49 : eventually
04:50 : what i ended up doing was generate a
04:52 : visualization
04:54 : kind of uh like using the print
04:57 : statements so it was like a recursive
04:59 : function called get objects deep
05:03 : and then it would receive some sort of
05:05 : parameter
05:06 : and every time get object steep gets
05:09 : called i would
05:10 : do a print statement and then print out
05:12 : the parameter which might be like
05:15 : i don't know some unique identifier
05:18 : and then okay and then and then i
05:22 : i will pass in a level number
05:25 : like this is a trick i use often i pass
05:28 : in a level number which
05:29 : like at the root level level would be
05:32 : zero
05:33 : and then it calls a child at one level
05:36 : and i would pass in level plus one to
05:39 : its childhood
05:40 : and then i use i use the level number
05:42 : for indentation
05:43 : of the log statements right so then i
05:46 : end up with
05:47 : you know something like this okay it it
05:52 : looks something like this right
05:53 : okay so your goal is to find out
05:58 : which place it just goes like it just
06:01 : never stop
06:03 : yeah so so what that end up happening
06:06 : eventually is you realize
06:09 : like one of one of these fringes um
06:13 : like sometimes it'll go back here right
06:17 : but but obviously if there's an infinite
06:20 : recursion situation
06:22 : then one of the branches will never
06:25 : come back to here
06:28 : indentation wise so one one of them just
06:31 : runs away
06:32 : right and but but also
06:36 : you can infer that um
06:40 : so something like this ended up
06:42 : happening and one of them is just
06:44 : gonna keep running away so you will
06:47 : never come back
06:48 : to this point basically once the runaway
06:50 : happens
06:51 : because it's an infinite recursion you
06:53 : never get back to
06:54 : this level of indentation anymore and
06:57 : then
06:58 : these numbers would be different so
07:02 : i'm just doing copy and paste so they're
07:03 : all the same but these numbers would be
07:05 : different so then
07:07 : so then just find the cycle the cycle is
07:10 : like at some point you
07:12 : are calling it with this id and then
07:14 : that id recurs
07:16 : somewhere down the tree uh-huh like
07:19 : like oh maybe over here the same id
07:21 : recurred
07:22 : and then we're back at the beginning of
07:24 : the cycle and then it's gonna
07:26 : try to do the same thing over and over
07:28 : again right
07:30 : uh so so eventually like it took a lot
07:33 : of
07:33 : sort of trial and error but eventually i
07:36 : got the log statement
07:37 : to print out a tree like that and after
07:40 : that i
07:41 : you know because it was still a pretty
07:44 : large tree
07:45 : the the cycle happened within maybe like
07:50 : 60 to 80 lines like
07:53 : after 60 to 80 lines there was a cycle
07:56 : okay and then and then i tracked down
08:01 : sort of the steps to realize where the
08:03 : cycle was
08:04 : and the cycle turned out to be due to
08:07 : um due to the closures it was the
08:11 : program
08:12 : that you worked on the parser
08:16 : okay it was due to the actually
08:19 : show you
08:22 : i think that's like very illustrative of
08:26 : the like some of some of the debugging
08:29 : problems that
08:30 : people run into that are difficult to
08:32 : diagnose
08:33 : and it's it's largely a problem of
08:36 : oh there's a there's a lot of things
08:38 : going on and you need
08:40 : a concise way to visualize the overall
08:43 : problem
08:44 : at the right level israel like you want
08:46 : to be at the
08:47 : right zoom level right to see that if
08:50 : you're going too deep
08:52 : then you don't see it you have to zoom
08:54 : back out a little bit
08:55 : you you have to be at the right zoom
08:57 : level to see what the problem is right
09:01 : um so that one
09:04 : oh it's kind of hard to find a level
09:06 : though i mean if you are not
09:09 : yeah yeah yeah you do
09:12 : it's kind of true uh i think i don't
09:15 : have a good answer to that
09:16 : i think other than to say
09:19 : i think if you can if you
09:23 : have access to a tool which
09:27 : i'm hoping we can develop a tool that
09:29 : people can use
09:30 : okay if you have access to a tool
09:33 : that can allow people to see things
09:37 : at different levels of
09:40 : elevation allow them to see things
09:44 : switch very quickly from level to level
09:47 : then they'll just try right until they
09:50 : see the thing that they need to see
09:54 : that's true yep maybe or maybe there's a
09:57 : more
09:58 : you know precise way for people to find
10:00 : out what level they need to be looking
10:02 : at
10:03 : um but it was basically like here
10:06 : when we called element then okay then
10:10 : remember i just implemented the thing
10:13 : that will
10:14 : display the three variables
10:18 : that um a closure was
10:21 : pointing to so yes when you call element
10:26 : what is actually happening is well
10:28 : element it actually comes from this
10:30 : sequence call
10:31 : and the sequence actually has
10:34 : is a closure which is pointing to these
10:37 : two free variables
10:39 : which uh came from here
10:42 : so right so i'm gonna when i'm
10:45 : displaying
10:46 : this result which what is the result
10:49 : result
10:49 : is a uh is this underscore sequence
10:53 : function
10:54 : and this underscore sequence function
10:56 : knows about these two
10:57 : variables and these two variables happen
11:00 : to be
11:01 : you know this array and this lambda
11:03 : function here
11:05 : and then it's like okay if i'm going to
11:08 : look at this array then i also
11:10 : going to look at this value and this
11:12 : value and this value and then the
11:14 : problem came
11:15 : when you came to this value what is the
11:17 : value a value is a choice which is also
11:19 : a closure function
11:21 : and it's looking at this guy and then
11:23 : what is this guy
11:24 : that's a lambda and it's looking it has
11:27 : two closure variables
11:28 : string and array and what our string and
11:31 : array uh array is this guy
11:34 : and then it looked at this thing and
11:36 : then
11:37 : oh that in turn looked at it this
11:40 : sequence is a closure that knows about
11:42 : this guy
11:43 : this sequence is another closure that
11:45 : knows about this guy
11:46 : and this guy knows about this guy what's
11:48 : elements element is a closure
11:51 : that looks at this guy oh we're back at
11:53 : the top this is an element
11:55 : and then we're back at here so that that
11:57 : closes the cycle
11:59 : right that's what happened but um
12:02 : but this is the like i i showed you the
12:05 : cycle
12:06 : at this level but when we were going
12:08 : through the code
12:10 : that it goes through that cycle but
12:12 : every step
12:13 : is at a slightly lower level than than
12:15 : the
12:16 : level of the code that we're looking at
12:19 : wait so it's because the cycle that
12:23 : caused like a recursion that never
12:26 : stopped
12:27 : yeah but i was i was um
12:30 : i had a plan of like using this
12:34 : this dictionary of visited flags okay
12:38 : pop the cycle but uh i made them
12:41 : i basically forgot to do that
12:44 : in one of the brands okay gotcha okay
12:48 : interesting well so what the
12:51 : yeah so i guess you know you did a lot
12:53 : of work on like how to improve the
12:55 : debugging
12:56 : uh experience when you have a lot of
12:58 : closure i think it's great
13:00 : yeah i think that is like i have always
13:02 : been like my
13:04 : um like my issue when i use like a
13:06 : normal debugger when there
13:08 : are closures especially like a lot of
13:10 : them i don't think i can have a great
13:12 : experience of knowing where i am yeah
13:15 : that's really helpful okay yeah i think
13:18 : so too like i haven't
13:20 : seen that let me show this
13:23 : so that in case there's people watching
13:25 : they know what you're talking about
13:27 : i think
13:33 : that can probably work okay so if we go
13:37 : here
13:44 : is it working
13:50 : well something might not be working
14:09 : okay if i jump to this line okay now
14:12 : it's working
14:13 : so this is what i was saying earlier
14:16 : like what what is
14:18 : result um
14:21 : oh we haven't stepped over that line yet
14:24 : oh it's actually no
14:25 : what is element i should say what is
14:27 : element uh
14:28 : well this is showing you that well
14:32 : there's a lot of data that's another
14:34 : issue that we
14:35 : need to solve perhaps with expand and
14:37 : collapse
14:38 : but um what's element element is the
14:42 : underscore sequence function uh
14:45 : which came from here
14:49 : right and it this is a closure and it
14:52 : has access to these two three variables
14:55 : parsers and converter
14:57 : and you can see their value
15:00 : and the parsers is an array of
15:03 : more functions which are in turn
15:05 : closures so it
15:07 : can get kind of crazy like the amount of
15:10 : information you're looking at but it's
15:13 : also and the amount of information we're
15:17 : looking at
15:17 : again is a problem that is hasn't been
15:21 : solved yet
15:22 : but if you look at a smaller example
15:25 : like this one you can see oh ws
15:28 : which stands for white space is a
15:31 : function
15:32 : of zero or more characters
15:36 : matching one of these and that you can
15:38 : actually like it gives you all the
15:40 : information
15:41 : right there right in front of you um the
15:44 : only
15:44 : problem is when all the information
15:46 : right in front of you is too much
15:49 : and then that's a problem of uh you know
15:52 : data visualization like what is the best
15:54 : data visualization
15:56 : for people when they're having to work
15:59 : with a lot of data
16:00 : and i think that's a something that
16:03 : i think is a
16:06 : is a very um like data visualization is
16:10 : a very important
16:12 : problem right now given that all these
16:15 : businesses are sort of logging
16:19 : so much data collecting too much data
16:23 : a lot of companies are trying to or
16:25 : either use ai
16:27 : i guess that's another possibility is ai
16:30 : to sort through the data
16:32 : to make sense of the data or use data
16:34 : visualization to make
16:35 : sense of the data yeah if you have an ai
16:38 : that
16:38 : can figure out okay this id
16:42 : is like uh showing up say again
16:45 : and then this is the bug or something
16:47 : like that
16:48 : well sure whether that's possible yeah
16:51 : yeah i think
16:52 : there's well there's the ideal is
16:55 : like human computer symbiosis
16:59 : which means you know you you
17:02 : you marry the pers human and the
17:05 : computer
17:06 : in the most perfect way
17:11 : and both of the beings are
17:15 : maximizing their ability and
17:18 : but that that means the communication
17:20 : between
17:21 : the human and the computer has to be
17:23 : very seamless
17:25 : wow and and like the person has to be
17:28 : extremely skilled
17:30 : at operating the computer and using
17:32 : whatever kind of user interface
17:34 : is there like the minority report movie
17:37 : have you seen that movie time cruise
17:42 : no okay he's you should watch that