关于v8:D8调试工具jsvu的使用细则

d8 is V8’s own developer shell.

D8 是一个十分有用的调试工具，你能够把它看成是 debug for V8 的缩写。咱们能够应用 d8 来查看 V8 在执行 JavaScript 过程中的各种两头数据，比方作用域、AST、字节码、优化的二进制代码、垃圾回收的状态，还能够应用 d8 提供的公有 API 查看一些外部信息。

前言

jsvu 是 JavaScript 引擎版本管理工具

以下是在 Windows10 下的操作，倡议在 CMD 窗口外面操作。

1、装置

前提：node V14+

npm install -g jsvu

运行 jsvu，交互式命令行抉择须要装置的平台和引擎

装置指定版本的引擎能够参考上面的命令

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

执行 jsvu 装置引擎，可在 %USERPROFILE% /.jsvu 目录下查看装置的引擎

装置 v8-debug

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

操作系统反对的引擎

查看 jsvu 版本

jsvu -h

📦 jsvu v1.13.3 — the JavaScript engine Version Updater 📦
[<engine>@<version>]
[--os={mac64,mac64arm,linux32,linux64,win32,win64,default}]
[--engines={chakra,graaljs,hermes,javascriptcore,quickjs,spidermonkey,v8,v8-debug,xs},…]

Complete documentation is online:
https://github.com/GoogleChromeLabs/jsvu#readme

2、装置 eshost-cli（这个不装置也不影响应用）

治理 js 引擎，能够调用多个引擎执行 js 代码，更加不便调试不同引擎下的代码

npm install -g eshost-cli

Windows 下配置

eshost --add <host name> <host type> <host path> --args <optional arguments>

依据须要应用的引擎，自行配置，如下

eshost --add "Chakra" ch "%USERPROFILE%.jsvu\chakra.cmd"
eshost --add "GraalJS" graaljs "%USERPROFILE%.jsvu\graaljs.cmd"
eshost --add "JavaScriptCore" jsc "%USERPROFILE%.jsvu\javascriptcore.cmd"
eshost --add "SpiderMonkey" jsshell "%USERPROFILE%.jsvu\spidermonkey.cmd"
eshost --add "V8 --harmony" d8 "%USERPROFILE%.jsvu\v8.cmd" --args "--harmony"
eshost --add "V8" d8 "%USERPROFILE%.jsvu\v8.cmd"
eshost --add "XS" xs "%USERPROFILE%.jsvu\xs.cmd"

这里我集体配置如下（有没有这个配置貌似没什么影响，）

eshost --add "V8" d8 "C:\Users\xiao.jsvu\v8.cmd"
eshost --add "V8-debug" d8 "C:\Users\xiao.jsvu\v8-debug.cmd"
eshost --add "V8 --harmony" d8 "C:\Users\xiao.jsvu\v8.cmd" --args "--harmony"

查看

C:\Users\xiao.jsvu>eshost --configure-jsvu
Using config "C:\Users\xiao.eshost-config.json"
┌──────────────┬──────┬──────────────────────────────────┬───────────┬─────────────┐
│ name         │ type │ path                             │ args      │ tags        │
├──────────────┼──────┼──────────────────────────────────┼───────────┼─────────────┤
│ ChakraCore   │ ch   │ C:\Users\xiao.jsvu\chakra.cmd   │           │ 1.11.24,web │
├──────────────┼──────┼──────────────────────────────────┼───────────┼─────────────┤
│ V8 --harmony │ d8   │ C:\Users\xiao.jsvu\v8.cmd       │ --harmony │             │
├──────────────┼──────┼──────────────────────────────────┼───────────┼─────────────┤
│ V8           │ d8   │ C:\Users\xiao.jsvu\v8.cmd       │           │             │
├──────────────┼──────┼──────────────────────────────────┼───────────┼─────────────┤
│ V8-debug     │ d8   │ C:\Users\xiao.jsvu\v8-debug.cmd │           │             │
└──────────────┴──────┴──────────────────────────────────┴───────────┴─────────────┘

C:\Users\xiao.jsvu>

有大佬晓得下面问题在哪，麻烦您指导一下，感激😊

阐明：

1. %USERPROFILE% =C:\Users\ 用户名

   win+r，输出 cmd 回车

   在 cmd 窗口下输出 set 回车，能够查看零碎变量（想要理解更多 set 命令请看👉 这里）

3、先简略理解一下形象语法树

在传统的编译语言的流程中，程序的一段源代码在执行之前会经验三个步骤，统称为 ” 编译 ”:

1. 分词 / 词法剖析

这个过程会将由字符组成的字符串 合成 成有意义的代码块，这些代码块统称为 词法单元(token)

举个例子: let a = 1; 这段程序通常会被合成成为上面这些词法单元: let、a、=、1、；空格是否被当成词法单元，取决于空格在这门语言中的意义。

2. 解析 / 语法分析

这个过程是将词法单元流转换成一个由元素嵌套所组成的代表了 程序语法结构 的树，这个树被称为 ” 形象语法树 ”（abstract syntax code，AST）

3. 代码生成

将 AST 转换成可执行代码的过程被称为代码生成。

<p align=center> 图片起源网络（侵删）</p>

上面看一下在线解析 AST 的示例👇

4、应用 V8 调试剖析代码

文档查看

因为文档较长，能够应用命令输入一份本地的帮忙文档，不便查看

# 进入到要输入文档的目录下，生成 v8-help.txt、v8-debug-help.txt

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

次要应用的命令参数如下👇

v8-debug --help

