如何使用源地图寻找微小的错误 [英] How to use source map to find minification error

问题描述

我角度和RequireJS工作。我试图用RequireJS优化，现在我的应用程序不能正常工作。我相信这是由于微小。

未捕获的错误：[$喷油器：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)

该错误信息是不是非常有帮助找到这个问题，所以我想知道我怎么可以使用源地图查明错误原始出处code。我使用Chrome进行调试。

编辑：完整的错误堆栈跟踪

 未能实例由于模块的myapp：
错误：[$喷油器：unpr] http://errors.angularjs.org/1.2.0rc1/$injector/unpr?p0=e
    在错误（小于匿名＆GT;）
    在http：//本地主机：8080 / Web应用程序/应用程序/主built.js：3：19581
    在http：//本地主机：8080 / Web应用程序/应用程序/主built.js：3：31899
    在N（HTTP：//本地主机：8080 / Web应用程序/应用程序/主built.js：3：30540）
    在Object.r [如调用（HTTP：//本地主机：8080 / Web应用程序/应用程序/主built.js：3：30716）
    在http：//本地主机：8080 / Web应用程序/应用程序/主built.js：3：30147
    在Array.forEach（原生）
    在O（HTTP：//本地主机：8080 / Web应用程序/应用程序/主built.js：3：19891）
    在我（的http：//本地主机：8080 / Web应用程序/应用程序/主built.js：3：29951）
    在YT（HTTP：//本地主机：8080 / Web应用程序/应用程序/主built.js：4：10
 




解决方案

下面是应该让它为你工作的步骤：

1. 在Chrome的开发者工具点击设置图标（右下角）。


2. 在设置对话框中，选中启用源图。


3. 打开你想要的网页调试。


4. 打开开发人员工具（在这种新的标签）


5. 重新加载页面
   
   
   
   • 是很重要的，否则，Chrome将无法下载映射文件。
   
   


6. preSS要检查错误链接
   
   
   
   • 这是对你的错误的权利，即 main.js：12
   
   


7. 就是这样。你现在应该重定向到人类可读的，不缩小的版本的脚本。

如果源映射仍然不工作：

1. 确认缩小的JS文件包括，在最底层，是这样的：

   //＃sourceMappingURL = main.js.map




2. 确认映射文件正在下载。它应该在开发者工具的网络部分中列出页面重载期间下载。它应该是这样的：

   




3. 也许RequireJS的微小条从你的输出JS文件中的 sourceMappingURL 对此有何评论？

   请确保您使用 uglify2 方法，并已启用 generateSourceMaps 选项。下面是我咕噜 requirejs 目标配置的相关部分：

  requirejs：{
  编译：{
    选项​​：{
      / *一些其他的选择在这里* /
      优化：'uglify2'，
      LOGLEVEL：0，
      preserveLicenseComments：假的，
      generateSourceMaps：真
    }
  }
}
 

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

解决方案

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
    }
  }
}

这篇关于如何使用源地图寻找微小的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！