javascript - 是否可以将源映射用于 HTML 中的内联 Javascript？

Question

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

我已经尝试了以下 HTML 的一些变体，但是当页面在 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 开发工具中进行调试时，我无法在 Sources 选项卡中打开脚本来设置调试点。我根本找不到剧本。即使检查嵌入脚本的 HTML 页面也无济于事，因为内联脚本不是原始 HTML 源的一部分。加载 HTML 后会添加内联脚本。我相信这就是 PreloadJS通过 XHR 加载 JavaScript。
要解决这个问题，您可以使用 //# sourceURL=someFile.js这会将名称“someFile.js”应用于您的内联脚本。您可以在此处使用任何名称，它不需要是原始来源的名称。
现在，当您在 Sources 选项卡中搜索时，您会发现脚本为“someFile.js”，您可以设置调试点，您将被定向到原始源文件，前提是您的 sourcemap 在 base64 编码之前是正确的。
下面是描述 sourceURL 行为的资源的链接。整篇文章其实真的很有趣。如果你有 5 分钟，请给它阅读。 https://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl
这个 MDN article还显示了 sourceURL 的使用，尽管是在 eval 的 JS 代码中。