Learning how to program is as much learning the conceptual backing of programming concepts as it is analyzing your code to find and fix all of the errors. Debugging in and of itself is a daunting concept to the programming beginner, and in this post I hope to elucidate some of the common techniques that one can use to find and fix bugs with ease.

  Though debugging can seem quite complex at first the following methods will show that any programmer has a myriad of tools at their disposal. The sooner you learn to utilize the debugger, the sooner you will find your moments of helpless confusion being replaced by the thorough, methodical approach of working through exactly how your code is executing, and therefore why the thing you are expecting to happen is not occurring.

1. The console log statement. At first I disliked the concept of console logs- I tried to convince myself that using the pure debugging tools was a better way to do things. After working with quite a few fans of the ‘log I find myself utilizing it on a near daily basis. If you like the visual output of seeing exactly what a variable contains, put a console log statement into your code before the broken step occurs, and you will be able to verify that the variable is what you think it is, or that it isn’t. Some specific techniques for making the most of your console log statements:
1. Log a line of “================” before and after your target line. It makes it much easier to read the output from, for example, a server stack trace where the output would otherwise blend into the surrounding error messages. 2. Be as specific as possible when picking a variable to log. 1. If the variable in question is, for example, a response or request object, adding in the specific key within the object that you are trying to look at will greatly reduce the output and limit what is logged to the console to a few lines at most. More than that and the extra time you spend examining the object will detract from your overall flow.
2. The Rubber duck method. Somewhat jokingly and somewhat seriously referred to as the rubber duck method, this method of debugging involves “teaching” your code aloud to an inanimate object such as your favorite rubber ducky. Though the need for this can be removed by working with a partner or in a group setting, when working alone it can be invaluable to explain to something, if not someone, exactly what your code is supposed to be doing. This has the effect of forcing you to break down exactly what each line of code is meant to do, and in a lot of cases, can quickly and easily point you to problem areas within your code.

  The previous two methods are great to utilize when dealing with simple problems, but the serious debugger will learn how to use the developer tools, and for the purpose of this post, the Chrome Developer tools, when the problems in the code they are writing are not so easily elucidated.

  A great area of the developer tools to start with is the snippets section. Open the console with ctrl + shift+ I, or whatever the equivalent is on your OS of choice, and navigate to the sources tab. There you will see several options; click on the snippets section to get started. Snippets give you the ability to create and save code files, and then run them using the full power of the Chrome Developer tools. To get started, simply right click and select new in the spaces under the snippets tag, and rename the file if you wish. Copy your code into the middle section, between the saved files on the left and the debugger tools on the right, or write it from scratch if you are so inclined. It is always helpful to have first checked for syntax errors by using a REPL or a Linter. Then use the play, pause, and resume buttons to execute your code- any results will be displayed in the console. You can insert and remove breakpoints-points at which the code execution will stop-by clicking on the line numbers, and work your way through the code using the up and down and over arrows. Hover over each to see what each one does. When you have familiarized yourself with the debugging tools by using the console, you can start using the tools to walk through the apps you create- the tools work the same as before but now you can look at all of the different documents that you are working with.

  I realize that the explanation I have just provided of the chrome debugger was not very thorough, and to be honest, I did not intend it to be. Just as with most aspects of programming, you will learn more than I could teach you by trying it for yourself- just know that the power of Google is behind the Chrome Developer tools, and they are designed to be intuitive and user friendly.


  Stay tuned for a more thorough walkthrough of using the debugger, and all of the different tabs within, coming soon! :)