Chrome 开发者工具 Console 面板里的 VM 是什么含义
例子:我在 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 标头,第二个需要在源中添加注释。
- HTTP 标头应提供源映射 URL 参考:
SourceMap: <url>
注意:本文档的先前版本建议标题名称为 X-SourceMap
. 现在已弃用;现在需要 SourceMap
。
- 生成的代码可能在源代码末尾包含一行,格式如下:
//# sourceMappingURL=<url>
注意:这个注解的前缀最初是 //@
,但是这与 Internet Explorer 的条件编译冲突并被更改为 //#
。工具也接受 //@
是合理的,但首选//#
.
相关文章
- 谷歌Chrome浏览器开发者工具的基础功能
- 谷歌Chrome浏览器开发者工具的基础功能
- 38. 使用 Chrome 开发者工具查看 SAP UI5 程序执行出错时的上下文信息
- 使用 Chrome 开发者工具分析 SAP UI5 应用的 JavaScript 代码执行性能瓶颈
- Chrome 开发者工具 network 显示 Provisional headers are shown 的几种原因
- 如何给 Chrome 开发者工具设置 Material Design 风格的主题外观
- Chrome开发者工具network标签页里的transferred over network和resources loaded by the page的区别
- 一串最简单的JavaScript代码,在Chrome开发者工具调试器里触发VM8标签的出现
- 使用 Chrome 开发者工具的 Memory 标签页分析内存泄漏问题
- 使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
- Chrome 开发者工具 live expression 的用法
- Chrome开发者工具Element style里的Computed标签页
- 使用 Chrome 开发者工具研究一个基于 Angular 开发的网站源代码
- Windows上Chrome被“毒霸网页“劫持启动页解决方式