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

简介: 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 引擎,目前为止支持的操作系统和引擎如下:

image.png


安装 jsvu


我们全局安装 jsvu

npm i jsvu -g

07d215fc62724ae59b541ffe04eed99c.png



执行 jsvu

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


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


f21e2c0afb804313aca4c1f0f7dedbe1.png


d19b7a777b8f4691bf1b7ee17ad77c31.png



查看 jsvu 帮助信息

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

jsvu -h


87269c31124f439889aeb4be797d8cf4.png


生成 v8,v8-debug 帮助信息

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



fd6811da1c4941ea8f5627a0f49c83d1.png




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

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


57e504d78a8249b0b01dc54b1830a4e7.png


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

v8 --help >> v8-help.txt


974d850c47514806802b25c9a2445d8e.png


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


006f8886bbb24dcca3f046d9c6fb2c78.png


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

ni v8-debug-help.txt


923043b7b70c471897c7ba439d57161b.png


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


85f640ef81b34c709fb53558733b74c1.png


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


7954e947816840bcb49932dec64f1576.png



执行 v8,v8-debug


1、直接执行代码

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


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

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


96bbc75c3534400d96ab33300331789b.png


2、直接执行 JavaScript 文件


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

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


b64596cb17624bc89c009d025b45556c.png


下面我们执行之这个文件

62f77d7fecdd44149159a1cda43fdbdc.png


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

v8 kaimo.js



d716ca993d744a6d9c4a725e1d87d30f.png


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

e601487ea82641afa2b7bcf5d26ffd69.png




跟踪代码执行


1、查看 AST

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


22e592836455469191cdb5823f24c677.png



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



d4b821cd26184c1d8250252b74cecd8e.png


2、查看作用域

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


05ce04ec5711476fa1a465f7a7667397.png



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

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


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

v8-debug --print-scopes kaimo.js


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

6bb549de38cd434a867ca10b17a6f744.png



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(打印解释器生成的字节码)

19e7f2776e5041f5a02729cc1e649bc7.png


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


执行结果如下:

b769ab4c0c37477d909da17af35fa7c6.png


[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、查看优化与反优化

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

b25ae88ee300415d9b4799cdb70cdee4.png


查看哪些代码被优化,使用命令:

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


查看哪些代码被反优化,使用命令:

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


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

目录
相关文章
|
4月前
mui 开发调试步骤
mui 开发调试步骤
35 0
|
JSON 小程序 算法
uniapp小程序封装常用工具函数
类似的工具函数还有很多,这里暂时不一一列举了,上面提到的银行卡校验,还可以使用阿里公开的一个校验接口cardNo=银行卡号码&cardBinCheck=true这个接口会返回对应的银行简称银行卡类型,如果想要显示对应的银行logo的话,可以联系我,由于JSON数据太大,没办法全部放在这里。
178 0
|
4月前
|
XML 测试技术 开发工具
『App自动化测试之Appium应用篇』| 元素定位工具uiautomatorviewer从简介、特点、启动到使用的完整过程
『App自动化测试之Appium应用篇』| 元素定位工具uiautomatorviewer从简介、特点、启动到使用的完整过程
200 4
|
Web App开发 JavaScript 前端开发
Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法,javascript反调试问题处理实例演示
Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法,javascript反调试问题处理实例演示
697 0
Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法,javascript反调试问题处理实例演示
|
Web App开发 存储
Python+selenium 自动化-操作已启用的chrome浏览器实例演示,chrome启用调试端口方法
Python+selenium 自动化-操作已启用的chrome浏览器实例演示,chrome启用调试端口方法
569 0
Python+selenium 自动化-操作已启用的chrome浏览器实例演示,chrome启用调试端口方法
|
Web App开发 缓存 JavaScript
待补充 | ​Chrome调试工具常用功能整理
待补充 | ​Chrome调试工具常用功能整理
|
JavaScript 前端开发 开发工具
很方便的javascript开发工具--火狐的Scratchpad(代码草稿本)工具
火狐的console控制台可以很方便的测试单行js代码,就像这样:
133 0
很方便的javascript开发工具--火狐的Scratchpad(代码草稿本)工具
|
Web App开发
chrome调试10-console面板简介与交互式命令
chrome调试10-console面板简介与交互式命令
87 0
chrome调试10-console面板简介与交互式命令
|
JavaScript 前端开发 IDE
「教你用十分钟开发一款提升工作体验的vscode插件🌿 」console, debugger一键删除|自定义代码模板
「教你用十分钟开发一款提升工作体验的vscode插件🌿 」console, debugger一键删除|自定义代码模板
386 0
|
测试技术
解决duilib使用zip换肤卡顿的问题(附将资源集成到程序中的操作方法)
转载请说明原出处,谢谢~~        今天在做单子是,客户要求做换肤功能,为此我专门写了一个换肤函数,并且把各种皮肤资源压缩为各个zip文件来换肤。
1071 0