参考文章:
debug
Memory leak in profile
在模拟窗口上按Ctrl+Command+z
或者Command+d
会调出react native
的开发者选项:
重新运行程序,类似于在 Xcode 中按Command+R
.
在 Chrome 浏览器下调试,在 chrome 浏览器下输入http://localhost:8081/debugger-ui
,再按Alt+Command+j
出现浏览器 debug 窗口如下:
这一部分的知识属于 chrome 浏览器如何调试的知识,有兴趣可以单独学习。
在 Safari 浏览器下调试,safari 还没找到具体的事例。
打开 FPS 监控器,如下图底部的状态栏:
可以用来查看页面中元素的结构以及属性,以及性能相关信息:
点击该选项后出现:
然后我们选择一个控件:
然后选择perf
一览,可以查看脚本下载以及执行时间 (还有一个 TTI 是什么鬼,以后再说):
修改 js 文件后,app 立即显示修改后的效果。
进行性能分析,一段时间后点击Stop profiling
会提示如下信息:
说明我们的分析结果已经在服务器保存了,那至于这个到底分析的是什么呢?首先我们找到该文件,根据控制台输出信息:
我们打开浏览器中输入file://tmp
可以看到如下界面:
点击我们刚才保存的文件:
google 提供了工具trace-viewer
将这个 json 文件转化为 html 文件,方便我们分析数据,转化后的结果如图: