Puerts Inspector指南（二）热重载、内存快照、Profile

呼啦嘿 · 发表于 2023-9-9 14:30

上篇文章了解了调试器连接的相关事项之后，我们以Chrome Devtool为例，细数一下有哪些适合Puerts环境的强大功能。
零、目录

本文包含以下内容，可能可以解答你以下疑问：

一、用 puerts 怎么实时改削代码实时生效？
二、我的 JS 环境内存爆了怎么办啊？
三、我的 JS 代码会卡好长一段时间怎么办啊？
四、调试器可以调试 Typescript 吗？
五、我的调试器本身卡住了怎么办啊？
<hr/>一、热重载调试

Chrome Devtool撑持你在Source面板里改削代码，并当即生效。
这个功能在常规web开发中其实并不常用，但非常适合游戏开发的场景。
因为很多时候游戏的当前状态并不是那么容易重现，你需要颠末一系列诸如登陆、选服、添加机器人、匹配之类的操作，才能回到上次的状态，非常耗费时间。
如果你每次改代码都要经历如上阶段，那可太痛苦了。
接下来让我们看看怎么使用Devtool的热重载调试能力快速改削逻辑。

如果你看不到GIF，以下是文字描述：
在启动游戏和调试器后，方块迟缓旋转。
此时我在devtool里直接改代码让速度*10，保留后可以看到方块旋转顿时变得快速。
随后把代码还原保留，方块旋转又变慢了。
<hr/>二、内存快照

你可以在调试器里使用内存快照能力，记录某一时刻下整个JS虚拟机所有JS变量的状态（也叫快照）。而且可以很便利地对比两个快照之间的分歧，找到内存暴涨的处所。
我们用以下代码做典型
jsEnv.Eval(@”
const CS = require('csharp');
const arr = [];
setInterval(() => {
      console.log('interval')
      arr.push(new Zombie());
      arr.push({a: 1})
}, 500)
function Zombie() { this.a = 1 }
”);点进Memory面板，选择Heap snapshot，在任意时刻点击Take snapshot

然后即可得到一个内存快照，Chrome Devtool提供了三种视图让我们分析它。
Summary视图

里面可以看到当前整个虚拟机里所有的JS变量相关的信息（包罗他们的值、本身大小、递归大小）
此时就可以分析你的整个法式里，什么JS变量占用的空间出格多。如果你发现某些变量其实并不需要持有，就可以改削你的法式尽早释放他们。

Containment视图

Containment视图是以对象的包含关系进行组织的树形布局。本文就先不提了。

comparison视图

Devtool左上角可以选择 ”再录一个snapshot“、”清空“、”强制GC“。

我们等若干时间之后再录一个snapshot。录好后可以点击comparison

得到如下成果，可以看到Zombie对象新增了出格多，这样你就可以查找一下是不是哪里引起了Zombie对象的内存泄漏了。
这里也凸显出了创建对象时使用构造函数而不是对象字面量的形式的好处：分析内存的时候可以更直不雅观。

<hr/>三、Javascript Profiler

Devtool的Javascript Profiler东西可以让你录制一段时间的V8执行详情，让你清楚地搞大白这段时间你的法式卡在哪。
这部门我采用webgl的水族馆demo来演示：https://webglsamples.org/aquarium/aquarium.html
首先在Devtool里打开JavascriptProfiler面板

将鱼的数量调整到不足60fps为止，此时点击start，开始录制Profile

一段时间后点击Stop，然后就可以看到录制好了一个Profile

Tree视图

选择Tree视图，你可以自顶向下地看到整个法式每个函数所占的耗时，而且它们会以调用关系以树形方式组织。这时你就可以概略知道法式的瓶颈在于哪个部门。

Heavy视图

选择Heavy视图，你就可以直接看到每一个具体函数的耗时。这时你就知道你可以针对性优化哪一个函数。

chart视图

选择chart视图，你可以轻松地看到这段时间里，按照整个时间轴挨次，每一刻你的CPU在运算什么。

这时我们滚轮放大，就可以细化看到每一帧的每一法式用耗时。这个方式用来分析Jank最适合不外。
这个著名demo显然不会呈现什么太大的问题，但是你在分析你的法式的时候如果感到感染到了明显Jank，用这个方式就能顿时找到长条，它就是罪魁祸首。

<hr/>四、Sourcemap（Typescript调试）

在浏览器web开发的场景里，开发者一般会将Javascript代码压缩混淆后再放到网页上，以减少网页加载代码的大小。
大师都这么干之后，就发现这时候调试那种压缩成一坨的代码并不太便利，于是发现了Sourcemap。它够将混淆儿女码的每一个语句映射到它混淆前的位置，这样开发者就可以继续调试它们的源码。

后来Javascript生态呈现了Typescript、Babel的众多衍生编译器，Sourcemap同样也派上了用场。尽管V8运行的还是Javascript，但是开发者可以很便利地在调试器上调试Typescript代码。
你可以如下操作，在Devtool里打开Sourcemap的撑持（当然一般情况下默认是打开的）

使用tsc编译Typescript时，你可以在tsconfig.json添加这个选项以启用sourcemap生成
{
  ”compilerOptions”: {
”sourceMap”: true
  }
}你可以看到生成出来的底部带有如下注释
//# sourceMappingURL=QuickStart.js.map同时js文件旁边也会生成一个map文件

这时候如果你在puerts中使用这个JS文件，可以看到devtool里会呈现原始的TS文件供你调试。

<hr/>五、调试 Chrome Devtool

在上一篇文章中有提到，在chrome里使用调试器连接到debug server时，可以使用devtools://devtools/bundled/inspector.html?v8only=true&ws=127.0.0.1:9222 这样的url打开调试器。
所以想必这时你也想到了，chrome的devtool本身就是用web网页来实现的。
也就是说，这个调试器页面，本身也可以打开chrome devtool进行调试。
同时因为调试通道使用websocket实现，我们在devtool的network面板里就可以对这条websocket通道进行抓包，这样就能很容易地看到调试通道具体的信息。

（以上是调试puerts虚拟机时，对Chrome Devtool进行调试后抓到的websocket包）
那么当你发现Chrome Devtool呈现问题时，就可以通过这个方式定位。甚至按照这个抓包成果，配合chrome官方提供的调试协议说明 https://chromedevtools.github.io/devtools-protocol/ ，来实现本身的调试器。

xuhu · 发表于 2023-9-9 14:31

写的真好[赞同]

xiaohyy · 发表于 2023-9-9 14:31

vs code支持热重载吗？

メ笨小孩メ · 发表于 2023-9-9 14:32

热重载和编辑器没关系

		自动登录	找回密码
密码			立即注册

Puerts Inspector指南（二）热重载、内存快照、Profile

本帖子中包含更多资源