Debugging Javascript

Day 8 A.J (After Javascript)

The air conditioning has thankfully returned to the Flatiron School, but the errors remain.

Javascript errors can be tough to read, decipher, and fix. My life greatly improved once I learned to correctly use binding.pry in Ruby on Rails (then moderately declined during the ‘byebug’ days, but quickly came back). I need to get to that point with Javascript so will focus on some of the helpful debugging tools offered through Chrome. Other browsers will likely act similar but I will be focusing exclusively on Chrome.

Point Breaks

I mean, breakpoints

Standard breakpoint

In the console — sources tab, you can click on the line of the number you want the code to stop and it adds a standard breakpoint. To remove it, you can either click on the line, uncheck in the breakpoints section, or right click to remove all breakpoints.

Conditional breakpoints will only break if the “condition” entered is true(for ex. if a variable is undefined, a number === 0, etc). To add one, add a standard breakpoint and right click.

Navigation

There are generally four main ways to navigate after a breakpoint is hit and they can be found here (you are also likely to have a popup that will include the first two options).

  1. Resume script execution — won’t stop until another breakpoint
  2. Step over next function call — step to the next line of executable code
  3. Step into next function call— similar to step over but it will go into a function if one is called
  4. Step out of current function — returns you to the parent function

Watch

The watch function can be used to highlight any changes your code is making. For example, below I want to see what the name variable and the newTeacher object are after my code is run. You can add things to the watch by right clicking on them in the console-source.

There is obviously quite a lot more that is offered by the Chrome Developer tools but this is a brief intro to what you can use.

The below video was a useful resource and also contains an increasingly disturbing amount of Breaking Bad references. (Best Javascript practices: Don’t do meth!)

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.