CODEWITHSUNDEEP
javascriptuglifyjssource-maps
Kris Erickson
Kris Erickson

Reputation: 33844

External Source Map Tool

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?

Upvotes: 9

Views: 3484

Answers (3)

Kris Erickson
Kris Erickson

Reputation: 33844

Since there wasn't a GUI tool already built for this, I quickly built one based on Electron and the Mozilla Source-Map library that @tucuxi pointed out.

You can find it at its GitHub page: https://github.com/kriserickson/sourcemap-translator.

Source Map Translator

Upvotes: 4

tucuxi
tucuxi

Reputation: 17945

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).

Upvotes: 6

mico
mico

Reputation: 12748

Uglify.js has a thing named source map for such functionality. Please use following flag with command:

 --source-map yoursource.min.js.map

Whole command looks like:

 uglifyjs yoursource.js -o yoursource.min.js --sourcemap yoursource.min.js.map

More info:

http://tarantsov.com/WorkflowThu/source-maps-with-coffeescript-and-uglify-js/

Upvotes: 1

Related Questions