External Source Map Tool

Question

I have a minimized file in production, with a an error handler that logs the errors, as well as the source map that was generated when I minified the file, however I have no way to map the errors to my source file since the errors are in a log and do not occur in a chrome or firefox where minified files and sourcemaps are easily consumed. Is there an app or a tool that will convert the error reporting from the minified file using the source map I have generated to the location in the original unminified files? So to be completely clear I have

dist.min.js

which is made up of several js files concated and then minified with uglify.js. I have

dist.min.js.map

which is the mapfile generated when the uglify minified the file. What I need to do is take the error

ERROR: Uncaught TypeError: Cannot call method 'indexOf' of undefined, dist.min.js:1 "TypeError: Cannot call method 'indexOf' of undefined at distmin.js:1:21815 at ab.event.dispatch (dist.min.js:3:25564) at q.handle (dist.min.js:3:22314)"

and figure out where that error is actually happening in my original source code. I know how to use sourcemaps with Chrome, but is there an external tool that will allow me to manually enter the line and column and bring up the location in my source code?

Answer 1

You can use mozilla's source-map library to reverse-map to the original positions, as follows:

var smc = new SourceMapConsumer(rawSourceMap); // <-- put map in there
console.log(smc.originalPositionFor({          // <-- plug positions here
     line: 2, 
     column: 28 
})); 

Output is similar to:

{ 
  source: 'http://example.com/www/js/two.js',
  line: 2,
  column: 10,
  name: 'n' 
}

The example is straight from Mozilla's documentation. The same library is used to generate the source-maps in uglifyjs (links to the Mozilla project when mentioning source-map generation).