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

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

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

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


image.png


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


image.png


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


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


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


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


image.png


每当通过 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 的条件编译冲突并被更改为 //#。工具也接受 //@ 是合理的,但首选//#.



相关文章
|
3月前
|
Web App开发 缓存 监控
如何使用 Chrome DevTools 的 Performance 面板进行页面加载性能分析?
如何使用 Chrome DevTools 的 Performance 面板进行页面加载性能分析?
|
4月前
|
Web App开发 存储 前端开发
深入探索Chrome开发者工具:开发者的利器
Chrome DevTools是Chrome浏览器内置的网页开发与调试神器,包含元素检查、网络请求分析、性能监控和JavaScript调试等功能。可通过快捷键F12或菜单打开。主要面板有:Elements(查看编辑HTML/CSS),Console(运行JS代码及查看日志),Network(分析网络请求),Performance(优化网页性能)和Application(管理应用数据)。高级功能包括断点调试、网络限速和屏幕模拟,助力高效开发和调试。
61 0
|
5月前
|
Web App开发 数据采集 JavaScript
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
Chrome开发者工具探秘:元素面板的神奇魔法与实战解析
67 0
|
2月前
|
Web App开发 监控 前端开发
重磅! Chrome开发者工具入门
重磅! Chrome开发者工具入门
|
3月前
|
Web App开发 存储 缓存
Chrome开发者工具学习
Chrome开发者工具学习
|
5月前
|
Web App开发 前端开发 JavaScript
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
关于 Angular template 文件在 Chrome 开发者工具调试器里的断点问题
|
5月前
|
Web App开发 缓存 JavaScript
Chrome 开发者工具 Request content was evicted from inspector cache
Chrome 开发者工具 Request content was evicted from inspector cache
|
5月前
|
Web App开发 前端开发 JavaScript
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
在 Chrome 开发者工具里配置哪些类型的 JavaScript 文件应该被调试器忽略
|
5月前
|
Web App开发 前端开发 JavaScript
Chrome 开发者工具的 sources 面板中的 Show ignore-listed frames 开关
Chrome 开发者工具的 sources 面板中的 Show ignore-listed frames 开关
|
5月前
|
Web App开发 前端开发 JavaScript
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法
防止你的 Web 应用被别人通过 Chrome 开发者工具进行调试的一种简单办法

热门文章

最新文章

下一篇
无影云桌面