Chrome 未在内联脚本标记中请求源映射

【问题标题】：Chrome not requesting source map in inline script tagChrome 未在内联脚本标记中请求源映射
【发布时间】：2017-08-12 07:21:38
【问题描述】：

Chrome 没有为我们的 HTML 中内嵌的脚本加载我们的源映射：

<script type="text/javascript">!function t(n,e,r){ /* more code */}()
//# sourceMappingURL=public/js/edit-before.js.map
</script></body>

我知道 Chrome 没有请求源映射，因为我将服务器设置为记录所有请求并检查了 Chrome 网络控制台。我验证了源地图的路径是正确的，浏览器只是没有点击它。

Chrome 是否应该在 script 标签中为 JS 加载源映射？如果是这样，我做错了什么？

【问题讨论】：

标签： javascript web browser source-maps gulp-sourcemaps

【解决方案1】：

对我来说，它目前在 Chrome 中运行（可能不是问题被问到的时候），但在 Firefox 中仍然没有。但是路径必须正确，在这种情况下是绝对 url 或相对 url，相对于脚本标签执行的页面！

因此，拥有public/js/edit-before.js.map 之类的路径和/home/index.html 之类的页面将导致/home/public/js/edit-before.js.map。想象一下，如果你在像/blog/2019/01/01/12345/article.html 这样的页面上使用你的脚本标签会发生什么。那么最好使用https://example.com/public/js/edit-before.js.map。

而且大多数情况下，您必须在浏览器中启用源映射才能看到它们，正如这里有人描述的那样：https://stackoverflow.com/a/37190189/2590616。

【讨论】：