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

简介: 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 标头,第二个需要在源中添加注释。


  1. HTTP 标头应提供源映射 URL 参考:SourceMap: <url>

注意:本文档的先前版本建议标题名称为 X-SourceMap. 现在已弃用;现在需要 SourceMap。


  1. 生成的代码可能在源代码末尾包含一行,格式如下:

//# sourceMappingURL=<url>


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



相关文章
|
6月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
59 1
|
3月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
25 0
|
3月前
|
Web App开发 存储 缓存
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
Chrome 开发者工具 Network 里 Failed to load response data 提示消息的含义
144 0
|
1月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
30 0
|
3月前
|
Web App开发 前端开发 JavaScript
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
使用 Chrome 开发者工具分析 UI5 Web 应用的性能
33 0
|
5月前
|
Web App开发 SQL Linux
使用 Chrome 开发者工具获取网站的 LCP 数据
使用 Chrome 开发者工具获取网站的 LCP 数据
54 0
|
5月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 开发者工具去除某些网站上无法关闭的模态对话框
使用 Chrome 开发者工具去除某些网站上无法关闭的模态对话框
39 0
|
2月前
|
Web App开发 JavaScript 前端开发
从零开始,轻松打造个人化Chrome浏览器插件
从零开始,轻松打造个人化Chrome浏览器插件
73 0
|
4月前
|
Web App开发 JavaScript
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
Vue 项目中使用 debugger 在 chrome 谷歌浏览器中失效以及 console.log 指向去了 vue.js 代码
308 0
|
3月前
|
Web App开发 前端开发
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
Chrome 浏览器插件 V3 版本 Manifest.json 文件中 Action 的类型(Types)、方法(Methods)和事件(Events)的属性和参数解析
156 0