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

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的缩小会从输出JS文件中删除sourceMappingURL注释？

   确保您使用的是uglify2方法，并且您已启用generateSourceMaps选项。以下是来自Grunt的requirejs目标配置的相关部分：

的

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