In the Console you can track exceptions and trace the execution path that led to them, explicitly or implicitly catch them (or ignore them), and even set error handlers to automatically collect and process exception data.
- Turn on Pause on Exceptions to debug the code context when the exception triggered.
- Place assertions in your code and throw exceptions using
- Log errors happening in the browser using
When something goes wrong, open the DevTools console (
Each message has a link to the file name with the line number you can navigate to.
An example of an exception:
View exception stack trace
Choose to either pause on all exceptions or only on the uncaught ones or you can ignore exceptions altogether.
Print stack traces
Better understand how your web page behaves by printing log messages to the console. Make the log entries more informative by including associated stack traces. There are several ways of doing that.
Each Error object has a string property named stack that contains the stack trace:
Instrument your code with
with the error condition as the first parameter.
When this expression evaluates to false,
you will see a corresponding console record:
How to examine stack trace to find triggers
Let's see how to use the tools you've just learned about, and find the real cause of an error. Here's a simple HTML page that includes two scripts:
When the user clicks on the page,
the paragraph changes its inner text,
callLibMethod() function provided by
lib.js is called.
This function prints a
and then calls
a method not provided by the Console API.
This should trigger an error.
When the page is run and you click on it, this error is triggered:
Click the arrow to can expand the error message:
The Console tells you the error was triggered in
lib.js, line 4,
which was called by
script.js in the
an anonymous function, in line 3.
This is a very simple example, but even the most complicated log trace debugging follows the same process.
Handle runtime exceptions using window.onerror
Chrome exposes the
window.onerror handler function,
is not caught by a try/catch block,
the function is invoked with the exception's message,
the URL of the file where the exception was thrown,
and the line number in that file,
passed as three arguments in that order.
You may find it useful to set an error handler that would collect information about uncaught exceptions and report it back to your server using an AJAX POST call, for example. In this way, you can log all the errors happening in the user's browser, and be notified about them.
Example of using
Was this page helpful?