6

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

1 回答 1

7

以下是应该使它为您工作的步骤：

  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选项。这是我requirejs来自 Grunt 的目标配置的相关部分：

requirejs: {
  compile: {
    options: {
      /* some other options here */
      optimize: 'uglify2',
      logLevel: 0,
      preserveLicenseComments: false,
      generateSourceMaps: true
    }
  }
}
于 2013-09-04T10:34:08.910 回答