尽管存在源地图，Chrome仍未显示未缩小的代码

Question

我正在使用Grunt和UglifyJS为我的AngularJS应用生成源地图。它会生成一个文件customDomain.js和customDomain.js.map。

JS文件

customDomain.js的最后一行如下所示：

//# sourceMappingURL=customDomain.js.map

地图文件

我在customDomain.js内找到两个customDomain.js.map的引用，一个在开头：

"sources":["../../../.tmp/concat/scripts/customDomain.js"]

我觉得这看起来很奇怪所以我把它修剪成：

"sources":["customDomain.js"]

第二个参考文献在最后：

"file":"customDomain.js"

......我原样离开。

测试

当我在Chrome中运行我的应用时，我希望在点击customDomain.js时看到我的开发代码，但我没有：

我可以在我的网络服务器的控制台输出上看到确实从浏览器请求customDomain.js.map：

200 /js/customDomain.js.map (gzip)

缺少什么？

Answer 1

"sources":["customDomain.js"]应该相对到customDomain.map.js文件。
如果是这种情况，请确保它们位于服务器上的同一目录中。

"file":"customDomain.js"应更改为地图文件的名称，在您的情况下，这将是"file":"customDomain.map.js"。

以下是treehouse取得的地图文件示例（sourceRoot在您的情况下可能是不必要的）：

{
    version: 3,
    file: "script.js.map",
    sources: [
        "app.js",
        "content.js",
        "widget.js"
    ],
    sourceRoot: "/",
    names: ["slideUp", "slideDown", "save"],
    mappings: "AAA0B,kBAAhBA,QAAOC,SACjBD,OAAOC,OAAO..."
}