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
操作系统支持的引擎
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 -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>
有大佬知道上面问题在哪,麻烦您指点一下,感谢
说明:
%USERPROFILE% =C:\Users\用户名
win+r,输入cmd 回车
在cmd窗口下输入 set 回车,可以查看系统变量(想要了解更多 set 命令请看 这里)
3、先简单了解一下抽象语法树
在传统的编译语言的流程中,程序的一段源代码在执行之前会经历三个步骤,统称为"编译":
- 分词/词法分析
这个过程会将由字符组成的字符串分解成有意义的代码块,这些代码块统称为词法单元(token)
举个例子: let a = 1; 这段程序通常会被分解成为下面这些词法单元: let 、a、=、1、 ;空格是否被当成词法单元,取决于空格在这门语言中的意义。
- 解析/语法分析
这个过程是将词法单元流转换成一个由元素嵌套所组成的代表了程序语法结构的树,这个树被称为"抽象语法树"(abstract syntax code,AST)
- 代码生成
将AST转换成可执行代码的过程被称为代码生成。
图片来源网络(侵删)
下面看一下在线解析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
输出
相关文章一览
持续更文,关注我,你会发现一个踏实努力的宝藏前端,让我们一起学习,共同成长吧。
喜欢的小伙伴记得点赞关注收藏哟,回看不迷路
欢迎大家评论交流, 蟹蟹
D8调试工具——jsvu的使用细则的更多相关文章
- V8中的快慢数组(附源码、图文更易理解😃)
接上一篇掘金 V8 中的快慢属性,本篇分析V8 中的快慢数组,了解数组全填充还是带孔.快慢数组.快慢转化.动态扩缩容等等.其实很多语言底层都采用类似的处理方式,比如:Golang中切片的append操 ...
- V8中的快慢属性(图文分解更易理解)
出于好奇:js中使用json存数据查找速度快,还是使用数组存数据查找快? 探究V8中对象的实现原理,熟悉数组索引属性.命名属性.对象内属性.隐藏类.描述符数组.快慢属性等等. D8调试工具使用请来这里 ...
- Weinre - 远程调试工具
Weinre 代表Web Inspector Remote,是一种远程调试工具.借助于网络,可以在PC上直接调试运行在移动设备上的远程页面,中文意思是远程Web检查器,有了Wei ...
- 发布:.NET开发人员必备的可视化调试工具(你值的拥有)
1:如何使用 1:点击下载:.NET可视化调试工具 (更新于2016-12-29 19:11:00) (终于彻底兼容了部分VS环境下无法使用的问题) 2:解压RAR后执行:CYQ.VisualierS ...
- 自定义可视化调试工具(Microsoft.VisualStudio.DebuggerVisualizers)
前言: 最近飞机失联的太多,明天要飞北京处理服务器双机热备的问题,航空保险已买,单号是:TF10122913. 至于我的银行卡密码,在我枕头下面的字条里,要是我之后没再更新文章,请通知我家人,哈哈哈哈 ...
- 微信小程序开发调试工具
为了帮助开发者简单和高效地开发微信小程序,我们推出了全新的 开发者工具 ,集成了开发调试.代码编辑及程序发布等功能. 扫码登录 启动工具时,开发者需要使用已在后台绑定成功的微信号扫描二维码登录,后续所 ...
- iOS 调试工具
仪表 xcode5 引入了调试仪表,通过仪表可以直观的看出应用的CPU和内存占用量.运行一个程序,点击仪表栏.可以发现当程序处于运行状态时,调试导航面板会以柱状图显示CPU和内存占用量,并随着应用实 ...
- 在php中使用strace、gdb、tcpdump调试工具
[转] http://www.syyong.com/php/Using-strace-GDB-and-tcpdump-debugging-tools-in-PHP.html 在php中我们最常使用调试 ...
- API调试工具推荐 - httpie
API调试工具推荐 - httpie <HelloGitHub>第07期上面看到这个python项目,好东西 文档地址 但是安装的时候报错,google之后发现是个已知的bug,直接使用p ...
随机推荐
- CF335E Counting Skyscrapers 题解
提供一种最劣解第一且巨大难写的做法( Bob 显然真正的楼量可以达到 \(314!\),是没办法直接做的,再加上唯一方案的样例,可以猜测有简单的结论. 考虑当楼高度为 \(k(k<h)\) 时, ...
- IDEA找不到类但实际存在的问题解决
不知道某天开始Idea就开始抽风了. 现象: 一个service的接口类,就在同一个包下,但总是找不到,编辑器一直标红 编译可以通过 说明类本身应该是没什么问题的.问题是怎么重新编译重新reload ...
- JNPF.java前后端分离框架,SpringBoot+SpringCloud开发微服务平台
JNPF.java版本采用全新的前后端分离架构模式.前后端分离已成为互联网项目开发的业界标准开发方式,通过 nginx+tomcat 等方式有效的进行解耦合,并且前后端分离会为以后的大型分布式架构.弹 ...
- GDKOI 2021 Day1 PJ 爆炸记
早上睡到 7:10 分才想起今天有 GDKOI ,赶紧去买了一个面包赶去机房 发现隔壁的大奆都过来了.比赛时由于昨晚一直没睡好,打了两个小时的哈欠 T1 :暴力模拟 根据 \(r\) 和 \(c\) ...
- camunda开源流程引擎的数据库表结构介绍
Camunda bpm流程引擎的数据库由多个表组成,表名都以ACT开头,第二部分是说明表用途的两字符标识.本文以Camunda7.11版本为例,共47张表. ACT_RE_*: 'RE'表示流程资源存 ...
- 树莓派开发笔记(十七):树莓派4B+上Qt多用户连接操作Mysql数据库同步(单条数据悲观锁)
前言 安装了mysq数据库,最终时为了实现在一个树莓派上实现多用户多进程操作的同步问题,避免数据并发出现一些错误,本篇安装了远程服务并且讲述了使用Qt进行悲观锁for update操作,命令行进行 ...
- Java常用类-包装类
包装类 Java中的基本类型功能简单,不具备对象的特性,为了使基本类型具备对象的特性,所以出现了包装类,就可以像操作对象一样操作基本类型数据;包装类不是为了取代基本数据类型,而是在数据类型需要使用 ...
- 对vue响应式的理解
1.所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制. 2.MVVM框架要解决的一个核心问题是连接数据层和视图层,通过数据驱动应用,数据变化,视图更新,要做到这点的就需要对数据做响 ...
- SpringCloudAlibaba学习(解决SpringBoot初始化以及Nginx启动出错问题)
微服务强调每个服务都是单独的数据库 在不使用微服务的情况下可以采用分布式架构,通过Template来调用远程的Rest接口 但这种方式维护起来很麻烦,而且有很多弊端. 一.环境搭建 1.首先搭建Spr ...
- 重学ES系列之字符串方面的处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...