Finding (de)bug

What does that even mean? Nowadays, it’s widely attributed to Admiral Grace Hopper who removed a moth from a computer after searching for why her computer wasn’t running optimally. However, the reference of a bug, meaning a technical error of sorts, can be traced back to Thomas Edison.

source: phdcomics.com

In ruby, there were various gems that helped with debugging. We could use Pry, Byebug, or Pry-Byebug to pause program execution to pinpoint exactly what was going on in our code. Now that I’m learning more about JavaScript, the JS equivalent would be putting debugger into a line of code and pausing execution.

Let’s take a look an example:

var var1 = "First"
var var2 = "Second"
var collection = [var1, var2]
console.log(var1);
console.warn(var1);
console.error(var1);
for(let i = 0; i < collection.length; i++) { 
console.log("coded like this on purpose")
debugger
collection[i] += "!";
}
console.log(var1);
console.log(var2);

If we look at our test page, it should look like:

First, notice the box on the top right hand corner: “Paused in debugger”. Those two buttons (and the same ones above the console box) allow for more functionality. The grey curved arrow will go to the next function. In the example above, we would hit collection[i] and see what value that is. We could even decide to click through until our loop ends and see exactly what values are being passed in for i, collection, and collection[i]. The blue arrow allows the script to the next breakpoint (or end if there aren’t any breakpoints). To assign a breakpoint click on a link in the sources window.

Next time it’s run you would hit every point of interest. To remove, click the line again.

If you need to access more files or folders you can use ⌘ + p

Sparse pickings…

Now, look at the {} on the bottom left corner of sources. In the beginning of the for loop there was a line out of place. If you hover over the {}, you’ll see “pretty print”. When it is clicked, it’ll open a new tab that has your code formatted and easier to read with the proper indents.

Though, personally, I like having a debugger on its own line.

You might have also noticed that even though I use console.log() there are other functions you can call on console. Like warn and error , even though they look like the same thing in terminal,

Notice the difference between terminal and in console.

You can also use console.count([label]) to see how many times an object has been called. Though, it will not count when it has been console.log()'d or any of the previous two console functions. However, when called on in a function, or even a loop, the count will increment.

One last tidbit is using console.time() and console.timeEnd(); you can use these functions to track how long it takes from when console.time() takes until it hitsconsole.timeEnd().

I added a console.time('test') to the top of my code and a console.timeEnd('test') to the end like so:

console.time('test')
var var1 = "First"
var var2 = "Second"
var collection = [var1, var2]
console.log(var1);
console.warn(var1);
console.error(var1);
for(let i = 0; i < collection.length; i++) {
console.log("coded like this on purpose")
collection[i] += "!";
}
console.log(var1);
console.log(var2);
console.count(var1)
console.timeEnd('test')

As you can see, it logged out how much time it took for the code to run. Though, if you have the program paused in debugger, that time will still continue to run.

Use these tools, and whatever else you know to find debug! If all else fails, just try googling it.

source: xkcd comics

Resources: https://youtu.be/-rxYde_ESxA

https://developer.mozilla.org/en-US/docs/Web/API/Console

Like what you read? Give Kenny Lin a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.