“As soon as we started programming, we found to our surprise that it wasn’t as easy to get programs right as we had thought…. I can remember the exact instant when I realized that a large part of my life from then on was going to be spent in finding mistakes in my own programs.”
That exact instant, for the late British computer scientist Maurice Wilkes, occurred in 1949. Fast forward half a century later, debugging is still very much a way of programming life.
Unfortunately for novice programmers, most people won’t tell you that. I learned later than I would have liked that much of programming is not writing new code, but figuring out what’s wrong with your existing code.
The focus of so many tutorials, bootcamps, books, and guides is about writing code. That makes sense at the start—after all, how can you fix code without writing it first? But as soon as your program moves beyond a few dozen lines, I have found that the proportion of time spent shifts dramatically in favor of debugging.
Running a program is black and white. It either works or it doesn’t. Figuring out why it doesn’t work can be like trying to spot easter eggs in Pixar films. If you don’t know exactly where they are, they are really hard to find.
To help you figure out what is broken and how to fix it, I am sharing my seven best tips on how to debug your code. This list is not meant to be all-encompassing or even best practice. Rather, it is a set of guidelines that have helped me work through all sorts of issues with my code. They are meant to help beginners debug their code as quickly and efficiently as possible.
1. Approach errors systematically.
The first thing I do is look for syntax errors. Am I missing semicolons, brackets, or parentheses? Next, I make sure I’ve declared all my variables and functions correctly. I also check scope—am I trying to access a local variable outside of its scope?
I also check parameters—what exactly am I passing into my functions? When I call functions, am I passing in the correct number of parameters?
I run through my code line by line, addressing each of these points. Doing so helps me catch most errors.
2. When in doubt, print to the console.
There are many more elegant ways to debug than peppering your code with print lines, but I find this method to be helpful in understanding exactly what my code is doing. Specifically, I “console.log” variables at the start, middle, and end of functions; parameters that are passed into functions; and returned values at the end of functions (Pro tip: The arguments object is available to all JS functions. Try writing “console.log(arguments)” in your program to try it out). I check each variable's value, scope, and type.
If you run your code in the browser, the printed lines should appear in the developer console. Where is the developer console, you ask?
In Firefox, go to Tools => Web Developer => Web Console.
In Safari, first enable the developer tools by selecting Safari => Preferences => Advanced => Show Develop menu in menu bar. Then in the menu bar, select Develop => Show Error Console.
3. Split your code into smaller chunks.
Larger functions are sometimes easier to write, but can easily spiral out of control. Break functions into a series of smaller functions that each do one thing. That will also make it easier to check which chunks are working and which ones are not. I usually comment out entire sections of code, slowly adding them back in until the error appears.
4. Talk through your code out loud.
Explaining your code out loud to yourself, a friend, your pet dog, or a rubber duck (it’s actually a thing). You should be able to explain everything you have written. If you can’t, that’s a good indication to take a second look at that section of code.
5. Don’t panic if you generate a ton of errors.
Often, one error can spin off tons of additional errors. In my AngularJS and Ionic app, a missing bracket or semicolon results in a white screen. A slew of errors are printed to the console, though the only actual problem is that missing bit of syntax.
Start with the top-most error, and work your way down the list. You may find that fixing the first error fixes everything else in turn.
6. Ask for help.
In my experience, developer communities by and large tend to be friendly if you ask your question the right way. CodeUnion has an excellent post demonstrating the best way to explain a problem: “I wanted to do X, so I wrote <some-code>. I expected to see Y when I ran this code, but instead I saw Z. What am I missing?”
As far as where to ask for help, Stack Overflow is a good bet. Google your answer first to make sure it hasn’t already been covered (the top result will probably be Stack Overflow).
I also like smaller communities dedicated specifically to the type of technology I’m using. For my journalism application for instance, I turn to the AngularJS Google Group, Ionic Framework forum, and Evernote forum.
7. Use a version control system.
A version control system, like Git, tracks changes to your code. That means you can access past versions of your files. The benefits to using a version control system are many. So far as debugging, version control gives you the ability to backtrack if you get stumped with a bug. Starting over can sometimes be easier than trying to work backwards. Check out an earlier version of your code that does work, and try building your desired functionality again.
For the More Experienced Programmer...
Testing is good practice, especially as your program scales. You will have a better understanding of what’s going on in your code, which will ultimately give you greater control. You will probably start off writing unit tests, which ensure that specific parts of your code (units) are operating in isolation with the rest of the code.
If you are using a framework, check first if it offers a test suite. For instance, Karma, a test runner that runs on Node.js, and Jasmine, a testing suite, are the tools of choice for Ionic and AngularJS apps.
Use a debugger.
You can glean much more meaningful information about your code using a debugger than just using a web console. Debuggers are included in most browser developer tools, but I still find it handy to use Firefox’s Firebug extension.