You Really Should be Debugging Your Code
Sure, you can use console.log to keep an eye on your JavaScript, but if you really want to know what’s going on with your code you’ll need a full-fledged debugger. And, of course, you’ll need to know how to use one. That’s why my colleagues and I at Mozilla have added a new section to the Firefox DevTools Playground that’s all about debugging.
We’ve built four basic lessons that use the Firefox Debugger to examine and repair a simple JavaScript to-do app. Go check them out, and let us know what else you’d like to see in the DevTools Playground.
The Debugger Playground
Lessons are completely free. First, download the to-do app code from GitHub.
These lessons are a new format for us and we’re very excited to bring them to you. We’re always looking for new ways to help developers learn things and improve the daily workflow. If you have an idea, let us know. We’ll be expanding the Playground in the coming months and we’d love to hear from developers like you.
If you’re not familiar with the Firefox Debugger, take a look at the debugger docs on MDN and watch this quick intro video:
Now let’s take a look at a lesson from the new Debugger Playground. Ever use console.log to find the value of a variable? There’s an easier and more accurate way to do this with the Debugger.
Use Debugger to find the value of a variable
It’s much easier to find a variable with Firefox Debugger than it is with console.log. Here’s how it works:
Let’s take a look at a simple to-do app. Open the to-do app in new tab.
This app has a function called addTodo which will take the value of the input form, create an object, and then push that object onto an array of tasks. Let’s test it out by adding a new task. You’d expect to have this new task added to the list, but instead you see "[object HTMLInputElement]".
Something is broken, and we need to debug the code. The temptation is to start adding console.log throughout the function, to pinpoint where the problem is. The approach might look something like this:
const addTodo = e => {
e.preventDefault();
const title = document.querySelector(".todo__input");
console.log('title is: ', title);
const todo = { title };
console.log('todo is: ', todo');items.push(todo);
saveList();
console.log(‘The updated to-do list is: ‘, items);
document.querySelector(".todo__add").reset();
};
This can work, but it is cumbersome and awkward. We also have to remember to remove these lines after fixing the code. There’s a much better way to do it with the Debugger using what is called a breakpoint…
Learn more on the Debugger Playground
The Debugger Playground covers the basics of using the Firefox Debugger, examining the call stack, setting conditional breakpoints, and more. We know there’s a steep learning curve to using the Debugger (and debugging JavaScript), so we’ve pieced together a simple to-do app that’s easy to understand and decode. It’s also useful to run in your browser to keep things on track throughout your work day. The app is available here for download on GitHub. Grab it and then head over to the Playground to walk through the lessons there.
Let us know what you’d like to see next. We’re working on new lessons about the latest web technologies and we’d love to hear from you. Post in the comments below.
