JavaScript Debugging

Debugging javascript can be a frustrating task. In this article I have outlined three ways to help you better debug.

First thing is to open up your dev tools in whatever browser you are using. You can do this by either right clicking and selecting inspect, or the keyboard shortcut Cmd + Opt + I on a mac. You can also press F12 which will open you dev tool with the Console tab in focus. The dev tools in your browser is your interface into seeing how your code is executing in the browser.

For the purposes of this article I’m going to focus on using Chrome and the Chrome dev tools.

Method 1: console.log()

The most commonly known Javascript debug method is console.log(). The log method writes a message directly to the console. You can use this to print the values of your javascript variables.

const myFunction = () => {
    // print the value of x with a string label 'x'
    console.log('x', x)

    const number  = myMathFunction(x)
    // print the value of number with a label 'number'
    console.log('number', number)

    const numberPercentage = formatAsPercent(number)
    // print the value of number with a label 'number'
    console.log('numberPercentage', numberPercentage)

    // print my fun string
    console.log('You can just type Hello!!!')

    return numberPercentage

}

In addition to printing your variable value to the console, you can add a little string to name your variable in the console.

You can read more on the console.log() method here https://www.w3schools.com/jsref/met_console_log.asp

Method 2: Breakpoints

You can set breakpoints for your Javascript code in your dev tools. You can do this in Chrome

• Go to the Source tab in your Inspect.
• Navigate to the your Javascript file and the code.
• Then click on the line of code number that is to the left of your code. This will add a break point in your browser for that line of code, so when you refresh it will pause your code on that line.
• You the press the play button to have your code continue running.

As you can see in the video while the code is stopped at the breakpoint, you can use the console to show you the value of your variables. In some cases you can also hover over the variable in the lines of your code to see a tooltip display with the value.

Chrome also does a cool thing by letting you add conditional breakpoints. You can read more about that and line break points here https://developer.chrome.com/docs/devtools/javascript/breakpoints/

Method 3: Debugger (my fav <3)

The last method is actually adding debugger to your code in your editor. This adds breakpoints to your code no matter which browser you use. You just need the dev tools for your browser open and as the code runs it will stop at the line you added the debugger

const myFunction = () => {
     const number  = myMathFunction(x)
     debugger

     const numberPercentage = formatAsPercent(number)
     debugger

    return numberPercentage
}

As you can see in the video the code stops at the lines with debugger. You can press the play button in your dev tools to continue running your code. The debugger behaves exactly as it would if you had added breakpoints in the Chrome dev tools.

You can also see that beyond just printing my variable value, in the above example I also called my function formatAsPercent() directly in the console. As long as the debugger is set after you have defined your function you can then call that function in the console. You can also call other native Javascript methods like .map() or .filter().

The reason I personally love this method is that when working with Javascript frameworks like React this is a more reliable way of pausing my code at every re-render. console.logs() can print way too many times sometimes when React re-renders a component multiple times too quickly. This makes it harder to clearly notice a difference in the variable values or figure out when exactly the value changed.

The debugger stops the code at on that line every time the code is re-run. It will pause on every re-render of that component. This means on every re-render I can be sure my variables have the correct values and know when my variable has changed. I can also quickly test out different Javascript methods on my variable directly in the console before committing to my code in my editor.

You can read more about the debugger method here https://www.w3schools.com/js/js_debugging.asp

With the above methods debugging in Javascript can be a less frustrating experience. Happy debugging!