In this post, we will be focusing on Firefox, but you can also find the same essential tools inside of Google Chrome’s DevTools. The overall layout off the debuggers is basically the same as well.
To use the Firefox debugger, you’ll need to install Firefox. You can use the Developer Edition or the stable version, provided you have the newest version (codenamed Quantum). The Developer edition is sort of a half-way in-between Firefox Beta version, with some beta features geared specifically towards devs and a few UI tweaks. As far as we can tell, however, Firefox’s standard release channel contains all the same developer tools as Firefox Developer Edition.
We’ll be doing our debugging on a training site offered by Mozilla. Navigate to the site.
Open the Debugger by pressing Option + Command + S on a Mac or Control + Shift + S on a PC. This will slide up a pane from the bottom of Firefox’s primary window. If you’ve ever used Inspect Element before, this will be fairly familiar.
In order to step through your code effectively, you need to set breakpoints. Breakpoints tell the debugger where to pause executing code for a moment, giving you the chance to inspect values.
Click on a line value to set a breakpoint. Here, we’ll set a breakpoint at line 13 by clicking on its line number.
Once we’ve set our desired breakpoints, try adding an item to our to do list.
The code will “break” at that point, pausing its execution until we manually continue through the stack. This let’s us take our time inspecting values.
You can also see what’s going on in the Scopes pane on the right. The top Block shows the variable assignments current in scope for the current line.
Stepping through Code
Once we’ve set some breakpoints, we’ll want to control how we move through our code. This is called “stepping” through the code, and we can do it in various ways. There’s a few tools that will help us do that. These tools are available at the top of the right-side pane.
We can take a closer look at what they do.
All of these tools run code one line at a time, but they behave different when they encounter functions.
Step Over: “step across” the current line. This will run the next line, executing any functions you encounter. This can automatically skip over many lines of code executing called functions.
Step In: run the code one line at a time, but navigate “inside” of any function you encounter. This allows you to quickly navigate to the contents of called functions for troubleshooting.
Step Out: exit a function that you entered with “Step In” and return to the main body of code.
You might also be interested in the following posts: