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

Question

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

我尝试了以下 HTML 的一些变体，但其中 none 似乎在 Chrome 中加载页面时为嵌入式 JS 生成了可用的源映射:

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

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

我还尝试从生成的源映射中删除 sourcesContent、file 和 sourceRoot，因为我认为这些不适用于这种情况。不过好像也没什么用。

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

If the generated code is associated with a script element and the script element does not have a “src” attribute, then the source origin will be the page’s origin.

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

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

Answer 1

使用内联脚本，也可以添加内联源映射。正如你上面所说的那样完成的。尽管 type="text/javascript" 是可选的。

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

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

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

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

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

下面是描述 sourceURL 行为的资源的 link。整篇文章实际上真的很有趣。如果你有 5 分钟，请阅读它。 https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl

这个 MDN article 也显示了 sourceURL 的使用，尽管是在 eval'd JS 代码中。

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

Is it possible to use sourcemaps for inline Javascript in HTML?

javascript

google-chrome-devtools

source-maps