Introducing the Deep Zoom Debugger

I give a brief introduction to the deep zoom debugger. The deep zoom debugger is a new concept of what a debugger for programs could be. It uses a zooming based user interface a la Google Earth to allow the programmer to inspect the program from differ levels of detail.

Transcript

The following transcript was automatically generated by an algorithm.

00:00 : hello this is Toby ho and I like to show
00:02 : you the deep zoom debugger I've been
00:04 : working on the deep zoom debugger is a
00:07 : post-mortem debugger and that means
00:10 : rather than trying to debug a program
00:12 : live while it is executing you instead
00:15 : record what it did while it executes at
00:18 : every step and then afterwards you
00:20 : scrutinize what the program did this is
00:23 : a concept and a prototype and it drew
00:26 : from a handful of key inspirations which
00:29 : I'm going to list right now
00:31 : number one is a Python tutor by Philip
00:34 : hua Python tutor is a beginner friendly
00:37 : step debugger which can step both
00:39 : forwards and backwards additionally it
00:42 : gives a graphical depiction of objects
00:46 : arrays and dictionaries on the heap and
00:49 : it is very helpful for learners another
00:53 : big inspiration is Brett Victor's famous
00:55 : talk entitled inventing on principle in
00:59 : this talk he demoed a live coding system
01:02 : that he built which allows the program
01:04 : to not only go backwards in time but
01:07 : also see all of a character's futures
01:11 : simultaneously also he live coded the
01:14 : binary search algorithm with the aid of
01:16 : a side panel that immediately shows you
01:19 : the intermediate values of each variable
01:22 : as they change within the execution of
01:24 : the program now the name and concept of
01:28 : deep zoom comes from benoit mandelbrot
01:31 : incredible Mandelbrot set and the
01:33 : concept of fractals particularly the
01:37 : idea that many things in life can be
01:39 : viewed from many differing levels of
01:42 : detail it's something that has
01:44 : completely changed how I look at the
01:46 : world then I thought what is a software
01:49 : application that is like that and it was
01:53 : Google Earth Google Earth the most
01:55 : detailed snow globe ever the chrome
02:00 : debugger tool CPU profiler is another
02:02 : tool that exhibits a deep zooming user
02:05 : interface it along with the chrome
02:08 : debugger are tools that I use regularly
02:11 : in
02:11 : job probably for that reason I took some
02:14 : design elements from each of them okay
02:17 : enough preface here is the deep zoom
02:20 : debugger in action
02:28 : you
02:33 : in the top level we see the entry point
02:36 : of the application in this programming
02:39 : language a mandatory main function is
02:41 : the entry point of every program when we
02:44 : zoom in further we see the details
02:46 : within the main function on the left
02:49 : hand side we can see the line numbers
02:50 : corresponding to the original source
02:52 : code on the right hand side we can see
02:55 : the intermediate values that are created
02:57 : by the program as it executes the FIP
03:00 : function as you might expect generates a
03:03 : number within the fibonacci sequence we
03:05 : called fib with the argument of 7 and it
03:08 : returned 13 this program apparently
03:12 : printed 13 onto the screen if we want to
03:15 : see the details of what happened within
03:17 : the function we can zoom in closer here
03:20 : we see the execution of the fib function
03:23 : with N equals 7 it does not show every
03:26 : line of source code but rather it only
03:28 : displays the lines that were reached
03:31 : whenever there is a function call it
03:33 : shows its actual inputs and outputs on
03:36 : the right-hand side whenever there is a
03:39 : variable assignment it shows the value
03:41 : that was assigned to it
03:42 : and whenever there is a return statement
03:44 : it shows the value that was returned
03:46 : from this function we can zoom in
03:50 : further to the call of fib with N equals
03:52 : 5 and further to fit with N equals 3 and
03:56 : further still to fit with N equals 1 and
04:00 : here finally we reach the base case of
04:03 : the recursion where the code simply
04:05 : returns 1 let's contrast this with the
04:09 : implementation of the fibonacci sequence
04:11 : that uses a loop here you can see that
04:15 : the body of the while loop has been
04:17 : pasted repeatedly one after another this
04:20 : is what happened naturally as the result
04:23 : of following the execution of the code
04:25 : line by line this visual depiction gives
04:28 : a strong sense of a chronology it almost
04:31 : feels like a sheet of paper upon which
04:34 : someone has worked out the steps of the
04:36 : math problem line by line and then
04:39 : finally arriving at the answer at the
04:41 : bottom I like to think of this visual as
04:44 : an analogy to a very very
04:47 : large piece of paper where the entire
04:49 : sequence of steps that the program took
04:53 : has been depicted there's no need to
04:55 : step back and forth in time in the
04:57 : debugger because using Brett Victor's
05:00 : words time has been mapped to space that
05:05 : is all for this demo if you'd like to
05:06 : learn more about the deep zoom debugger
05:08 : you can find the project that github.com
05:10 : slash airport wage slash play - lang