javascript - 如何使用源图查找缩小错误

我使用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

最佳答案

以下是应使其适合您的步骤:

在Chrome的开发人员工具中，点击设置图标(右下 Angular )。

在设置对话框中，选中“启用源 map ”。

打开要调试的网页。

打开开发人员工具(在这个新选项卡中)

重新加载页面

这很重要，否则Chrome不会下载 map 文件。

按您要检查的错误链接

在您的错误右侧，即main.js:12。

就是这样。现在，您应该被重定向到人类可读的，非缩小版本的脚本。

如果源 map 仍然无法使用:

确保缩小的JS文件的最底部包含以下内容:
//# sourceMappingURL=main.js.map

确保正在下载映射文件。它应该在页面重新加载期间下载的“开发人员工具”的“网络”部分中列出。它看起来应该像这样:

也许RequireJS的压缩方法会从您的输出JS文件中去除sourceMappingURL注释？

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

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

关于javascript - 如何使用源图查找缩小错误，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18610098/