> 参考文章:
> [debug](https://facebook.github.io/react-native/docs/debugging.html#content)
> [Memory leak in profile](https://github.com/facebook/react-native/issues/1452)
## react-native的开发者选项
在模拟窗口上按`Ctrl+Command+z`或者`Command+d`会调出`react native`的开发者选项:
![](https://box.kancloud.cn/2016-01-07_568e13ed368cd.jpg)
## Reload
重新运行程序,类似于在Xcode中按`Command+R`.
## Debug in Chrome
在Chrome浏览器下调试,在chrome浏览器下输入`http://localhost:8081/debugger-ui`,再按`Alt+Command+j`出现浏览器debug窗口如下:
![](https://box.kancloud.cn/2016-01-07_568e13ed5edc8.jpg)
这一部分的知识属于chrome浏览器如何调试的知识,有兴趣可以单独学习。
## Debug in Safari
在Safari浏览器下调试,safari还没找到具体的事例。
## Show FPS Monitor
打开FPS监控器,如下图底部的状态栏:
![](https://box.kancloud.cn/2016-01-07_568e13ed9c887.jpg)
## Inspect Element
可以用来查看页面中元素的结构以及属性,以及性能相关信息:
点击该选项后出现:
![](https://box.kancloud.cn/2016-01-07_568e13edb9879.jpg)
然后我们选择一个控件:
![](https://box.kancloud.cn/2016-01-07_568e13edd6c4b.jpg)
然后选择`perf`一览,可以查看脚本下载以及执行时间(还有一个TTI是什么鬼,以后再说):
![](https://box.kancloud.cn/2016-01-07_568e13ee060f1.jpg)
## Enable Live Reload
修改js文件后,app立即显示修改后的效果。
![](https://box.kancloud.cn/2016-01-07_568e13ee1c7d5.jpg)
## Start Profiling
进行性能分析,一段时间后点击`Stop profiling`会提示如下信息:
![](https://box.kancloud.cn/2016-01-07_568e13ee4ff68.jpg)
说明我们的分析结果已经在服务器保存了,那至于这个到底分析的是什么呢?首先我们找到该文件,根据控制台输出信息:
![](https://box.kancloud.cn/2016-01-07_568e13ee66632.jpg)
我们打开浏览器中输入`file://tmp`可以看到如下界面:
![](https://box.kancloud.cn/2016-01-07_568e13ee8ca72.jpg)
点击我们刚才保存的文件:
![](https://box.kancloud.cn/2016-01-07_568e13eed508d.jpg)
google提供了工具[`trace-viewer`](https://github.com/google/trace-viewer)将这个json文件转化为html文件,方便我们分析数据,转化后的结果如图:
![](https://box.kancloud.cn/2016-01-07_568e13ef31c77.jpg)
- 前言
- react-native试玩(1)
- react-native试玩(2)
- (3)-窥探开发者选项
- (4)-新建项目
- (5)-小菊花控件
- (6)-日期选择控件
- (7)-图片控件
- (8)-列表视图
- (9)-地图视图
- (10)-导航栏
- (11)-模态
- (12)-iOS中导航栏
- (13)-选择控件
- (14)-iOS中进度栏
- (15)-滚动视图
- (16)-iOS分段控制控件
- (17)-iOS中的滑动条
- (18)-开关控件
- (19)-分页栏
- (20)-分页栏中的元素
- (21)-文本控件
- (22)-文本输入框
- (23)-触摸高亮
- (24)-触摸模糊
- (25)-触摸无反馈
- (26)-网页视图
- (27)-上拉菜单API
- (28)-弹出框API
- (29)-React Native Playground
- (30)-应用状态API
- (31)-访问相册API
- (32)-推送通知API
- (33)-状态栏API
- (34)-配置Android开发环境
- (35)-react-native-icons插件