One of the biggest challenges in JavaScript development is dealing with script errors. We’ve been working hard to improve and extend the set of tools that lets you better understand how your JavaScript code works. Let’s have a quick look at 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 application 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 we’ve added support for setting a handler function to window.onerror. Whenever a JavaScript exception is thrown in the window context and is not caught by any try/catch block, the function will be 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 convenient to set an error handler that would collect information about uncaught exceptions and report it back to your server.

For a more complete reference on working with the Google Chrome Developer Tools, check out our home page. We further described improvements to exception handling and stack traces in our recent WebKit blog post.

Posted by Yury Semikhatsky, Software Engineer