Introduction to Firefox Debugger
Are you only usingconsole.log to debug your JavaScript code? It is OK to admit. Usingconsole.log is easy and convenient, but it has limitations. It isn’t great for catching things as they happen, or diving deep into code to see exactly where it is broken. To do that, you’ll need a full-featured debugger. The Firefox Debugger has comprehensive tools to evaluate and repair broken code. Once you learn the basics, you’ll find that using a debugger is not only fast and easy, but it can save you from hours of frustration, and potential ‘bang-head-on-desk’ sessions.
We’ll learn the basics of Firefox Debugger by debugging a simple to-do app. You will need Firefox to follow along. Don’t have Firefox? Check outFirefox Developer Edition.
Before diving in, let’s take a look at the Debugger interface. Hitoption +command +S on Mac orshift +ctrl +S on Windows to open the Debugger.
The Debugger is divided into three panes:
An overview of the Firefox Debugger Panel- Thesource list pane shows all the JavaScript files related to the current page or project.
- Thesource pane shows the content of those files.
- Thetool pane contains info and tools.
The tool pane can be broken down into five sections:
All of the tools available in the tools pane- Thetoolbar has buttons that control the debugger’s movement through the script.
- Thewatch expressions section allows us to watch expressions as executions are paused.
- Thebreakpoints section displays all of the breakpoints that have been set. Next to each breakpoint is a checkbox to enable or disable that breakpoint.
- Thecall stacksection displays each level of the call stack, as well as the function name, filename, and line number.
- Thescopes section displays all objects that are in scope.
Don’t worry if you don’t understand what all of these terms and symbols mean. We’ll cover them in the following sections. Just take note of where things are so that you can follow along.
Now that we’ve reviewed the Debugger interface, let’s use it to fix a broken to-do app.
Firefox DevTools: Hot Tip
Sometimes JavaScript code will be “minified” so that the file size is smaller and faster to load. This is great for your users, but it can make the code impossible to read in the Debugger. Thankfully, Firefox has a great option for viewing minified code. When you view a minified file in the source pane, an icon will appear at the bottom. After clicking this icon, Debugger will format the code into something that is human-readable, and display it as a new file in the source pane.
Give it a try! The link below will bring you to a to-do app that is using a minified JavaScript file. Simply:
- Visit this Link
- Open Debugger (option +command +S on Mac orshift +control +S on Windows)
- Find and click on app.js in the source list pane
- Locate and click on the format icon
