是否可以在 HTML 中使用内联 Javascript 的源映射？

Question

是否可以在 HTML 脚本标签中的内联 Javascript 中使用 data-URI 源映射？

\n\n

我已经尝试了以下 HTML 的一些变体，但当页面在 Chrome 中加载时，它们似乎都无法为嵌入的 JS 生成可用的源映射：

\n\n

<script type="text/javascript">\n/* source code... */\n\n//# sourceMappingURL=data:application/json;base64,/* base64\'d inline sourcemap */\n</script>\n

\n\n

我还尝试从生成的源映射中剥离sourcesContent, file, 和sourceRoot，因为我认为这些不适用于这种情况。但这似乎没有帮助。

\n\n

该规范似乎暗示这是可能的，或者至少是考虑过的，因为src简要提到了没有属性的脚本标签：

\n\n

\n

如果生成的代码与 script 元素关联，并且该 script 元素没有 \xe2\x80\x9csrc\xe2\x80\x9d 属性，则源原点将为 page\xe2\x80\x99s 原点。

\n\n

— https://sourcemaps.info/spec.html

\n

\n\n

然而，我很难找到在野外使用这种方法的证据，或者是否有可能。任何人都可以帮助阐明这一点吗？

\n

Answer 1

使用内联脚本，也可以添加内联源映射。它是按照你上面所说的完成的。虽然type="text/javascript"是可选的。

<script type="text/javascript">
/* source code... */

//# sourceMappingURL=data:application/json;base64,/* base64'd inline sourcemap */
</script>

内联源映射后遇到的问题是我的内联脚本是无名的。因此，当尝试在 Chrome 开发工具中进行调试时，我无法在“源”选项卡中打开脚本来设置调试点。我根本找不到剧本。即使检查嵌入脚本的 HTML 页面也无济于事，因为内联脚本不是原始 HTML 源的一部分。加载 HTML 后添加内联脚本。我相信这就是PreloadJS通过 XHR 加载 JavaScript 的方式。

为了解决这个问题，您可以使用//# sourceURL=someFile.js它将名称“someFile.js”应用于您的内联脚本。您可以在此处使用任何名称，不需要是原始来源的名称。

现在，当您在“源”选项卡中搜索时，您将发现脚本为“someFile.js”，您可以设置调试点，并且您将被定向到原始源文件，前提是您的源映射在 Base64 编码之前是正确的。

下面是描述 sourceURL 行为的资源链接。整篇文章实际上非常有趣。如果你有 5 分钟的时间，请读一读。https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl

这篇MDN 文章还展示了 sourceURL 的使用，尽管是在经过评估的 JS 代码中。