|
|
下文所有“调试”字眼包罗但不限于代码调试，也指代性能profile、内存分析之类法式开发过程中容易用到功能 零、简单的目录
本文包罗以下内容。可能可以解答你以下疑问。
一、前言
二、V8 调试器道理是什么 ？
三、隔壁大哥 Node.js 是怎么用调试器的啊？
四、Puerts 怎么启动调试 ？
五、怎么连上调试器 ？
六、手机怎么调试 JS ？
<hr/>一、前言
俗话说，“能用Javascript做的事情最终城市用Javascript做”。
Javascript之所以强大，除了它的再生父母Google V8在性能上带来的贡献外，离不开它和Chrome Devtool联手提供的强大的调试能力。
一个强大的Devtool，可以减少开发者们无数的脱发加班时间。加班少了，幸福感高了，自然才有JS生态今天的强大。（划重点：加班少了，自然会强大）。
作为JS生态的拥护者，Puerts（读作普洱TS）积极地把V8的调试能力带入主流游戏引擎的脚本开发中，本系列文章，就会为你介绍使用Puerts的过程中调试JS的方式。
<hr/>二、简单的储蓄常识 —— V8调试器是怎么运行的
暂且非论JS和V8，放眼市面上所有语言的调试需求，大略都可以如此归纳
- 你在调试器上执行操作（执行代码段等），通知法式作出相应措置，返回成果。
- 你的法式发生了一些事件（命中断点，打印Log等），通知调试器展示成果。
为了满足这两种需求，同时让调试器和执行法式能解耦（最终发布的法式很可能需要不包含调试器，以节省包大小），大师遍及城市使用类似C/S的架构实现调试处事。
右边这位薯条鸽子是client，它法式崩溃，并不会影响左边充任server的鸽子的运行
V8的调试也不例外地采用了这样的架构，而且它使用了Websocket来实现C/S之间的通信。
在V8/Chrome的实现里，逻辑法式充任调试的server，调试器充任client。当它们互相联通之后，就能不竭地把法式的调试信息展示在开发者面前。
我们在chrome打开网页的时候，devtool就是用websocket和运行网页的V8通信的
V8采用websocket带来了许多好处。
一是因为它属于明文协议，易于理解，非常便利开发者实现他们本身的调试器，比如除了Chrome Devtool之外，VSCode也有Javascript调试器。
二是因为websocket基于网络，开发者可以很容易地跨设备对V8进行调试。微信小法式的长途调试能力就是基于此完成的，后文也会提到使用puerts的过程中如何进行手机调试。
<hr/>三、简单的参考知 识 —— Node.js是怎么使用调试器的
在讲述如安在puerts里启动Javascript调试之前，我们先看看另一个著名Javascript Runtime——Node.js是怎么使用调试器的。如果你不知道Node.js是啥，这里就先提醒你去知道一下，因为要阐扬Javascript生态的力量，就不能分开Node.js。
Node.js为开发者提供了两个跟调试器有关的参数。
你可以通过node -h查看到它们
前面提到，V8的调试模型里，执行法式本身充任调试server。这里提到的两个inspect参数，就是用来在法式启动时告诉V8：“务必把调试server启动起来。”
Node.js启动调试server之后，开发者就能通过chrome的chrome://inspect找到调试server并调试。
那么--inspect和--inspect-brk有什么区别呢？
很显然，server和client不是一个鸡生蛋蛋生鸡的问题，永远是先有server再有client，逻辑才能成立。
如果法式开始执行和server启动是同时的，那么在开发者的client连接上之前，法式必然有一些部门已经执行过了，开发者无法调试到它们。
所以，V8提供了一个“等待调试器连接”的能力，一旦启用，法式就会等到开发者调试器连接上后，才会往下执行，这样开发者就能调试到法式的开头部门了。
Node.js的--inspect-brk以及后面提到Puerts的WaitDebugger就是打开这个开关用的。
<hr/>正题开始
四、启动调试
正如前文所说，要调试Javascript，就要先让V8把调试server启动起来。Puerts里让V8启动调试server也非常简单，基本就是多传一个参数的事情。
Unreal Engine 4里启动
在UE菜单上选择“编纂->项目设置”，打开设置页面后在“插件->Puerts Setting”页面中开启调试以及设置端口
2. 为本身创建的JS虚拟机启动调试server
GameScript = MakeShared<puerts::FJsEnv>(
std::make_unique<puerts::DefaultJSModuleLoader>(
TEXT(”JavaScript”)
),
std::make_shared<puerts::FDefaultLogger>(),
8080 // 指定调试websocket server所用的端口，即视为要打开调试server
);
// WaitDebugger的感化参见前文的参考常识
// GameScript->WaitDebugger();
GameScript->Start(”QuickStart”, Arguments);Unity3D里启动
void RunScript()
{
jsEnv = new JsEnv(
new DefaultLoader(”E:/puerts_unity_demo/TsProj/output/”),
8080
);
// WaitDebugger的感化参见前文的参考常识
// await jsEnv.WaitDebuggerAsync(); // 如果c#版本高于7.2（撑持async/await），建议用异步等待，否则用同步阻塞等待
// jsEnv.WaitDebugger();
jsEnv.Eval(”require('QuickStart')”);
}
void onUpdate()
{
jsEnv.Tick(); // 不加这句的话，会发现inspector跑着跑着就没反映了
}同时你需要把Unity的“Edit/ProjectSetting/Player”菜单里的“Resolution and Presentation/Run In Background”勾选上，否则切换到调试器窗口之后，unity就遏制了。
<hr/>五、连接调试器
调试server启动之后，接下来就是把调试client连接上去并开始调试了。正如前文所说，目前有两个主流的调试器可供我们使用：Chrome Devtools和VSCode。
用Chrome DevTools调试本机Javascript环境
方式一：添加 discover target
- 在chrome里打开chrome://inspect，点击Configure...
2. 添加你的调试server的端口，ip使用127.0.0.1代表本机
3. 点击inspect即可打开devtool窗口进行调试。
方式二：直接使用inspector.html
在chrome地址栏输入以下url（ws参数为调试处事器的ip和端口）即可直接打开一个devtool页面
devtools://devtools/bundled/inspector.html?v8only=true&ws=127.0.0.1:8080
用VSCode调试本机Javascript环境
1. 在VSCode的此处选择create a launch.json file
2. 这里先随便选一个
3. 在右侧界面再选择 add Configuration
4. 在弹出的菜单里选择Node.js: Attach
5. 在port处填入你传给puerts的调试处事器端口
6. 回到左侧选择Attach而且点击播放按钮
7. 进入这个状态，就是开始调试了。
<hr/>六、手机调试
前面提到，V8采用websocket这样的网络协议来实现调试通道，非常便于实现长途设备调试。
只要你的工作电脑和手机处在同一局域网内（超大公司的特殊网络环境除外），都能非常便利的实现调试client和调试server的连接。
需要注意的是，puerts官方为了保证安全性，默认没有打开手机版本puerts的调试开关，你需要在CMakeLists.txt里添加以下代码，并从头编译puerts才可以使用调试能力。
target_compile_definitions (puerts PRIVATE WITH_INSPECTOR)Chrome
只需要在添加discover target的时候，ip填入手机在局域网内的ip即可
又或者是使用inspector.html时，ws参数填手机在局域网内的ip。
devtools://devtools/bundled/inspector.html?v8only=true&ws=192.168.1.2:8021
VSCode
在Add Configuration时，可以选择Attach to Remote Program
address处填入手机的局域网ip即可
网络环境复杂的情况
前面提到了某些超大公司的网络环境斗劲特殊，不必然允许工作电脑与手机直接进行网络连通（比如笔者地址的腾讯）这时候怎么办呢？这时候就可以掏出你的数据线，无论是iOS还是安卓，都有东西提供“port forwarding”的能力，让你通过数据线与手机进行网络通信。
什么意思呢？
比如你设置了当地9222端口到手机8102端口的tcp port forwarding，所有对当地9222端口成立的tcp连接城市被转发到手机的8102端口上。
放到v8调试这个场景上，你可以理解为：你的调试client可以连接到当地9222端口上的一个debug server，但这个server实际上是手机上8102端口上的，只是颠末数据线转发了。
至于port forwarding东西，安卓和iOS分袂使用adb和usbmuxd即可，你可以直接google它们安装。
安装好后在命令行输入：
adb forward tcp:9222 tcp:8102 #安卓
iproxy 9222:8102 #iOS 配置好后，直接按照上文提到的“调试本机Javascript环境”的方式使用即可。 |
本帖子中包含更多资源
您需要 登录 才可以下载或查看，没有账号？立即注册
×
|
窥视卡
雷达卡
发表于 2024-1-19 14:14
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