Using debugger to pause my functions or console.log to print variable values isn’t so different from Pry and “puts” in Ruby, but the Chrome console–where I have been spending lots of time lately–is quite a change from the Terminal.
The Google guide is an excellent resource, so I’ll just focus on a few features that help illustrate the power and ease-of-use of some of the basic debugging tools: breakpoints, event listener breakpoints, and step buttons.
A breakpoint can be used to pause the code (just like debugger), but can be set without typing debugger into the js file, refreshing the page, and running the code.
In the above example, my code is paused in a debugger that I wrote into my js file. At this point, I can set a new breakpoint on line twenty by simply clicking on the line number. The line will be flagged in blue when the breakpoint is set. I can then press play to resume script execution until it hits my breakpoint.
Once paused at a breakpoint, I can click the console tab and check the value of this.currentRound, for example.
The step buttons allow me move through the code without setting breakpoints. The down arrow steps into the next function call, which means that if the next line of code is a function call, the script will execute and stop at the first line of that next function.
The up arrow steps out of the current function, meaning that it executes the remainder of the function that it’s in, and then stops at the beginning of the next statement after the function call.
The step over (curved arrow) function call executes whatever happens on the next line and moves to that line.
Aside from setting breakpoints at specific lines or using step buttons to traverse code, breakpoints can also be set with triggering events, such as a mouse click, or DOM mutation. In my below example, I’m creating a breakpoint to be set upon a timer being fired off.
The script executes until it hits my function called “countdown” being fired from a setInterval method. From there I can click over to the console tab and do some debugging!