Debugging the Debugger

hack-reactor javascript debugging

Late last week I finally got into some completely novel concepts for me in the precourse work. The remaining Git ideas were fairly basic, but did describe the workflow HR expects us to follow). Not much interesting there. However, I then moved on to the section on Automated Testing, about which I had only had a vague understanding of the general idea before.

In this section, I first read through a fairly brief reading introducing the idea of Automated Testing, which gave a few examples and introduced some of the key terminology and syntax. I honestly didn’t find this reading to be that helpful because it really only showed some example code without really explaining it, so I just skimmed through it to get the general idea. Next, I began working on the exercises provided by HR; these essentially introduce some foundational Javascript concepts using automated testing. I had no idea what I was supposed to be doing at first, but after ~15 minutes I figured it out and it was pretty smooth sailing from there. Unfortunately, for some reason two of the exercise sets seemingly “disappeared” from the testing file. I tried to fix up these exercises as best I could, but I was unable to get any feedback on them.

Yesterday I worked through the resources provided to learn about Chrome’s debugging tools. I haven’t had a chance to implement any of them yet, but they look like they will be extremely useful. I had been using the console and a few other tools provided by Chrome, but I didn’t really know what I was doing or how to use these effectively. I will definitely want to review this section again (and probably again).

Finally, yesterday afternoon I got to the section I’ve been most looking forward too — rewriting a Javascript library! I got a little sidetracked when beginning this task, because one of my classmates figured out a way to use the automated testing suite in Node.js instead of in the browser, giving more helpful error messages. I hit few hiccups while setting this up for myself, so it took a bit longer than it would have if I were a more experienced programmer. For example, one of the things you need to set up is a pacakge.json file; I copy/pasted the content of this file, including an unnecessary comma that through some mysterious errors at first. If I’d had more exposure to JSON syntax, I probably would have caught this error a lot earlier than I did. Lesson learned!

Writing the first few functions was a bit slow, primarily because I was still picking up on little nit-picky syntax requirements and figuring out my overall workflow. Now I’ve got a pretty good system worked out, and the latest function I rewrote only took me a few minutes. Basically, I write what I THINK the function should be, test it in the browser using the original testing file from HR, then test it in Node to get additional feedback. Then I’ll try it out in JSFiddle to tweak it until it works there, test it again in Node, and if that passes, double check it in the browser (this really isn’t necessary, but what can I say, I’m a perfectionist). I’ve also been committing all of this to a separate Git branch, so that I don’t get all of the Node files mixed into the master branch. Once I’m done, I’ll merge all of the changes to the file that contains the functions to the master branch, leaving out the Node files.

Written on May 3, 2015