CODEWITHSUNDEEP
google-chromecoffeescriptgoogle-chrome-devtoolsbrowserifysource-maps
Brian M. Hunt
Brian M. Hunt

Reputation: 83818

Get Chrome stack trace of error object relative to sourceURL

When using Chrome I am getting an error via the Mocha test runner, captured as part of afterEach with this.currentTest.err.

I am compiling coffeescript with browserify with the debug option using the awesome coffeeify plugin. This produces a single compiled file bundle.js with a sourceMappingURL=data:... that allows me to view and debug the original coffeescript directly.

Unfortunately when I access the err.stack in the afterEach Mocha hook, the stack contains references to bundle.js and not the corresponding .coffee files, which would be much more useful.

Here is some sample code with browserify.

First, installing it (for convenience) with npm:

$ npm install -g browserify; npm install coffeeify

x.coffee

try
  throw Error("Thrown.")
catch err
  console.log err.stack

Convert to x.js with:

$ browserify -t coffeeify x.coffee -d > x.js

x.html

<html>
 <head>
   <script src='x.js'></script>
 </head>
 <body></body>
</html>

If one opens this in Chrome the dev tools will show x.js, x.coffee (from the sourceMapURL) and x.html.

When we run this HTML page we get the following output to the console:

Error: Thrown.
    at Error ()
    at Object. (file://localhost/Users/bmh/tmp/x.js:5:9)
    at i (file://localhost/Users/bmh/tmp/x.js:1:219)
    at err (file://localhost/Users/bmh/x.js:1:382)
    at file://localhost/Users/bmh/tmp/x.js:1:400

What we would expect is to have the trace refer to the .coffee file, looking something like this (which I am making up here for illustrative purposes):

Error: Thrown.
    at Error ()
    at Object. (file://localhost/Users/bmh/tmp/x.coffee:2:5)

Has anyone had any success converting the error stack to one that refers to the items at their source map locations?

Upvotes: 1

Views: 572

Answers (1)

constexpr
constexpr

Reputation: 1041

I'm not sure about coffeeify, but the source-map-support module adds .stack support for code bundled with browserify. Just npm install source-map-support and put require('source-map-support').install() at the top of your code.

Upvotes: 1

Related Questions