Understanding Stack Traces of Chrome Developer Tools

One of the biggest challenges in JavaScript development is dealing with script errors. Here're the five features of Google Chrome Developer Tools that can help you work with exceptions and stack traces more efficiently:"Exception call stack. When something goes wrong, you can open the developer tools console. There you'll find a number of uncaught JavaScript […]

One of the biggest challenges in JavaScript development is dealing with script errors. Here're the five features of Google Chrome Developer Tools that can help you work with exceptions and stack traces more efficiently:

  • "Exception call stack. When something goes wrong, you can open the developer tools console. There you'll find a number of uncaught JavaScript exception messages there. Each message has a link to the file name with the line number you can navigate to. However, there might be several execution paths that lead to the error and it's not always obvious which one of them has happened. Exceptions in the console are now accompanied with the complete JavaScript call stacks after the developer tools window has been opened.
  • Pause on exception. The developer tools' Scripts panel enables you to pause JavaScript execution each time an exception is thrown and inspect its call stack, scope variables and state of your app. You can choose whether to pause only on uncaught exceptions or on all exceptions.
  • Logging stack traces. Printing log messages to the developer tools console is also very helpful in understanding how your app behaves. Now you can make the log entries even more informative by including associated stack traces. You can instrument your code with console.trace() calls that would print current JavaScript call stack. Moreover, you can check that some invariants are true using console.assert() which prints a full stack trace when its conditional expression passed as first parameter evaluate to false.
  • Error.stack. Each Error object has a property named "stack" that contains the stack trace.
  • Handler function for window.onerror. Recently added support for setting a handler function to window.onerror. Whenever a JavaScript exception is thrown in the window context and isn't caught by any try/catch block, the function will be invoked with 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 convenient to set an error handler that would collect info about uncaught exceptions and report it back to your server," explains Google.

More Info: Google Chrome Developer Tools | WebKit blog post