Firefox Developer Edition DevTools – Debugger

A couple of days ago, as I was getting familiar with ol' faithful, the Mozilla Web Docs, I came across one Mozilla's new projects – a "Developer Edition" browser.

Now, obviously there is nothing wrong with ol' reliable, Google Chrome. Chrome's DevTools is one of the most indispensable tools in any developer's toolbox.

Still, I'm a sucker for shiny new things, so I decided to waste a couple of minutes downloading the browser and giving it its fair shot to live up its name and reputation. I mean, how could I resist something branded "Developer Edition" from the people that give us the MDN docs?

So, to cut a long story short I'll just come out and say it: it is pretty fantastic. Firefox's Developer Edition DevTools has a design that reads great and feels intuitive, and is definitely a welcome addition to any toolbox. It even inspired me to learn how to use it's built in debugger!

Mozilla offers a handy dandy debugger playground that guides you through a few starter examples with a simple to-do list react app.

You can open up the DevTools by right-clicking and selecting inspect element. This will pop the DevTools up, typically to the side of the browser window. Like so:

At the top of the DevTools, clicking on Debugger will render three panes: Source List, Source, and Tools

Source List & Source Panes

The source list pane shows all the JavaScript files related to the current page or project, while the source pane shows the content of those files. For all intents and purposes, we can think of it very similarly to our typical editor, like Visual Studio Code.
The left pane describes the locations of files and their relative structure to one another in relation to the whole application, and the pane to its right gives us a glimpse into whatever file is selected in the Source List.

Tools pane

The leftmost pane is the Tools pane, and is where a lot of the useful tools that Firefox gives us (but not all of them!) can be accessed from. In particular Watch Expression and the Scope tabs are useful as they allow us to view whatever variables are in play at any given moment, thanks to Break Points.

Break points are inserted by clicking on the line number in the Source's gutter. This should mark it with a blue flag, like above. Now, whenever the application is run, it will stop right at the line marked with the blue break point flag.
In this case, that means that when we try to add an item to the to-do list, the program freezes.

This might be a good time to go a little more in depth regarding the Tools pane, and in particular the toolbar.

Toolbar

1. Play/Pause
   • Pauses or resumes the execution of the code being debugged. This is useful when you want to continue running your code after hitting a break point – or to move on to the next break point quickly.

* tl;dr – used for stopping and starting the execution of the code in question

1. Step over
   • Executes the immediate next line after the inserted break point. If the next line happens to be a function, it will execute the entire function.

* tl;dr – used for taking the next "step" single step down your code

1. Step in
   • If the line being "stepped" over is a a function, one can instead "step in" and execute the function line by line instead of all at once.

* tl;dr – used for "stepping into" functions and slowly working your way down its execution line-by-line

1. Step out
   • Steps out of a function and runs the code until another break point or until completion.

* tl;dr – used for getting out of the scope of a function and letting it run. 

Watch Expression

The Watch Expression tab is also a very useful tool in its own right. By typing in an expression or variable into the tab, we can see how that expression comes to acquire or change its values, line-by-line, by using the debugger toolbar.

Scopes

Scopes is another incredibly simple and useful tool that helps you debug your code more easily. At whatever break point in your code, as with the Watch Expression tab above, your relevant scopes are presented to you.

There is a lot that the DevTools offers, and as far as user experience goes, I'm happy and sold on this Mozilla browser. Keep in mind, though, that it is still in development mode and though I myself haven't found any glitches or pitfalls while using the application, always keep an open mind that something strange could happen. But as devs, I think we can handle a bug or two.