首页 > 其他分享 >Chrome 开发者工具 Console 面板里的 VM 是什么含义

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

时间:2022-10-03 22:45:29浏览次数:75  
标签:脚本 Console 映射 Chrome VM js 开发者

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

标签:脚本,Console,映射,Chrome,VM,js,开发者
From: https://www.cnblogs.com/sap-jerry/p/16751492.html

相关文章

  • CentOS7如何进行扩容 - LVM
    CentOS(CommunityEnterpriseOperatingSystem)是Linux发行版之一,它是来自于RedHatEnterpriseLinux(RHEL)依照开放源代码规定发布的源代码所编译而成。由于出自同样的源......
  • jvm 自带调优工具一览
    jdk在安装的时候会提供一些性能分析、故障诊断、JVM监控之类的工具,了解这些工具对我们分析JVM内存、JVM调优有一定的帮助,本篇文章来学习一下。监控类工具jpsjps(JVMProcess......
  • 05_MVVM模型
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>理解MVVM</title><!--引入Vue--><scripttype="text/javascr......
  • 主线程异常会导致 JVM 退出?
     大家好,我是坤哥上周​​线程崩溃为什么不会导致JVM崩溃​​在其他平台发出后,有一位小伙伴留言说有个地方不严谨他认为如果JVM中的主线程异常没有被捕获,JVM还是会崩溃......
  • 002 JVM的类加载机制—— JVM的类加载阶段——双亲委派机制
    1.10.1JVM的类加载阶段JVM的类加载分为5个阶段:加载、验证、准备、解析、初始化。在类初始化完成后可以使用该类的信息,在一个类不再被需要时可以从JVM中卸载。1.10.3......
  • jsvmp_wencai
    网站aHR0cDovL3d3dy5pd2VuY2FpLmNvbS91bmlmaWVkd2FwL2hvbWUvaW5kZXg=直接搜索关键词  下面是要抓取的数据  逆向位置(一个即可)hook到hexin-v的生成地方......
  • 解决谷歌Chrome浏览器内置翻译功能用不了的问题
    解决谷歌Chrome浏览器内置翻译功1.打开“我的电脑”,打开C:\Windows\System32\drivers\etc这个目录文件夹,或者复制这个文件目录路径粘贴到你的“我的电脑”地址栏中,按回车......
  • VMware中Ubuntu扩容
    https://blog.csdn.net/weixin_47306605/article/details/121727192?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2~default~CTRLIST~Ra......
  • 机器学习编译、TVM感性理解
    课程主页首先网上有很多关于这个课程的介绍,所以不直接陈述详细内容了,写一些自己的理解,可能不会仅限于当前机器学习编译课程,可能会用到TVM的理解。网上诸多大佬都有阐述,例......
  • vmstat工具
    ####vmstat命令可以查看到更多的内容,可以通过这个命令查看到系统的瓶颈在哪里#procs-----------表示cpu#memory----------表示内存#---swap--表示虚拟磁盘交换分区#......