Lesson Wednesday

At the end of the last lesson, we discovered that our buggy Madlibs project has another issue: if we fill out our Madlibs form and submit it, nothing happens.

In this lesson, we'll cover a new debugging tactic: pausing on exceptions. We can use the DevTools console to pause our code whenever it hits an exception - which is just a slightly fancier name for an error.

Let's return to DevTools. This time, we'll click on the Sources tab. Click the button on the top right that looks like an octagon with a pause button. If we click the octagon, it turns blue. An checkbox that reads "Pause on caught exceptions" will show up just below the octagon. Make sure this box is checked. The GIF below shows exactly where it is if DevTools is at the bottom of the Chrome dock.

This GIF shows the pause on exception button being clicked.

Note: We generally show content with the DevTools pane at the bottom of the browser window. However, the default is on the right side. You can change it by clicking on the three vertical dots in the upper right corner and clicking the Dock side icon of your choice as shown in the GIF below:

Click on three vertical dots to pick a Dock side option.

If you decide to keep the dock on the right, note that the "Pause on caught exceptions" octagon will be in the lower left pane.

Now that we are set to pause on exceptions, let's try submitting our form again.

Image shows page paused on exceptions.

There's a lot of new information here. At the top of the screen, there's a message that says "Paused in debugger."

The paused in debugger message includes two icons to the right.

When we pause on caught exceptions, we are using DevTool's debugger, a very powerful tool that we can use to pause code wherever we like. In this case, DevTools is pausing the code because we've told it to. We will be discussing this tool more in a moment.

For now, the key thing to note is the error that shows up in the Paused on Exception pane:

Error shows up in red in. Error is spelled out below image.

We get two pieces of important information here. The first shows up in red and is the error itself:

TypeError: $(...).sho is not a function

It's another typo! jQuery doesn't have a sho() method - it should be show() instead.

The next piece of information is the stack trace. This traces where the error came from - from the depths of jQuery trying to execute our code all the way up to the code we wrote. The top line tells us exactly where the error is: scripts.js:10. That means the error happens in line 10 of our scripts.js file. If we go to line 10, we can easily fix the error. Let's do that now.

We don't need to worry about the next two lines of the stack trace. When we debug (and not just in JavaScript but other languages), we'll almost always focus on the first line of the stack trace because that will show us the error in our code.

We've fixed another bug and it would be great to see if our code is working. But it's currently paused. How do we get out of this debugger screen?

We need to click the little blue arrow, which lives in two places on our debugger screen. The first is at the top of the screen:

The paused in debugger message includes two icons to the right.

If we click the arrow, it will take us to the next caught exception. However, when we are paused on caught exceptions, we might find our code pausing on exceptions that have nothing to do with our code, which means we need to click the arrow again. In our case, we'll see jQuery throwing exceptions as well. Sometimes this can be part of the stack trace of an error that originates in code we wrote, but more often it's an exception that a jQuery file is raising that doesn't have anything to do with our code.

Generally, we want to avoid this external noise. We want to focus on what's happening in our script, not what's happening in the external libraries we are using. We can tell DevTools to ignore jQuery (or other external libraries we are using) by right-clicking on the paused script and selecting "Blackbox Script."

We can blackbox a script by right-clicking on the script and selecting "Blackbox Script."

All the code will still run (after all, we need jQuery for our application to work), but DevTools won't pause on exceptions. If you do blackbox a script, just make sure that you aren't blackboxing a script with code you've written. You can right-click on a blackboxed script and click "Stop Blackboxing" if needed.

If we have a lot of exceptions and we want to resume execution without stopping on future exceptions, we can use the blue arrow on the DevTools pane. Here's a GIF that illustrates how to use it:

Click the little gray arrow at the bottom right of the blue arrow to resume execution without stopping on exceptions.

If we just click on the arrow, it will go to the next exception, which is annoying and inconvenient. Instead, we can click on the little gray arrow in the bottom right corner of the icon. This will show a triangle icon (the universal symbol for play - going at least as far back as VCRs). If we click on that, it will resume execution of the code without stopping on every single caught exception.

At this point, we should unclick the "Pause on Exception" checkbox. While it's a very useful tool, it can be irritating to pause on exceptions when we are looking at other things in our code.

In fact, the bug we just fixed will also trigger an error message in the console that pinpoints both the error and the line number - we don't even need to pause on exceptions to help troubleshoot this particular example.

Even though we've fixed another bug, our code still isn't working. It's time to try something else. In the next lesson, we'll learn how to use console.log() to log statements to the DevTools console.

Pausing on Exceptions

  • You can check the pause on exceptions by clicking on the Sources tab and then clicking the button on the top right that looks like an octagon with a pause button. (The octagon will turn blue.) Check the checkbox that reads "Pause on caught exceptions" below the octagon.

  • You can change the position of the DevTools dock by clicking the three vertical dots in the upper right corner and clicking the Dock side icon of your choice.

  • Pausing on exceptions pauses the code whenever an exception is thrown. This can help us find errors in our code.

  • A stack trace traces where an error comes from. We can see the stack trace of an exception below the "Pause on caught exceptions" option.

  • You can resume execution of code by clicking on the little blue arrow. A single click takes you to the next caught exception. Alternatively, you can click on the little arrow just below the blue arrow and click "Play" to complete execution of the code without pausing on other exceptions.

  • If jQuery or another external library throws an exception, you can right click on the script in the "Sources" pane and select "Blackbox Script." DevTools will no longer pause on caught exceptions in this script. This is especially useful with jQuery. To undo this, right click the script and click "Stop blackboxing."

  • You should use the "Pause on Exception" option only when we need it - otherwise, your code will pause even on exceptions that aren't helpful for debugging (such as errors in the source code of libraries you are working with).

Lesson 44 of 61
Last updated January 20, 2021