【性能教室】使用Devtool进行调试 -- Memory Profiler

使用DevTool进行调试

所使用编辑器版本：Online_v0.24.0.0

①Memory Profiler（内存分析工具--分析内存）

②JavaScript Profiler（JS分析工具--分析CPU）

DevTool是什么？

DevTool是Chrome浏览器提供的针对JS虚拟机的性能、内存分析工具,日常开发中，DevTool将会是我们使用频率最高的优化工具。

使用前准备

1. 下载谷歌浏览器

2. 在MW日志中抓取地址,一般来说地址都是如下两个：

    a.服务端地址：devtools://devtools/bundled/inspector.html?v8only=true&ws=127.0.0.1:23300

    b.客户端地址： devtools://devtools/bundled/inspector.html?v8only=true&ws=127.0.0.1:23301 （端口数逐渐累加）

3. 在谷歌浏览器中输入上面的调试地址

进入后，界面会呈现下图内容。运行游戏后，点击Connect DevTools即可开始调试

Memory Profiler （看内存）

（连接上DevTools后，点击上图中的Memory即可开始使用Memory Profiler）

一、使用Memory Profiler的目的

1.检查内存泄漏

2.检查GC（Garbage Collector 垃圾回收）问题

二、Memory Profiler的三种采样方式

堆快照

顾名思义，堆快照会采集当前时刻整个JS虚拟机的内存分布情况。

通常我们会利用堆快照来定位某一具体操作导致的内存异常。在口袋方舟游戏中，我们可以用它去定位某个游戏操作的内存情况。操作方法通常如下：

1.采样

2.执行一次想要检测的操作

3.等待操作完全结束

4.停止采样

5.从第一步重新开始重复N次（具体次数根据项目不同，采样次数也不同）

先比对第一张快照和最后一张张快照的内存大小，如果内存总体呈上升趋势，说明A操作中出现内存泄露的问题。此时我们就可以针对和A操作的关联的函数、对象逐一进行分析和优化

（堆快照采样后的数据图）

堆快照数据图右上角的Summary字样位置，可以选择查看内存快照的方式，可选方式如下：
●Summary - 可以显示按构造函数名称分组的对象。使用此视图可以根据按构造函数名称分组的类型深入了解对象（及其内存使用），适用于跟踪编辑器对象泄漏。
●Comparison - 可以显示两个快照之间的不同。使用此视图可以比较两个（或多个）内存快照在某个操作前后的差异。检查已释放内存的变化和参考计数，可以确认是否存在内存泄漏及其原因。
●Containment - 此视图提供了一种对象结构视图来分析内存使用，由顶级对象作为入口。
●Statistic - 内存使用饼状的统计图。

时间轴快照

时间轴快照其实和堆快照差不多，但是他的采样频率是固定50MS一次。可以用来在对一个过程进行内存采样。不过该功能目前在口袋方舟中不可用，这里就不多详细介绍了

内存信息采样

内存信息采样，使用采样的方法记录内存分配。此配置文件类型具有最小的性能开销，可用于长时间运行的操作。它提供了由 javascript 执行堆栈细分的良好近似值分配。我们用它来查看在一段游戏过程中整体的内存分配情况。

一般来说，一个游戏的核心逻辑的内存走势应该如下图

1. 游戏开始，大量申请内存

2. 内存达到顶峰

3. 内存走势近乎直线

4. 游戏结束，开始释放内存

5. 一段时间后内存(等待GC回收)回到游戏开始前的水平 (如果游戏中申请的内存本就不希望释放，则可以测试多次，观察整体曲线是否呈上升趋势)

这代表除了在游戏一开始的加载环节的申请内存，整个游戏过程中没有频繁的GC，也没有内存泄露的问题。

如果曲线呈"波浪线"或者有大量的"锯齿"，说明游戏过程中反复的申请和释放对象。这会造成频繁的GC。在游戏中呈现的效果则是反复的帧率下降->帧率恢复
如果曲线一直呈上升趋势，表示游戏过程中一直在申请内存，说明存在内存泄露。这可能会导致游戏的崩溃和闪退现象

此外，我们还能在内存信息采样中看到某个具体的方法申请的内存，再根据业务逻辑对函数的调用时机或者频率进行优化

这个怎么处理呢，过一会儿就提示websocket断开连接

森林迷了路 发表于 2023-5-16 13:50
这个怎么处理呢，过一会儿就提示websocket断开连接

是不是采样过程中，你调试的端口被关闭了。

空伊伊 发表于 2023-5-16 13:55
是不是采样过程中，你调试的端口被关闭了。

是的是的，而且每次启动pie的时候端口会变。解决了，多谢多谢