window 系统里怎么使用 jsvu 工具快速调试 v8？

jsvu 是什么？

jsvu is the JavaScript (engine) Version Updater. jsvu makes it easy to install recent versions of various JavaScript engines without having to compile them from source.

jsvu 是 JavaScript（引擎）版本更新器。 jsvu 可以轻松安装各种 JavaScript 引擎的最新版本，而无需从源代码编译它们。

支持多种操作系统和多种 JavaScript 引擎，目前为止支持的操作系统和引擎如下：

JavaScript engine	Binary name	mac64	mac64arm	win32	win64	linux32	linux64
Chakra	chakra or ch	✅	❌	✅	✅	❌	✅
GraalJS	graaljs	✅	❌	❌	✅	❌	✅
Hermes	hermes & hermes-repl	✅	❌	❌	✅	❌	✅
JavaScriptCore	javascriptcore or jsc	✅	✅	❌	✅ *	❌	✅
QuickJS	quickjs	❌	❌	✅	✅	✅	✅
SpiderMonkey	spidermonkey or sm	✅	✅	✅	✅	✅	✅
V8	v8	✅	✅	✅	✅	✅	✅
V8 debug	v8-debug	✅	✅	✅	✅	✅	✅
XS	xs	✅ (32)	❌	✅	✅ (32)	✅	✅

安装 jsvu

我们全局安装 jsvu

npm i jsvu -g

执行 jsvu

首次运行时，jsvu 会提示输入操作系统和架构，以及希望通过 jsvu 管理的 JavaScript 引擎列表。 然后它会下载并安装选择的每个引擎的最新版本。选择完之后，jsvu 会记住这次选择，下次再执行时还是会引用上一次的配置，我这里根据我的需求用了下面的配置。

jsvu --os=win64 --engines=v8,v8-debug

查看 jsvu 帮助信息

我们可以通过下面命令去查看帮助信息， --os，以及--engines。

jsvu -h

生成 v8，v8-debug 帮助信息

安装好 v8，v8-debug 之后，我们进入到 C:\Users\guok\.jsvu 目录下，能看到安装好的 cmd 文件。

我们 shift + 右击 打开 powershell，输入下面命令，就会生成一个 v8-help.txt 的文本空文件。

# Linux 里面就是 touch v8-help.txt
ni v8-help.txt

我们接下来把 v8 帮助信息放进去，我们打开 cmd，执行下面命令：

v8 --help >> v8-help.txt

执行完之后，我们发现 v8 的帮助信息存到了 v8-help.txt 记事本里

同样的道理：我们将 v8-debug 的帮助信息也弄成一个 txt 文本

ni v8-debug-help.txt

v8-debug --help >> v8-debug-help.txt

执行完之后，就会生成帮助信息的 v8-debug-help.txt 文本文件

执行 v8，v8-debug

1、直接执行代码

# 可去帮助信息文件里查看命令的作用
-e   execute a string in V8（在 V8 中执行字符串）

我们打开 cmd，然后输入下面代码，发现可以执行出结果

v8 -e "console.log('kaimo666' + Date.now())"

2、直接执行 JavaScript 文件

我们在里面新建一个 kaimo.js 的文件，里面输入代码

console.log('kaimo666' + Date.now())

下面我们执行之这个文件

输入命令，发现也可以执行出来

v8 kaimo.js

注意这里的后缀记得写，不然会读取错误。

跟踪代码执行

1、查看 AST

查看 ast 我们需要用到命令 --print-ast。

v8-debug -e --print-ast "var kaimo = 313"

我们执行完上面的命令就可以看到打印的 AST

2、查看作用域

查看作用域需要用到 --print-scopes 这个命令

我们在 kaimo.js 里使用新的代码

var k = 313
function kaimo(){
    console.log('kaimo777')
}

然后执行下面的命令查看作用域

v8-debug --print-scopes kaimo.js

执行结果如下：可以看到变量在全局作用域里

Inner function scope:
function kaimo () { // (000001F4CAE9B970) (30, 66)
  // NormalFunction
  // 2 heap slots
}
Global scope:
global { // (000001F4CAE9B6C0) (0, 66)
  // will be compiled
  // NormalFunction
  // 1 stack slots
  // temporary vars:
  TEMPORARY .result;  // (000001F4CAE9BBD0) local[0]
  // local vars:
  VAR kaimo;  // (000001F4CAE9BB40)
  VAR k;  // (000001F4CAE9B8E0)

  function kaimo () { // (000001F4CAE9B970) (30, 66)
    // lazily parsed
    // NormalFunction
    // 2 heap slots
  }
}

3、查看生成的字节码

查看生成的字节码需要用到 --print-bytecode（打印解释器生成的字节码）

v8-debug -e --print-bytecode "var kaimo = 666"

执行结果如下：

[generated bytecode for function:  (0x00c700253595 <SharedFunctionInfo>)]
Bytecode length: 20
Parameter count 1
Register count 3
Frame size 24
Bytecode age: 0
         000000C70025361A @    0 : 13 00             LdaConstant [0]
         000000C70025361C @    2 : c3                Star1
         000000C70025361D @    3 : 19 fe f8          Mov <closure>, r2
         000000C700253620 @    6 : 65 59 01 f9 02    CallRuntime [DeclareGlobals], r1-r2
         000000C700253625 @   11 : 00 0d 9a 02       LdaSmi.Wide [666]
         000000C700253629 @   15 : 23 01 00          StaGlobal [1], [0]
         000000C70025362C @   18 : 0e                LdaUndefined
         000000C70025362D @   19 : a9                Return
Constant pool (size = 2)
000000C7002535E9: [FixedArray] in OldSpace
 - map: 0x00c700002239 <Map(FIXED_ARRAY_TYPE)>
 - length: 2
           0: 0x00c7002535dd <FixedArray[1]>
           1: 0x00c700253575 <String[5]: #kaimo>
Handler Table (size = 0)
Source Position Table (size = 0)

4、查看优化与反优化

生成字节码之后，解释器会解释执行这段字节码，如果重复执行了某段代码，监控器就会将其标记为热点代码，并提交给编译器优化执行。

查看哪些代码被优化，使用命令：

# 跟踪优化编译
v8-debug -e --trace-opt "var kaimo = 666"

查看哪些代码被反优化，使用命令：

# 跟踪去优化
v8-debug -e --trace-deopt "var kaimo = 666"

其它命令可以自己去尝试。

参考资料

• github：jsvu
• npm：jsvu
• 浅谈Google V8 引擎