如何使用源映射查找缩小错误

Question

我使用Angular和RequireJS.我尝试使用RequireJS优化,现在我的应用程序无法正常工作.我确信这是由于缩小.

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)

错误消息对查找问题没有多大帮助,所以我想知道如何使用源映射来查明原始源代码中的错误.我用Chrome来调试.

编辑:完整错误堆栈跟踪

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

以下是使它适合您的步骤:

1. 在Chrome的开发者工具中,点击设置图标(右下角).
2. 在设置对话框中,选中"启用源映射".
3. 打开要调试的网页.
4. 打开开发人员工具(在此新标签中)
5. 重新加载页面
   • 这很重要,否则Chrome将无法下载地图文件.
6. 按您要检查的错误链接
   • 这是你错误的右边,即main.js:12.
7. 而已.您现在应该被重定向到您的脚本的人类可读,非缩小版本.

如果源地图仍然无效:

1. 确保缩小的JS文件在最底部包含:

   //# sourceMappingURL=main.js.map

2. 确保正在下载映射文件.它应该在开发人员工具的"网络"部分列出,在页面重新加载期间下载.它应该如下所示:

   

3. 也许RequireJS的缩小消除了sourceMappingURL输出JS文件中的注释？

   确保您使用的uglify2方法已启用generateSourceMaps选项.以下是requirejsGrunt的目标配置的相关部分:

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