Chrome 和 Firefox 源地图不工作答案

【问题标题】：Chrome and Firefox Sourcemaps Not WorkingChrome 和 Firefox 源地图不工作
【发布时间】：2016-01-26 02:29:12
【问题描述】：

Sourcemaps 似乎已停止在 Chrome 和 Firefox 中为我工作。浏览器显示源文件名。当我单击该文件时，我收到此消息，Cannot GET /.tmp/includes/jsbin/marketing.js。 Marketing.js 是源文件的名称。对于每个源文件，我都会收到相同的消息。

我使用 Grunt 作为我的任务运行器。这是工作流程。

Babel 将我的 javascript 转换为 .tmp 文件夹。
Uglify 对 .tmp 文件夹中的 javascript 文件进行合并和缩小，并将它们输出到 dist 文件夹。
Uglify 创建一个 sourcemap 文件。

当我查看源映射文件时，它具有指向 .tmp 文件夹中源文件的正确路径。

{"version":3,"sources":["../../../.tmp/includes/jsbin/check_compat.js","../../../.tmp/includes/jsbin/marketing.js"],

这对我来说是一个新的工作流程。在其他项目中，当我不使用 babel 时，一切正常。我在最新版本的 Chrome 和 Firefox 中遇到了这个问题，甚至是这些浏览器的金丝雀版本。

babel任务没有concat。

2015 年 10 月 27 日更新

由于某种原因，.tmp 文件夹没有得到服务。所以浏览器从 sourcemap 中看到源文件存在，但源文件是空的，因为服务器不提供它。

这是我的繁重任务：

config: {
    app: 'app',
    dev: 'dev',
    dist: 'dist',
    tmp: '.tmp'
},
dist: {
    options: {
        base: ['<%= config.tmp %>', '<%= config.dist %>'],
        open: {
            target: 'http://localhost:<%= connect.options.port %>?envMode=apiary&testing=true'
        }
    }
}

您可以在开发工具中查看文件。

如果我右键单击文件并选择“在新选项卡中打开链接”，我会收到错误消息 Cannot GET /.tmp/includes/jsbin/check_compat.js

【问题讨论】：

标签： javascript gruntjs babeljs source-maps

【解决方案1】：

你的 js 文件底部有正确的引用吗？

应该是这样的：

//# sourceMappingURL=main.js.map

【讨论】：