Showing JavaScript exception message in Chrome dev tools

Question

I'm using Chrome development tools to debug my JavaScript. When I tell Chrome "Not to pause on exceptions" and load my script, I get an intelligible description of what went wrong with the correct line highlighted:

var back_buffer = goog.dom.getElement('back_buffer').getContext('2d');
  --> "Uncaught TypeError: Cannot call method 'getContext' of null"

OK, it makes sense: there's a typo in the name of my canvas element so 'getElement' returns null.

Now on to my question: when I tell Chrome to 'pause on uncaught exceptions', it still correctly highlights the offending line in my script, but now the nice, intelligible error descriptions is gone! How come? Even in debug mode I'd like to see the error message because it's very helpful. I poked around but couldn't find it anywhere.

Anybody could help here?

Answer 1

There does not appear to be good way to do this currently. This is the closest you can get:

Answer 2

The error is not showing because the execution of that script is paused just before it goes into the exception.

It's pausing right before the error so you can debug some things in the console. What i tend to do in the situation you talk about, and the scope variables are not giving any more info, is add some watch expressions or execute some commands in the console.

In your back_buffer case you could for instance add a watch expression like this goog.dom.getElement('back_buffer') so you could see what it resolves to. If that expression causes an error you will see the error message there like you would after the script error occurred.

It might not be completely obvious to some people that when script execution is halted the execution context is the same as the execution context of the script at the time it paused, so all local variables are accessible in the console to console.log() or console.dir() or anything.

When you have pretty print set to on there will be not that much going on on that one line it paused at so mostly you shouldn't have to search for long to get an idea of what's causing the error and why.

Hope it helps, PM5544.

Answer 3

执行后，您应该能够在有问题的源代码行下方的红色气泡消息中看到相同的文本。

Answer 4

Just do one more 'Step' and the red bubble will appear. This is logical as it pauses before the error/bubble behavior happens.

Answer 5

What if you catch the exception and send it to the log:

try
  {
       var back_buffer = goog.dom.getElement('back_buffer').getContext('2d');
  }
catch(err)
  {
        console.log(err);
  }

Once in the console you can examine the object in more detail.