UX & Product Designer

Thoughts

I write about UX design, programming, and journalism—sometimes all at once.

Debug Your Code the Easy Way

“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.

Too true.

Too true.

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.

The tips are geared toward web apps and JavaScript, though are broad enough to help most novices in need.

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 make sure my variables are of the correct type by using JavaScript’s “typeof” operator. JavaScript is a loosely typed language, which means you do not need to explicitly declare variable types. While handy, that also means JavaScript is quite accommodating and may in turn mask errors.

JavaScript is a loosely typed language.

JavaScript is a loosely typed language.

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.

xpectd.gif

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.

Printing variables helps you understand what's going on in your code.

Printing variables helps you understand what's going on in your code.

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 Chrome, go to View => Developer => JavaScript Console.
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.

panic.gif

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.

This error screen is generated from one missing colon.

This error screen is generated from one missing colon.

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...

experienced.jpg

Write tests.

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

         

More Resources

For using Firefox
For general debugging tips
For using GitHub
 

Do you have any tips for easy debugging? Leave your thoughts in the comments below.