I'm using SystemJS and Babel to transpile ES6 code.
If I put a console.log
in my code, in the Chrome Developer Tools' console I see a link to the original file thanks to the sourcemaps (i.e.: main.controller.js:9
).
If I throw an Error
in the code, though, the stack trace in the console points me to the transpiled code instead (i.e.: main.controller.js!transpiled:20:17
).
Is this the expected behaviour or is there a problem with my sourcemaps?
Yes, this is expected behavior. Stacktrace behavior isn't part of the ES6 spec, it's more of a defacto standard that has been settled on. The exact behavior when sourcemaps are involved is kind of up to the developer and the browser.
Chrome specifically will read the sourcemap of a file and show mapped information when displaying an uncaught exception in the console, and when displaying information about the current execution trace when at a breakpoint and stepping through code. The .stack
value of an error, which you get if you do console.log
, is not translated by Chrome and will reference the transpiled output locations.
There are projects like https://github.com/evanw/node-source-map-support which attempt to override Chrome's default .stack
behavior to convert references to point at the original file. This module is used often when developing for Node since Node does not do any sourcemap processing of its own.