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. 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.
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:
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.
There's a lot of new information here. At the top of the screen, there's a message that says Paused in debugger.
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:
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
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'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:
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.
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:
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.
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 44 of 61
Last updated March 24, 2021