Debugger - CS1302

from __init__ import install_dependencies

await install_dependencies()

Motivation¶

Computer programs can sometimes behave in an unexpected way due to errors or bugs. Finding the errors might be easy for simple programs. However, for programs consisting of many lines of code, finding errors can be very hard.

A debugger allows us to pause the execution of a program at a line, called a breakpoint, we specify. This allows us to find errors more easily. In this lab, we will learn to use the visual debugger in JupyterLab.

Breakpoints¶

We will use the following code as an example to set a breakpoint. First, execute the code to see the effect.

msg = "Hello, World!"
print(msg)

To enter the debug mode, click on the debugger icon in the toolbar. The debugging sidebar should slide open. You can also open/close the sidebar by clicking the debugger icon on the right side bar.

YOUR ANSWER HERE

To set a breakpoint:

Press the dot that appears as you hover to the left of line number 2.
Run the cell and observe what happens, in order to answer Exercise 2 later on.

msg = "Hello, World!"
print(msg)

The debugger provides additional information organized into different panels as shown in Figure 1:

Variables panel shows the current values of different variables.
Callstack panel provides a more detailed context of where the execution is paused. It also provides the flow control buttons to resume/stop the execution.
Breakpoints panel shows all the breakpoints of the current debug session.
Source panel shows the code being debugged. /TMP/IPYKERNEL_... is a temporary file that stores the code of the cell being executed.
Kernel sources list the code that runs the kernel, which in turn runs the code cell being debugged.

YOUR ANSWER HERE

Flow Control¶

To resume/terminate the execution, use the following flow control buttons at the top of the callstack panel:

Continue button continues the execution and pause again if it hits a breakpoint.
Terminate button stops the execution.
Next/Step-over button continues the execution of program to the next line of code to be executed.

For the following exercise, run the cell below to import a function f.

from utils import f

f(1), f(2), f(3), f(4)

YOUR ANSWER HERE

Console¶

Sometimes, it is helpful to run temporary code that shares the same context as the notebook, but without modifying the notebook. This can be done using a console:

Right click anywhere on a notebook and choose New Console for Notebook:
Type some code such as msg into the console input and run it with Shift-Enter:

If you need to run temporary code while debugging a code cell, the console above won’t work because the breakpoint also pauses the execution of the console. In such cases, a debug console is necessary, as illustrated in the following exercise.

def g(n):
    return n * g(n - 1) if n > 1 else 1

g(3)

YOUR ANSWER HERE

Visualization¶

Seeing is believing. You can also debug your code by visualizing the code execution.

First, load the divewidgets using a line magic:

%reload_ext divewidgets

Then, create a cell magic with the python code you want to visualize:

%%optlite --height 500
def f(n): # definition of a function
    return n * f(n - 1) if n > 0 else 1


f(3)

Try the following:

Drag the slider to time-travel the code execution.
Click any lines with code to toggle breakpoints, and click Next > (< Prev) to go the the next (previous) breakpoint.
Click the Edit the code link to edit the code.
Click the Permalink button to generate a url of the code, and copy and paste the url to a new browser window to run the visualization there.
Click the Live Edit button to live edit the code in a new browser window, where your changes to the code are immediately visualized. You can also time-travel and generate a permalink there.

Run the following cell to see additional options available to the cell magic.

%%optlite?

If you’re struggling to understand or debug a piece of code, you can use OPTLite to share a link of the code with others. You can create a permalink like this:

https://dive4dec.github.io/optlite/#code=def f(n)%3A %23 definition of a function return n * f(n - 1) if n > 0 else 1 f(3)&mode=edit&origin=opt-frontend.js&rawInputLstJSON=[]

If you change mode=edit in the query string to mode=display, the visualization will start automatically:

https://dive4dec.github.io/optlite/#code=def f(n)%3A %23 definition of a function return n * f(n - 1) if n > 0 else 1 f(3)&mode=display&origin=opt-frontend.js&rawInputLstJSON=[]

To automatically enter live editing mode, specify live.html in the path:

https://dive4dec.github.io/optlite/live.html#code=def f(n)%3A %23 definition of a function return n * f(n - 1) if n > 0 else 1 f(3)&mode=edit&origin=opt-frontend.js&rawInputLstJSON=[]

YOUR ANSWER HERE

Glossary¶

breakpoint: A designated point in a program’s code where execution will pause, allowing the programmer to examine the program’s state and behavior at that point. Breakpoints are often used in conjunction with a debugger to help identify and resolve errors or bugs in a program.
bug: An error or defect in a software program that causes it to behave unexpectedly or not according to its intended purpose. Bugs can range from minor issues to major problems that can cause crashes or data loss.
callstack: A data structure that keeps track of the functions or procedures that have been called in a program, along with their parameters and return values. The callstack is used by the program to keep track of where it is in the execution process and to manage memory usage.
console: A command-line interface or text-based window used for interacting with a program or operating system. The console allows users to enter commands and view output from the system or program.
debugger: A tool or program used to identify and resolve errors or bugs in software code. Debuggers can be used to step through code, examine variables and data structures, and identify the source of errors in a program.
flow control: The process of controlling the order in which a program executes its instructions. Flow control can be achieved through conditional statements, loops, and other control structures that allow the program to make decisions and repeat actions based on certain conditions.