Chrome 开发者工具里依据关键字搜寻,后果列表里的 JavaScript 文件名前面跟的 '?eval' 是什么含意?

ChatGPT 的解答:

在Chrome开发者工具中,当你在Sources选项卡下应用关键字搜寻时,可能会看到一些JavaScript文件名前面带有"?eval"。这通常示意这些JavaScript代码是在运行时动静生成的,而不是来自于一个独立的文件。具体来说,"?eval"是一种用于标识在Chrome DevTools中动静生成的JavaScript代码的约定,它示意这段代码是通过调用JavaScript的eval()函数或者相似的函数来执行的。

eval()函数是一种在运行时执行动静生成的JavaScript代码的形式,它承受一个字符串作为参数,该字符串蕴含要执行的JavaScript代码。因为eval()函数能够执行任意JavaScript代码,包含动静生成的代码,因而这种技术被宽泛用于开发一些动静生成的应用程序。

在Chrome DevTools中搜寻JavaScript代码时,如果发现某个JavaScript代码段的文件名带有"?eval"后缀,则意味着这段代码是动静生成的。在这种状况下,DevTools会将这些代码片段视为独立的文件,并在搜寻后果列表中将其列出。因为这些代码片段没有独立的文件名,因而DevTools将它们的文件名设置为"?eval",以示区别。

看我在 Chrome 开发者工具里搜寻 SAP UI5 的 bindingParser 实现,能看到 XXX-dbg.jsXXX-dbg?eval 总是成对呈现:

这让我联想到了 Chrome 开发者工具 Console 面板的 VM:Virtual Machine

在Chrome开发者工具的Console面板中,VM指的是"Virtual Machine"(虚拟机)的缩写。当你在Console面板中输出一些JavaScript代码并运行时,Chrome会在一个称为"Execution Context"(执行上下文)的环境中执行该代码。这个执行上下文会创立一个虚拟机,也就是VM。

虚拟机是一个在内存中模仿计算机系统的程序,它能够运行代码并模仿硬件资源(如CPU、内存、硬盘等),同时提供一种平安隔离的形式来运行代码。在Chrome中,每个选项卡和框架都有一个独立的虚拟机实例,能够用于在该选项卡或框架中执行JavaScript代码。

当你在Console面板中运行JavaScript代码时,这些代码会在以后选项卡或框架的虚拟机中执行。如果你在多个选项卡或框架中关上了开发者工具并应用Console面板,你可能会看到多个VM实例,每个实例都对应一个选项卡或框架的虚拟机。这些VM实例会依照它们所属的选项卡或框架进行编号,例如"VM123"、"VM234"等等。