例子：我在 SAP UI5 框架某处代码设置断点，例如 `Device.media.getCurrentRange`：

然后在 Chrome 开发者工具 Console 面板里直接调用这个函数，断点触发：

![](https://img-blog.csdnimg.cn/img_convert/5f54587d60678279290c619ab525ea8d.png)

Chrome 开发者工具里显示 `VM` 加上一串数字：

![](https://img-blog.csdnimg.cn/img_convert/7fb1d72fedbc1b818cbac801f9266324.png)

VM 是短语 Virtual Machine 的缩写。 在 Chrome JavaScript 引擎（称为 V8）中，每个脚本都有自己的脚本 ID。

有时 V8 没有关于脚本文件名的信息，例如在 eval 的情况下。 因此 devtools 使用与脚本 ID 连接的文本 `VM` 作为这些脚本的标题。

一些网站可能会通过 XHR 获取许多 JavaScript 代码并对其进行评估。 如果开发人员想要查看这些脚本的实际脚本名称，她可以使用 sourceURL。 DevTools 解析并将其用于标题、映射等。

我们如果直接在 Chrome 开发者工具 Console 面板里使用 console.log 打印，则打印的字符串的右边，也会出现这些 `VMXXXX` 的源代码位置：

![](https://img-blog.csdnimg.cn/img_convert/ad02fa1274f2da87e9166ae49f1f64fe.png)

每当通过 AJAX 加载 HTML 内容并且该内容包含 `<script>` 标记时，脚本将使用 `eval()` 进行评估，并被 Chrome 的 Sources 视图识别为以 `VM` 开头的新文件。我们可以转到 `网络` 选项卡，找到 AJAX 请求，并查看整个 HTML 响应，包括您的脚本。

使用 eval 时，javascript 会被扔进 Chrome 调试器 VM。 为了在 Chrome Debugger Sources 下查看使用 eval 创建的 js，请在 js 的末尾设置此[属性](https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit#heading=h.lmz475t4mvbx):

`//# sourceURL=dynamicScript.js`

或者，源映射将与生成的文件具有相同的名称，但具有“.map”扩展名。例如，对于“page.js”，将生成一个名为“page.js.map”的源映射。

如何将生成的代码链接到源映射？

虽然源映射格式旨在与语言和平台无关，但为 Web 服务器托管javascript 的预期用例制定一些约定是很有用的。

有两种建议的方法将源映射链接到输出。第一个需要服务器支持以添加 HTTP 标头，第二个需要在源中添加注释。

1. HTTP 标头应提供源映射 URL 参考：`SourceMap: <url>`
 
注意：本文档的先前版本建议标题名称为 `X-SourceMap`. 现在已弃用；现在需要 `SourceMap`。

2. 生成的代码可能在源代码末尾包含一行，格式如下：

`//# sourceMappingURL=<url>`

注意：这个注解的前缀最初是 `//@`，但是这与 Internet Explorer 的条件编译冲突并被更改为 `//#`。工具也接受 `//@` 是合理的，但首选`//#`.

ITPub博客

Chrome 开发者工具 Console 面板里的 VM 是什么含义

最新文章