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"


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

目录
相关文章
|
8月前
|
XML 测试技术 开发工具
『App自动化测试之Appium应用篇』| 元素定位工具uiautomatorviewer从简介、特点、启动到使用的完整过程
『App自动化测试之Appium应用篇』| 元素定位工具uiautomatorviewer从简介、特点、启动到使用的完整过程
248 4
|
2月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
60 8
|
Web App开发 JavaScript 前端开发
Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法,javascript反调试问题处理实例演示
Python 自动化 - 浏览器chrome打开F12开发者工具自动Paused in debugger调试导致无法查看网站资源问题原因及解决方法,javascript反调试问题处理实例演示
753 0
|
8月前
|
IDE 小程序 前端开发
1月开发者日回顾|IDE性能分析工具即将上线,lifetimes等多个自定义组件参数更新
1月开发者日回顾|IDE性能分析工具即将上线,lifetimes等多个自定义组件参数更新
112 11
|
8月前
|
API C# 图形学
【Unity 3D】常见API的讲解以及在C#脚本中的执行(附源码)
【Unity 3D】常见API的讲解以及在C#脚本中的执行(附源码)
179 1
|
Web App开发 缓存 JavaScript
待补充 | ​Chrome调试工具常用功能整理
待补充 | ​Chrome调试工具常用功能整理
111 0
|
Web App开发 前端开发 JavaScript
Chrome操作指南——入门篇(十)调试小技巧
Chrome操作指南——入门篇(十)调试小技巧
Chrome操作指南——入门篇(十)调试小技巧
|
Web App开发 前端开发
Chrome操作指南——入门篇(九)调试小技巧
Chrome操作指南——入门篇(九)调试小技巧
Chrome操作指南——入门篇(九)调试小技巧
|
Web App开发
chrome调试10-console面板简介与交互式命令
chrome调试10-console面板简介与交互式命令
99 0
chrome调试10-console面板简介与交互式命令
|
Java 测试技术 API
Appium自动化(10) - appium高级元素定位方式之 UI Automator API 的详解
Appium自动化(10) - appium高级元素定位方式之 UI Automator API 的详解
255 0
Appium自动化(10) - appium高级元素定位方式之 UI Automator API 的详解