Questions Developers Ask When Debugging

In this episode, I share a status update on the time-traveling debugger project and then Huiqi and I do a brainstorming session on possible visualizations for debuggers.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : uh so last time we talked about this
00:02 : data
00:03 : storage scheme uh that i want to change
00:06 : the video storage scheme to make it
00:08 : take up less disk space um and i also
00:12 : have a faster
00:13 : rebuild time i'm in the process of doing
00:16 : that i'm
00:19 : a little bit of the way in doing that
00:22 : so far so far um
00:26 : i'm not getting great savings
00:31 : from what i see but uh
00:34 : uh i don't know i still wanna i think
00:37 : the problem is
00:38 : okay i'll show you a little bit of what
00:41 : the files look like
00:48 : okay so there's a value table
00:51 : previously there was an object table
00:55 : but now there's a value table and then
00:57 : there's a member table
00:59 : member table is for storing entries
01:03 : of a dictionary or or entries of an
01:07 : array those are called members
01:10 : and they point they point to the
01:12 : container object which is an id to a
01:14 : value
01:16 : and there's a key and the key is also
01:19 : pointing to
01:20 : an entry in the value and then the value
01:22 : is also pointing to an entry in the
01:24 : value uh
01:26 : and then there's a version the state
01:28 : version number
01:29 : and whether it's been deleted so if you
01:31 : want to delete an
01:32 : entry you have to put another entry in
01:35 : here and say it's deleted
01:37 : but i actually haven't implemented that
01:39 : yet and the value is all the values of
01:41 : the system
01:42 : as strings can go in here but numbers
01:44 : can go in here as well
01:46 : okay so that's a string that's a number
01:50 : so far it only works with very simple
01:53 : programs
01:56 : such as the fibonacci i also had marty
02:00 : wright i've been teaching marty
02:03 : recursion
02:05 : and he wrote this one
02:08 : it is pretty good it calculated the
02:11 : greatest common
02:12 : divisor of two numbers using this
02:16 : recursive algorithm
02:17 : this is the nice euclid's algorithm
02:20 : for for gcd um but
02:23 : so the you can run the debugger for
02:26 : something like this so
02:27 : um it's the same python
02:30 : that i'm using i haven't changed the log
02:32 : format
02:33 : so the the version of python doesn't
02:35 : have to change
02:36 : it's just a recreation script that
02:39 : changed
02:40 : so if i okay if i
02:44 : run it it still spits out the same type
02:47 : of log file but i have a
02:49 : new recreate script called recreate2
02:55 : and i give it the same log file as
02:57 : before and it generates a
03:00 : database and and it looks like the one
03:03 : you're looking at right now
03:04 : um uh okay so
03:09 : so that's the sort of the update on that
03:12 : oh value table only store primitive
03:16 : value
03:17 : or what if yes yes only store primitive
03:20 : value if it's a composite data structure
03:22 : like
03:22 : dict and list then you have to use the
03:25 : member table
03:26 : to add entries to the object
03:29 : uh okay god sure i see
03:33 : yeah so exactly the values are only
03:36 : primitive data
03:37 : or it could be like just uh if there's a
03:40 : dictionary there is still going to be a
03:42 : row in the value table
03:44 : that represents that dictionary just
03:47 : just for the members to link to it
03:49 : but the data won't actually be in there
03:52 : gotcha i see
03:54 : um although even that could potentially
03:58 : be eliminated but
03:59 : i thought still put it in there
04:03 : if you have the members in there that
04:05 : implies the existence of the container
04:08 : i don't know but it seems a little weird
04:11 : that there's
04:12 : some values that are in not in the value
04:16 : table
04:16 : you know
04:20 : so in terms of disk space
04:24 : i just want to show that so i did the
04:27 : gcd okay
04:28 : so this is the log file that was
04:31 : generated
04:32 : when i run the program it's three
04:35 : kilobytes um and the generated
04:39 : file by my new recreate
04:43 : process is 45 kilobytes
04:46 : is that substantially more than the log
04:48 : file which was disappointing
04:51 : and it's also more than the previous
04:53 : version
04:54 : okay that's also the same
04:58 : for what will be more why could it be
05:01 : more i can
05:02 : theorize i think it's that the amount of
05:05 : amount of uh sort of um
05:09 : amount of data that
05:13 : like i have this type data
05:16 : that that's kind of duplicated like a
05:18 : one
05:19 : means integer for example
05:22 : um and i also have these id data
05:25 : that we are gonna need to put
05:28 : this is more disk usage up front
05:33 : uh with with the promise of in the long
05:36 : run
05:37 : it'll get better if you if you have lot
05:40 : even more data so that's a case of the
05:43 : fibonacci one
05:44 : where the old one took 1.1 megabytes
05:49 : but the new one took 94 kilobytes
05:52 : uh that's only a little bit better but
05:55 : um
05:56 : i don't know okay so that's where
06:00 : we are but we i haven't tested it on
06:04 : lar really some of the program i have
06:07 : i was testing yet so
06:10 : i'll just keep working on this until
06:13 : it's
06:13 : in shape to test those
06:17 : larger programs and then i'll
06:20 : i'll think about what to do next uh so
06:23 : this scheme okay i'm not
06:27 : seeing immediate gains but maybe we'll
06:30 : see
06:30 : well maybe we'll see again for very
06:33 : large programs
06:34 : i'm not sure but in any case there's a
06:36 : this is an
06:37 : experimental approach so we're just
06:39 : going to try it and see what happens
06:41 : another thing i was thinking about is
06:43 : visualizations so
06:45 : last week we talked about visualizations
06:48 : and that got me thinking
06:52 : uh like how can i get ideas about
06:55 : visualization so i went to the
06:57 : d3js website and looked at all their
07:00 : examples
07:02 : okay um
07:06 : and another thing i did was i i
07:09 : asked some questions about like
07:14 : actually i would like to do this
07:16 : brainstorming with you
07:17 : about what kind of visualizations
07:21 : could potentially be good but uh
07:24 : so so we're going to do that so
07:26 : basically i look through all of these
07:28 : all the examples they had like oh look
07:32 : at these tree ones they look
07:33 : really cool okay
07:37 : like whoa that looks that looks cool
07:41 : um there's some that look really cool
07:46 : this is a sunburst graph
07:51 : i think this is called the nightingale
07:53 : chart if i'm not mistaken
07:56 : uh okay um but
07:59 : actually one that i decided to use
08:03 : is pretty ordinary like
08:06 : i decided to try this one
08:09 : which is very ordinary um
08:12 : so remember last week remember last week
08:15 : you said like when i was
08:16 : zooming into google earth you said this
08:18 : is just a tree structure
08:20 : right yes so
08:23 : so i decided to try that i saw this and
08:26 : i connected to what you were saying i
08:29 : decided to
08:30 : try the tree structure basically
08:34 : the zoom visualization that i did before
08:37 : i did the same thing
08:39 : except that it's a tree now okay
08:43 : so i run the program and then i i
08:46 : use the new recreator
08:49 : to recreate the database and
08:55 : i wrote this c code uh script
09:03 : okay so so this is this calculates the
09:06 : fibonacci of number of 10
09:09 : and and you can see what it does
09:13 : in this tree form
09:18 : so you can kind of see i
09:21 : showed this to my son and i
09:24 : i actually just taught him about
09:26 : recursion and using the fibonacci as the
09:29 : example
09:29 : so he knows what's going on here um and
09:32 : i can show him
09:35 : well if you if you do this that's the
09:37 : naive recursive way this is what's going
09:40 : to happen
09:41 : and you can see it's actually doing a
09:43 : ton of work um
09:46 : and if you dig into it you can see where
09:48 : the duplicate work is happening
09:51 : like for example for example like
09:54 : why am i doing this fib 4 and then 4
09:57 : 3 2 1 here and then i have
10:00 : 4 3 2 1 again over here and then i have
10:04 : four three two one like that's a ton of
10:06 : duplicate work here
10:07 : right like four three two one
10:11 : i have three two one here i'm doing four
10:15 : three two one here
10:16 : again four three two one here again and
10:19 : and another thing he saw was like okay
10:21 : this is this takes
10:23 : 343 steps to do this program
10:27 : he he called it lines of code he called
10:30 : it like
10:31 : 443 lines of code which is not what we
10:34 : think of as
10:35 : lines of code but in this visualization
10:38 : it is
10:38 : lines of code it was the lines of code
10:41 : that was
10:42 : executed um and then i showed him
10:46 : yeah and i showed him with the table
10:48 : basically
10:49 : dynamic programming right right we just
10:51 : memorized
10:52 : oh yeah yeah so if we so i show them
10:56 : what would happen
10:57 : if i use a table to memorize the values
11:00 : and this is what you would see
11:06 : this is what you will see and first of
11:08 : all he sees that oh there's
11:09 : 92 lines of code instead of 400
11:13 : something
11:14 : instead of 400 and and then
11:17 : and then you can see the the sort of
11:19 : this
11:20 : structure the shape of the thing the
11:22 : coastline
11:24 : is different and it it it goes indents
11:28 : all the way to the end and then it
11:31 : it gradually comes back down and
11:35 : uh and obviously there's less stuff
11:38 : less work to do because of the
11:41 : and there's not there's no duplicate
11:44 : work anymore and you can see the
11:46 : returning from the table happening in
11:49 : these places
11:51 : right um so yeah so
11:54 : i actually think this is pretty cool
11:57 : result
11:58 : um uh does this then there's the loop
12:01 : version also obviously
12:04 : the when you do fibonacci you have to do
12:07 : the loop version also
12:08 : so if you try to what do you call
12:12 : this is this is the loop version yeah
12:22 : hello uh you're you're muted oh i'm back
12:25 : well i i was lost
12:28 : well because of the ins that okay so
12:32 : no worries what were you gonna ask
12:36 : oh oh what was the line
12:40 : lines of code what was that like the
12:43 : stack frame or like what exactly
12:46 : that oh what's that it's the number of
12:49 : snapshots
12:50 : we have in the database
12:53 : which which corresponds to
12:57 : conceptually actually it can correspond
13:00 : to
13:02 : the number of instructions that were
13:05 : performed by the computer
13:07 : um but it's not exactly that because
13:11 : you can have some lines of code
13:14 : that have multiple and cause multiple
13:17 : instructions to occur
13:19 : on the same line so
13:22 : so basically it's the number of lines
13:25 : in your python program that were
13:28 : executed
13:29 : in total okay
13:32 : oh that makes sense in in python tutor
13:34 : they call that step
13:36 : how many steps okay
13:39 : that makes sense yeah so so it's a it's
13:42 : a rough
13:43 : rough uh equivalent to
13:47 : the amount of work your program had to
13:49 : do
13:51 : gotcha which is i think it's very
13:53 : helpful
13:54 : for like cs classes
13:57 : right where when you're talking about
13:59 : algorithm complexity
14:02 : right because then you can just look at
14:04 : this number at the bottom to see
14:06 : how much work the com the the program
14:08 : had to do
14:09 : but they just have the time complexity
14:12 : it doesn't have the space complexity
14:14 : right because you can use the space
14:18 : to memorize this stuff but that doesn't
14:20 : show yeah yeah
14:23 : in a way though in a way
14:26 : um this you you can see
14:30 : the space complexity um
14:33 : that is used by the stack because that's
14:37 : how far to the right the the text
14:40 : grows okay like
14:43 : the more stacks you use the more to
14:46 : indent it to the right it goes so you
14:50 : can sort of
14:50 : visually see how much stack space you
14:53 : use
14:54 : but then there's other than stacks like
14:57 : like this one it doesn't use any stack
15:00 : space at all
15:01 : it's just a loop so it uses less memory
15:05 : than this one does but of course other
15:07 : than stack space
15:08 : there's still dynamic object space and
15:11 : that's
15:12 : that uses memory also um so
15:15 : that's kind of the open question for me
15:17 : like that's
15:18 : a question i really want to tackle is
15:23 : [Music]
15:24 : first of all like what what do you think
15:25 : about this visualization here
15:29 : well i like it well if we can
15:33 : perhaps that's even better but i like i
15:35 : think it's very helpful
15:37 : for example with this we can have the
15:39 : information of
15:40 : okay this program does some repetitive
15:44 : stuff
15:44 : so we can actually see see the big
15:46 : picture
15:47 : but i mean i like it uh i like i like i
15:51 : like how simple
15:52 : that is oh well if it can be collapsed
15:54 : that's even better but
15:56 : yeah yeah yeah i mean yeah making it
15:58 : collapsible
15:59 : definitely doable yeah we can do that
16:03 : and
16:04 : you you worked on some code that does
16:06 : that so yeah we can probably use that
16:09 : um what is going on with my terminal
16:13 : here
16:13 : it's kind of going crazy um
16:18 : that's all right um so
16:22 : the thing i would like to do is some
16:25 : brainstorming around with you
16:28 : um so perhaps what we do is i'm gonna
16:32 : make a
16:33 : google doc so there's a couple ways i
16:36 : think we can try to
16:38 : come up with ideas on how to do
16:41 : visualization
16:42 : um one one way is just look through
16:46 : all of these examples of data
16:48 : visualization on the d3
16:50 : website okay and if you if you know of
16:54 : other
16:55 : libraries that do maybe like high charts
16:58 : or something
17:00 : uh or or maybe other
17:05 : that's a visualization okay so anything
17:09 : sometimes just by looking at something
17:11 : you get an idea
17:12 : um another way is
17:16 : we can ask uh so the question i want to
17:20 : ask you now is like what what are the
17:22 : most
17:23 : common questions that developers ask
17:26 : when they're debugging a program
17:30 : okay
17:35 : okay give me some ideas we're just gonna
17:38 : write some
17:39 : sort of examples
17:43 : uh common questions like how many times
17:46 : is this lie
17:47 : executed yeah well or
17:52 : yeah that's a good question how many
17:54 : times was this
17:56 : what's the what is the what is the
17:59 : what is the value what is the actual of
18:02 : a variable
18:03 : when this line gets executed
18:09 : yeah on this line
18:12 : yeah yeah um
18:16 : yeah what was this variable null
18:19 : [Laughter]
18:21 : is that similar to what is the value of
18:23 : this variable
18:24 : like was what who who calls
18:28 : this function like what is the parent
18:30 : yeah stack
18:31 : that calls yeah who who call
18:34 : who called this function who called this
18:38 : function
18:39 : right uh yeah exactly that's a very
18:42 : or what how how did how did this
18:45 : data get there get it here
18:50 : how did this data get here when
18:53 : was this object mutated
18:58 : when yeah was this object
19:01 : irritated oh it at a
19:05 : at work i was debugging a problem with
19:08 : johnny like it took us hours
19:12 : to well to debug up various problems so
19:15 : one of them was like we had this
19:17 : constant called the empty
19:20 : object or something it was more than
19:23 : just the empty object it was like the
19:26 : you know a dictionary with some children
19:29 : but each of the children were empty
19:31 : objects right it is a collection of
19:33 : dictionaries
19:34 : right it was the empty version of
19:38 : what it means to be empty for that
19:40 : situation
19:42 : and it it it was the constant because it
19:45 : was
19:47 : we were planning to use it for whenever
19:51 : you know we wanted an empty version of
19:53 : the object
19:54 : and then we were going to do a reduce
19:56 : over it to calculate the value starting
19:58 : from that as the mt value
20:00 : right okay so what happened was we
20:04 : the reduced function that tried to you
20:06 : know
20:07 : accumulate values into it actually
20:09 : mutated the empty object
20:11 : the mt so then the second time
20:15 : the empty object actually had values and
20:18 : then
20:20 : yeah that happens that happens yeah i i
20:23 : i did that
20:24 : in in my debugger too one time i
20:27 : did that exactly exact same thing
20:30 : yeah uh okay so what what other
20:33 : questions
20:35 : would a developer ask um
20:38 : [Music]
20:40 : what other questions um
20:44 : sometimes they just want to examine an
20:47 : object that is very deep
20:49 : it's like how deep is this object how
20:52 : how does like like say if it's an object
20:55 : with a lot of items they just want to
20:57 : see
20:58 : maybe one of the items like the first
21:01 : one or the one with that value or
21:03 : something like that
21:04 : just want to look at a big object
21:08 : okay what what does this what's
21:12 : what's in this object yeah what's inside
21:15 : this object
21:20 : um what one
21:24 : like the the more difficult books
21:27 : or or or things that developers
21:30 : sometimes
21:31 : diagnoses like um
21:34 : performance and memory leaks
21:38 : right so when when they're dealing with
21:40 : that but the performance is
21:42 : like uh is is this function slow
21:49 : it is the sort of most
21:52 : uh most lazy way of asking that is this
21:55 : function slow or
21:56 : or maybe what function is slow
22:01 : and why is it slow what what why
22:04 : why is how why
22:08 : is it slow or where is yeah why is it
22:10 : slow
22:12 : uh what what part what part maybe
22:15 : why which part
22:20 : why is it so um
22:24 : and also when they
22:27 : like asynchronous situation it's like
22:30 : when this function
22:31 : is executing or doing some async stuff
22:34 : what are the other stuff that's
22:35 : happening at the same time
22:38 : um okay
22:41 : what what other things
22:44 : are happening while
22:49 : this is happening yeah is it or like
22:53 : is there a race condition right
23:01 : oh whether we are oh are we
23:05 : or another way to ask the is there a
23:09 : race condition question is like this
23:13 : did uh did that
23:16 : happen before this
23:20 : yeah did that happen before this or
23:24 : which one
23:24 : happened first which one happened
23:28 : first okay the infinite loop
23:31 : what about the infinite loop
23:36 : like are we in an infinite loop oh do we
23:39 : how do we get oh like when
23:42 : when the program just freezes okay do we
23:45 : have
23:47 : an infinite loop okay
23:51 : yep yeah sometimes you don't know like
23:55 : the program freezes sometimes it could
23:57 : be it's freezing
23:58 : just because some part is really slow
24:03 : um do we have an
24:06 : infinite loop that's an interesting i
24:08 : don't have a
24:10 : i don't see a obvious answer to that
24:15 : um
24:20 : somewhat worried about because it's
24:21 : going to generate
24:23 : so much log
24:24 : [Laughter]
24:27 : so we'll see um
24:31 : okay let's start with these so for each
24:33 : one of
24:34 : these try to come up with a visual
24:38 : that could help uh
24:42 : help answer that question how many times
24:45 : was this line
24:46 : executed uh how would you
24:50 : make a visual to to answer that question
24:56 : uh so this is like lie related can
24:59 : you like hover over the line number
25:04 : and then you will get some like
25:10 : little pop-up saying this lie was
25:15 : executed five times
25:18 : in my log yeah or just you can even do
25:21 : it
25:22 : just in the gutter of the line
25:25 : just show a number there yeah however
25:29 : or show the number
25:36 : yep how many times was this
25:39 : who called this function okay well in
25:42 : this case
25:43 : in the fibonacci uh program that you
25:46 : wrote
25:47 : say the fib equal to three or whatever
25:51 : it's going to have like saying
25:54 : oh it's executed by like 10 times
25:58 : or whatever and then you're like oh
26:01 : maybe that
26:02 : that is what the problem is something
26:04 : like that
26:07 : oh yeah yeah yeah it is it'll say
26:12 : it's it's it's the not the number you
26:14 : expected
26:15 : right uh my terminal is
26:20 : completely dead okay i can't get it to
26:22 : work do i have a different
26:25 : terminal do i have x term or something
26:28 : well my computer is really going crazy
26:30 : right now
26:31 : okay i'm just gonna ignore that um
26:35 : what was the value of this variable on
26:37 : this line
26:38 : uh that's how over power over the value
26:42 : the variable is see the value
26:47 : well that needs to be done with a
26:49 : stopping point right
26:50 : because if this lie is executed multiple
26:54 : times then that's actually the thing
26:58 : that i want to challenge
26:59 : um because
27:03 : one thing i unfortunately i can't show
27:06 : you that visual that tree visual again
27:09 : but one thing to realize about that
27:12 : visual
27:12 : is that that's a timeline
27:16 : okay right it's uh the first
27:20 : line of that visual is what happened
27:23 : at time number one and the second time
27:26 : and the last line is what happened at
27:29 : you know time the last time stem
27:32 : so that's actually a timeline um and
27:36 : which means that the the user interface
27:40 : does not have to be we step
27:44 : line by line through through
27:47 : the program state there's no
27:51 : there's no single stepping anymore
27:54 : um because what we've done is
27:59 : it's we map time to space
28:02 : we map time to a timeline which is
28:05 : just one dimension on the screen right
28:09 : okay and and i think that's actually a
28:12 : very powerful concept
28:14 : that we can use to
28:18 : i think like that visual
28:21 : of the tree there's no user interface to
28:26 : it
28:26 : and yet it has everything you need
28:29 : to debug that fibonacci program
28:34 : so you there's no need to
28:37 : interact with the thing other than
28:40 : scrolling
28:41 : and being able to see if you just
28:43 : printed that out on paper
28:46 : and the paper was big enough to have all
28:49 : the text on it
28:50 : then just looking at that is enough to
28:52 : debug a program
28:54 : right well that is true
28:57 : but i guess the question we're trying to
28:59 : resolve is when
29:00 : there's too much information how can we
29:03 : make a human
29:05 : like try to find out what exactly is the
29:09 : is he interested in a huge amount of
29:12 : information
29:13 : yes yes but but i think even
29:16 : i think there might be a way to do it
29:20 : with with a timeline based
29:23 : visualization um so so if we try to map
29:27 : this question to some sort of timeline
29:30 : based
29:31 : visualization that could just be yeah
29:33 : you can hover over
29:35 : um a variable to see the value that
29:38 : still works here because
29:42 : on a single line in this visualization
29:46 : that that's actually one point in time
29:51 : so there's no there's actually no
29:53 : ambiguity
29:54 : if if you do it on this tree-based
29:57 : visualization
29:59 : oh gotcha well then the
30:03 : developer has to um have a mental map
30:07 : between the original code to the
30:10 : snapshot
30:11 : uh code or lines so yeah
30:14 : let's understand what
30:17 : exactly is the relationship
30:21 : is first yeah yeah yeah
30:24 : i think that that part is going to be
30:27 : different
30:27 : from what people are used to
30:30 : and uh uh-huh you know if
30:34 : you know that's that's yeah it could
30:37 : potentially be
30:38 : either way either we just get them
30:42 : to do things that are very different
30:44 : from what they were doing
30:46 : or we come closer to them in some way i
30:49 : don't know
30:50 : this is a research project right so
30:53 : hover over
30:53 : the variable to see the value um so
30:57 : if it if it's a step debugger then
31:01 : imagine if if the tree is
31:04 : tree visual
31:07 : then it then no ambiguity
31:13 : if it's a step debugger
31:19 : um if spread
31:22 : debugger is it's fine too because does
31:25 : there's an implied current state at any
31:28 : point in time
31:30 : right so uh based on
31:33 : the current time
31:38 : is is it possible for it to just
31:41 : print a list of values
31:45 : yes this line executed five times and
31:47 : then let me give you a list of
31:49 : how this value is like array of five
31:52 : things so yeah so our historical
31:57 : values of this variable yeah
32:01 : yes you could do that um and
32:05 : i think bill lewis's database
32:08 : or odb sorry odb
32:12 : he he can't have a given
32:16 : a i think yeah given a variable
32:20 : anywhere in the program it can show you
32:23 : all the historical values
32:24 : of that variable and then you can click
32:28 : on each historical value and then
32:31 : you'll jump to the place where it was
32:33 : set to that value
32:37 : yeah jump back in time where
32:40 : you got that value so there we go
32:45 : click click on
32:48 : one and jump
32:52 : back to source of the value that would
32:56 : be cool
32:56 : another thought i had about like
33:00 : if we have this timeline based
33:02 : visualization
33:03 : like the tree is uh
33:07 : you could ask what are the historical
33:11 : values
33:13 : of a certain either variable
33:16 : or an entry of a dictionary or something
33:19 : and you can plot that
33:22 : on the timeline um
33:26 : because if you you can imagine
33:30 : like your code is like this maybe
33:42 : your code is like this and if i if i
33:45 : were to
33:45 : say hey i have a dick somewhere
33:48 : dick one and
33:52 : i want to see the historical values
33:55 : of dict one well i might have
33:59 : i might have this maybe in this point in
34:01 : time there was a change
34:03 : and then in this point in time there was
34:05 : another change
34:06 : and in this point in time there was
34:08 : another change
34:10 : and then there's there's another one so
34:12 : this
34:13 : this this plot here on the right is kind
34:17 : of like the lifetime
34:18 : of this dictionary and
34:22 : and maybe maybe you can i don't know
34:25 : exactly how to visualize this maybe
34:28 : you maybe if the dictionary is small
34:31 : then you can
34:31 : show the full dictionary on the timeline
34:35 : but obviously if the dictionary is big
34:38 : then we would have to think of something
34:42 : oh it need you reminds me of the uh
34:45 : the object compare the
34:48 : library that you wrote you can just uh
34:51 : if you compare this object to that
34:54 : object then
34:55 : there are the entries added all three
34:58 : entries removed or also so using we
35:01 : could also show the diff
35:02 : is that what you're saying so you're
35:05 : saying like at this point in time
35:07 : here and then at this point in time it's
35:10 : like um
35:11 : we added the key of a
35:14 : add we added that one maybe that's not
35:18 : the
35:19 : it's like get kind of yeah exactly
35:22 : and then we added a and here we modified
35:25 : a
35:25 : to two uh etc
35:29 : so so you can kind of see a summary
35:32 : of the lifetime of this dictionary yeah
35:35 : exactly yeah that kind of thing yeah
35:38 : is what i'm thinking uh it could
35:40 : obviously this
35:41 : is you know to get this to work really
35:44 : well
35:45 : it's kind of a challenge but uh we
35:48 : should think about something like this
35:50 : um so so yeah maybe
35:54 : maybe use it oh okay i don't know if
35:57 : that's a great
35:58 : oh maybe i should do um yeah i'll just
36:01 : do a
36:02 : screenshot
36:10 : what just happened
36:15 : i think something weird on this oh my my
36:18 : computer is just severely
36:21 : okay my computer's display is just
36:24 : really
36:25 : broken right now that's okay oh
36:28 : we might have to log out log back in at
36:31 : some point
36:32 : um yeah okay what time is it
36:37 : my i suspect my clock is off too
36:41 : oh it's 10 19. yeah it says
36:44 : 10 9 57 on mine
36:49 : all right 10 19. okay so
36:53 : yeah i this is
36:57 : so all historical like another
37:00 : idea is
37:04 : huh this diff idea i think could
37:07 : actually
37:09 : could work pretty well maybe um
37:12 : yeah i think if we can give both
37:15 : information
37:16 : of how the object looks each time if
37:19 : they want to see it but it does
37:21 : it doesn't have to be expanded and then
37:24 : we can also give
37:25 : it i mean they could they could
37:27 : definitely i could just see
37:29 : like it's easy to let them ask for it
37:33 : that that part is easy like we could
37:35 : also always allow them to
37:37 : click on the line and then let them
37:41 : see the entire world of objects
37:44 : as they are during that point in time
37:47 : right that that's easy to do yeah uh
37:50 : what
37:50 : if you already fixed a point in time
37:54 : uh it's it's easy to
37:58 : it's just like we're just gonna let you
38:00 : see all the objects
38:02 : what they look like at that point in
38:03 : time but it's across
38:05 : a time trying to plot it on a timeline
38:09 : it's more challenging um yeah
38:12 : so yeah so an idea is maybe you look at
38:15 : some time-based
38:20 : visualizations which might be like these
38:22 : scatter plots
38:27 : well scatter plot or like well obviously
38:32 : there's histograms
38:35 : histograms we could use for like if you
38:38 : have
38:38 : a integer value we can make a histogram
38:42 : of the integer value
38:44 : or we could make a histogram of the size
38:47 : of a dictionary or size of an array
38:50 : like this okay cool um
38:53 : [Music]
38:56 : and then maybe we could also do like um
39:01 : an area plot like this
39:04 : sure like i can see this being used for
39:09 : um memory usage like
39:14 : like maybe each color is a different
39:17 : type of object
39:18 : in the application like what
39:21 : objects are responsible for taking up
39:23 : the memory
39:24 : you can kind of see this and
39:29 : i think the concept of a lifetime of an
39:32 : object a lifetime chart of an object
39:36 : can be really powerful but which
39:40 : question does it answer for us
39:44 : the value of the variable what
39:47 : value what is the value of this variable
39:50 : on this line right if we already know
39:53 : the line
39:54 : we don't have to go for the timeline
39:56 : thing well the light
39:58 : by the light i mean the line of code
40:01 : i go i see when when it's a line of code
40:05 : but
40:06 : i see and um yeah in that case
40:15 : yeah i can see if you click on like you
40:18 : you click on this line the
40:22 : this line actually could map to
40:26 : this line and this line
40:29 : it maps to different lines
40:32 : on the on the actual execution
40:36 : so yeah so maybe you also have a panel
40:39 : that's your actual source code and then
40:42 : you're clicking on lines
40:44 : on the actual source code and then it
40:45 : highlights the lines of execution
40:49 : yeah it can also answer the question of
40:52 : when is this
40:53 : object mutated
40:58 : um by oh when
41:01 : when was this object
41:05 : um how by clicking on
41:08 : the line that's mutating it yeah or
41:11 : if you can see the live time of the
41:14 : object
41:15 : you can click on say
41:19 : if you just see the lifetime of the
41:21 : object it's each time that this happens
41:24 : right so you know which line will take
41:27 : this yeah object and if if it's an
41:31 : int or if it's a string
41:34 : one maybe oh strings don't rotate
41:39 : so there's that but
41:42 : but there could be a variable string
41:44 : string
41:45 : var one maybe at one point it was a
41:50 : and then at the next point is
41:53 : a b right then at the next point is abc
41:57 : something like that exactly and then you
42:00 : can see
42:01 : the different points in time where that
42:03 : mutated
42:05 : um how did this
42:08 : data get here
42:11 : that's that's maybe like um it's like a
42:15 : backtracking
42:16 : thing i don't know if that's something
42:20 : can you think of a visual that would do
42:23 : that
42:24 : just figure out like like if i hadn't
42:28 : like if i see i guess in the if it's a
42:32 : string variable like
42:35 : like at some point it became blark
42:38 : um okay and then you're like yeah that's
42:42 : wrong
42:43 : i think you just click on it and then it
42:45 : jumps you back in time
42:47 : to the assignment and then
42:50 : you get to see the assignment yeah so
42:53 : that's the same as
42:54 : the mutation thing yeah yeah yeah if
42:58 : if like it was an array
43:02 : then like if you had you get a weird
43:05 : like like your array is supposed to
43:08 : look like this
43:14 : and then later on
43:17 : later on you get a weird thing get
43:20 : inserted into your array uh
43:22 : oh if we if we do the diff if we do the
43:25 : div
43:26 : thing this would be like we added at
43:29 : index two we added
43:32 : three mm-hmm
43:35 : yeah or maybe like
43:40 : yeah right we write it like that
43:43 : and then this is like that index three
43:46 : we added
43:47 : part and then
43:50 : and i can click on this and get get to
43:53 : the line that made that assignment
43:56 : yeah exactly
44:00 : yeah that would be cool that would be
44:03 : cool yeah
44:04 : this this diff idea is pretty cool
44:07 : i really like that so yeah
44:11 : showing the diff um because another
44:14 : thing you can do with the div
44:16 : is remember in in the zoom visualization
44:20 : where where i i'm like
44:23 : hiding all the details within the sub
44:26 : tree
44:27 : basically so is like yeah you know i
44:30 : have a hero
44:32 : i have a mon i have a hero i have a
44:35 : monster
44:37 : and then they do battle
44:40 : okay yeah
44:44 : like i have a i have a do battle and
44:46 : then
44:47 : what i did with the zoom visualization
44:49 : is i actually print out
44:52 : next to this the aftermath
44:55 : of what happened in the battle
44:58 : and then but but the way i did it was
45:02 : i just printed the full state of the
45:04 : hero and the full state of the monster
45:08 : because some something within them have
45:10 : changed
45:11 : but with the diff idea what i could do
45:14 : is
45:15 : um i could say hero.health
45:21 : is equal to seven now that that was the
45:24 : update
45:27 : um and and the monster
45:30 : monster that health
45:33 : is now negative four okay
45:37 : so so these are these are like the
45:40 : updates
45:41 : should we put like this plus sign just
45:44 : to make it look like a diff
45:45 : maybe so like this is this is the change
45:48 : from the previous line before do battle
45:52 : happen yeah
45:53 : uh-huh so we could do this like this and
45:57 : then
45:57 : if you're wondering how that happened
45:59 : then you can do a drill down
46:00 : on do battle yeah yeah yeah i think that
46:04 : will be very helpful