Using Debugger in Javascript

Slow down time to find out where those bugs are hiding.

Charlotte Pearce
Oct 17 · 4 min read
A monster chewing a computer keyboard.

Using the debugger keyword and Chrome’s dev tools panel, we can step through our code at our own pace and peek in every nook and cranny for those pesky bugs.

Let’s look at a project with some bugs, and try to identify them.

Here I have a Futurama Quotes quiz, using the Futurama API. A quote is rendered to the page, and we should guess which character said that quote. We have a button that we can press, that will reveal the character so we can check our answers!

But it’s currently broken!

Here’s an excellent chance to use the debugger keyword! By looking at the undefined all over the page, I’m worried that the API call might be messed up somehow, so I’ll start by adding the debugger keyword within the function that calls to the API.

Now I’ll refresh the browser page, and open up the Chrome Dev Tools. Here I have access to the console, the HTML elements, and sources tab. There’s a lot more to Dev Tools which I won’t’ cover here, but we will be using the console and sources tab mostly. If I click on the sources tab, I can see my project folders, including my .js document, and currently, I can see the line where I placed the debugger keyword.

By navigating to the transport controls, I can resume, step into the next function, step back a function, step line-by-line, activate/deactivate breakpoints, or pause on exceptions.

For this example, I’ll step through the function call getAllQuotes(), and see what happens…after a couple of steps, the debugger skips to my next function call: renderAllQuotes().

function getAndRenderAllQuotes() {
getAllQuotes() <----- calls the API
.then(renderAllQuotes) <----- renders the quotes to the page
.catch(error => alert(error.message))
}

This tells me there doesn’t appear to be an issue with the API fetch request. If I look in the scope, I can see the response from the Futurama API: an array of 20 quote objects: so the API call is fine!

I can keep stepping through my code, looking at the scope pane for clues. When I step through to the createThenAppendQuoteDiv function, I notice that each element is created, then an attribute from the quote is attached. For example, the image element is created on line 27, and when the src is attached on line 28, I can see that information reflected in the image element. If I inspect each element in this way I notice that the quoteText element on line 25 doesn’t have the content I expected it to have. It says ‘undefined’. This could be the root of our problem!

Taking a closer look, I see that the quoteText.innerText is set to the quote object’s value of key “quoteContent”… unfortunately, if I check the quote object’s key’s I can see “quote”, but not “quoteContent”. I’ll change “quoteContent” to “quote”, and I notice that instead of undefined, the debugger is showing me the value of the quote’s text!

Now, I’ll make my amendment on line 25 back in my text editor, remove the debugger keyword from my file and refresh again. Hopefully, the quiz will work!

Yes! The quiz is working again! I can remove the debugger keywords from my files now.

Hopefully, this highlights a way we can use the debugger keyword to really slow down our code, and slow ourselves down to look at each element to see where the problem lies.

Please clap this post if you found it helpful, and add any questions you may have in the comments section :)

JavaScript in Plain English

Charlotte Pearce

Written by

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade