How to use source map to find minification error

Question

I work with Angular and RequireJS. I tried to use RequireJS optimization, and now my application is not working. I am sure it's due to minification.

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.2.0rc1/$injector/modulerr?p0=myapp&p1=Error%3…t%20(http%3A%2F%2Flocalhost%3A8080%2Fwebapp%2Fapp%2Fmain-built.js%3A4%3A10)

The error message is not very helpful to find the issue, so I was wondering how I can use the source map to pinpoint the error in the original source code. I use Chrome to debug.

Edit: Full error stacktrace

Failed to instantiate module myapp due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.2.0rc1/$injector/unpr?p0=e
    at Error (<anonymous>)
    at http://localhost:8080/webapp/app/main-built.js:3:19581
    at http://localhost:8080/webapp/app/main-built.js:3:31899
    at n (http://localhost:8080/webapp/app/main-built.js:3:30540)
    at Object.r [as invoke] (http://localhost:8080/webapp/app/main-built.js:3:30716)
    at http://localhost:8080/webapp/app/main-built.js:3:30147
    at Array.forEach (native)
    at o (http://localhost:8080/webapp/app/main-built.js:3:19891)
    at i (http://localhost:8080/webapp/app/main-built.js:3:29951)
    at yt (http://localhost:8080/webapp/app/main-built.js:4:10

Answer 1

Here are the steps which should make it working for you:

1. In Chrome's Developer Tools click the settings icon (bottom right corner).
2. In the settings dialog, check "Enable source maps".
3. Open the web page you want to debug.
4. Open the Developer Tools (in this new tab)
5. Reload the page
   • It's important, otherwise Chrome will not download map file.
6. Press the error link you want to inspect
   • It's on the right of your error, i.e. main.js:12.
7. That's it. You should be now redirected to human-readable, non-minified version of your script.

If source maps are still not working:

1. Make sure minified JS file contains, at the very bottom, something like:

   //# sourceMappingURL=main.js.map

2. Make sure mapping file is being downloaded. It should be listed in "Network" section of Developer Tools as downloaded during page reload. It should look like this:

   

3. Maybe RequireJS's minification strips out the sourceMappingURL comment from your output JS file?

   Make sure that you're using uglify2 method and you've enabled generateSourceMaps option. Here is relevant part of my requirejs target config from Grunt:

requirejs: {
  compile: {
    options: {
      /* some other options here */
      optimize: 'uglify2',
      logLevel: 0,
      preserveLicenseComments: false,
      generateSourceMaps: true
    }
  }
}