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 pletely 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?

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 pletely 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?

• javascript
• uglifyjs
• source-maps

Share Follow edited May 13, 2015 at 10:13 mico 12.8k1212 gold badges6262 silver badges101101 bronze badges asked May 5, 2015 at 4:50 Kris EricksonKris Erickson 33.9k2626 gold badges121121 silver badges179179 bronze badges 3

• Have you tried jsbeautifier – Diego ZoracKy Commented May 8, 2015 at 3:18
• @DiegoZoracKy I don't want to prettify the source, I have the source and the map, I want to determine where in the source the error occurred. – Kris Erickson Commented May 9, 2015 at 18:02
• Have you run jshint over it? Often problems with things like missing semi-colons only show up in minified code and can be a bit unpredictable. Sorry I know that doesn't help your original question but I thought I'd throw it in as it might make your problem go away if you haven't done this already. – garryp Commented May 12, 2015 at 23:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6 +50

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

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./kriserickson/sourcemap-translator.

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

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

Whole mand looks like:

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

More info:

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