Lesson Wednesday

At the end of the last lesson, we discovered that our buggy Mad Libs project has another issue: if we fill out our Mad Libs 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. A checkbox that reads Pause on caught exceptions will show up just below the octagon. Do not check this box. It will show you the entire stack trace of any errors, including the trace in jQuery and other files we aren't directly working on, which is too much information and can be confusing. 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 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 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 the _Sources_  pane. 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 exception.

Before we move on, let's briefly discuss what happens if we click the checkbox that reads Pause on Caught Exceptions. If we click that and try to find the error again, we'll see jQuery throwing exceptions as well.

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 selecting the script we want to ignore in Sources, right-clicking on the code (not the file itself), and selecting Add script to ignore list.

We can ignore a script by opening the script in _Sources_, right-clicking on the code, and selecting _Add script to ignore list_.

All the code will still run (after all, we need jQuery for our application to work), but DevTools won't pause on exceptions in the ignored file. If you do ignore a script, just make sure that you aren't ignoring a script with code you've written. You can right-click on a ignored script and click Remove script from ignore list if needed.

To keep things simpler, we recommend not checking the Pause on caught exceptions box like we recommended at the beginning of the lesson. Regardless, it's still helpful to know what happens when we click that box and how we can ignore files as 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 click on the script in the Sources pane, then right-click on the code (not the file itself), and select Add script to ignore list. 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 Remove from ignore list.

  • 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 48 of 65
Last updated May 23, 2022