Synopsis:
  shell [options] [--shell] [<file>...]
  d8 [options] [-e <string>] [--shell] [[--module|--web-snapshot] <file>...]

  -e        execute a string in V8
  --shell   run an interactive JavaScript shell
  --module  execute a file as a JavaScript module
  --web-snapshot  execute a file as a web snapshot

SSE3=1 SSSE3=1 SSE4_1=1 SSE4_2=1 SAHF=1 AVX=1 AVX2=1 FMA3=1 BMI1=1 BMI2=1 LZCNT=1 POPCNT=1 ATOM=0
The following syntax for options is accepted (both '-' and '--' are ok):
  --flag        (bool flags only)
  --no-flag     (bool flags only)
  --flag=value  (non-bool flags only, no spaces around '=')
  --flag value  (non-bool flags only)
  --            (captures all remaining args in JavaScript)

Options:
    # 打印生成的字节码
  --print-bytecode (print bytecode generated by ignition interpreter)
        type: bool  default: --noprint-bytecode

    
    # 跟踪被优化的信息
     --trace-opt (trace optimized compilation)
        type: bool  default: --notrace-opt
  --trace-opt-verbose (extra verbose optimized compilation tracing)
        type: bool  default: --notrace-opt-verbose
  --trace-opt-stats (trace optimized compilation statistics)
        type: bool  default: --notrace-opt-stats

    # 跟踪去优化的信息
  --trace-deopt (trace deoptimization)
        type: bool  default: --notrace-deopt
  --log-deopt (log deoptimization)
        type: bool  default: --nolog-deopt
  --trace-deopt-verbose (extra verbose deoptimization tracing)
        type: bool  default: --notrace-deopt-verbose
  --print-deopt-stress (print number of possible deopt points)

    
    # 查看编译生成的 AST
  --print-ast (print source AST)
        type: bool  default: --noprint-ast

    # 查看编译生成的代码
  --print-code (print generated code)
        type: bool  default: --noprint-code

    # 查看优化后的代码
  --print-opt-code (print optimized code)
        type: bool  default: --noprint-opt-code

    # 容许在源代码中应用 V8 提供的原生 API 语法
        # 在代码中配和退出 %DebugPrint(); 能够查看具体的运行时信息
  --allow-natives-syntax (allow natives syntax)
        type: bool  default: --noallow-natives-syntax

4.1、查看 ast

v8-debug -e --print-ast "const name='xiao'"

接管到代码后，第一步就是“解释”，即解释器生成 AST 和作用域。

C:\Users\xiao>v8-debug -e --print-ast "const name='xiao'"
[generating bytecode for function:]
--- AST ---
FUNC at 0
. KIND 0
. LITERAL ID 0
. SUSPEND COUNT 0
. NAME "". INFERRED NAME""
. DECLS
. . VARIABLE (000001FA12EFAF80) (mode = CONST, assigned = false) "name"
. BLOCK NOCOMPLETIONS at -1
. . EXPRESSION STATEMENT at 11
. . . INIT at 11
. . . . VAR PROXY context[2] (000001FA12EFAF80) (mode = CONST, assigned = false) "name"
. . . . LITERAL "xiao"


C:\Users\xiao>

4.2、查看作用域

v8-debug -e --print-scopes "const name='xiao'"

C:\Users\xiao>v8-debug -e --print-scopes "const name='xiao'"
Global scope:
global {// (000001DB6010D600) (0, 17)
  // will be compiled
  // NormalFunction
  // 1 stack slots
  // 3 heap slots
  // temporary vars:
  TEMPORARY .result;  // (000001DB6010D910) local[0]
  // local vars:
  CONST name;  // (000001DB6010D820) context[2], never assigned
}

C:\Users\xiao>

4.3、查看生成的字节码

v8-debug -e --print-bytecode "const name='xiao'"

C:\Users\xiao>v8-debug -e --print-bytecode "const name='xiao'"
[generated bytecode for function:  (0x0113002538bd <SharedFunctionInfo>)]
Bytecode length: 6
Parameter count 1
Register count 1
Frame size 8
Bytecode age: 0
         000001130025393A @    0 : 13 00             LdaConstant [0]
         000001130025393C @    2 : 25 02             StaCurrentContextSlot [2]
         000001130025393E @    4 : 0e                LdaUndefined
         000001130025393F @    5 : a9                Return
Constant pool (size = 1)
000001130025390D: [FixedArray] in OldSpace
 - map: 0x011300002229 <Map(FIXED_ARRAY_TYPE)>
 - length: 1
           0: 0x0113002538a1 <String[4]: #xiao>
Handler Table (size = 0)
Source Position Table (size = 0)

C:\Users\xiao>

4.4、查看具体的运行时信息

通过 --allow-natives-syntax 参数能够在 JavaScript 中调用 %DebugPrint 底层的 Native API

function testV8(properties, elements) {
  // 增加可索引属性
  
  for (let i = 0; i < elements; i++) {this[i] = `element${i}`;
  }
  
  // 增加惯例属性
  
  for (let i = 0; i < properties; i++) {const prop = `property${i}`;
    
    this[prop] = prop;
  }
}

const testobj1 = new testV8(12, 13);

// 打印 testobj1 具体的运行时信息
%DebugPrint(testobj1);

执行

v8-debug --allow-natives-syntax .\src\libs\demo.js

输入

相干文章一览

• V8 中的快慢属性
• V8 中的快慢数组

🎈🎈🎈

🌹 继续更文，关注我，你会发现一个虚浮致力的宝藏前端😊，让咱们一起学习，独特成长吧。

🎉 喜爱的小伙伴记得点赞关注珍藏哟，回看不迷路 😉

🎁 欢送大家评论交换, 蟹蟹😊