技术指南

利用TBS调试工具中的Timeline面板可以记录并且分析网页运行中的所有活动情况，详细使用技巧请参考之前发布的文章，TBS开发调试利器——页面性能优化。

这篇文章重点要介绍的是怎么利用TBS调试工具中的Timeline面板来记录小程序的启动性能数据。由于某些原因小程序不支持页面刷新功能，所以导致之前不能使用TBS调试工具来记录小程序的启动性能数据，因为小程序启动的时候还没有机会打开TBS调试工具的Inspector页面。为了解决这个问题X5内核针对小程序的特殊性做了相应的修改，让小程序也可以像一般的网站页面一样支持使用Timeline面板显示性能数据。以下我们介绍怎么使用我们的TBS调试工具来记录小程序的启动性能数据。

打开调试开关

首先要让内核知道我们现在要开始调试小程序的性能，需要做的事情很简单，可以通过扫描TBS Studio工具上面的二维码来快速打开小程序调试开关，如下图所示。

另一种打开调试开关的方式是在微信里面打开x5调试页面：http://debugx5.qq.com，如下图所示，选择【信息】面板，勾选上【是否打开TBS内核小程序调试功能】选项。注：不需要调试小程序的时候记得去掉勾选，以免影响正常网页浏览的性能。

在Timeline面板中记录并显示小程序性能数据

调试开关打开之后，要使用Timeline面板展现小程序的启动性能数据，我们需要做的事情很简单，如下图所示，

1. 选择【Timeline】面板 2. 点击左上角的【Record】按钮 ，或者使用【Ctrl+E】快捷键 3. 在弹出Recording的对话框之后，点击对话框上的【Stop】按钮。稍等片刻Timeline面板就会显示小程序的启动性能数据，如图所示，

可以看到和一般网页使用TBS调试工具的Timeline面板展现网页性能数据的操作基本一样，稍微有些不同的地方是小程序不能正常刷新页面，所以在小程序一开始加载的时候我们会判断内核中小程序调试的开关是否打开，如果是打开的，那内核就马上开始记录性能相关的数据，也就是说Timeline面板展现的性能数据是从小程序开始加载到我们点击Stop Record这段时间的所有数据。