关于前端:Chrome-开发者工具-Console-面板里的-VM-是什么含义

45次阅读

共计 1046 个字符，预计需要花费 3 分钟才能阅读完成。

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

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

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

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

有时 V8 没有对于脚本文件名的信息，例如在 eval 的状况下。因而 devtools 应用与脚本 ID 连贯的文本 VM 作为这些脚本的题目。

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

咱们如果间接在 Chrome 开发者工具 Console 面板里应用 console.log 打印，则打印的字符串的左边，也会呈现这些 VMXXXX 的源代码地位：

每当通过 AJAX 加载 HTML 内容并且该内容蕴含 <script> 标记时，脚本将应用 eval() 进行评估，并被 Chrome 的 Sources 视图辨认为以 VM 结尾的新文件。咱们能够转到 网络 选项卡，找到 AJAX 申请，并查看整个 HTML 响应，包含您的脚本。

应用 eval 时，javascript 会被扔进 Chrome 调试器 VM。为了在 Chrome Debugger Sources 下查看应用 eval 创立的 js，请在 js 的开端设置此属性:

//# sourceURL=dynamicScript.js

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

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

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

有两种倡议的办法将源映射链接到输入。第一个须要服务器反对以增加 HTTP 标头，第二个须要在源中增加正文。