通用技术 react-native 开发者选项窥探

易寒 · 2015年08月06日 · 最后由 chichimei 回复于 2015年08月18日 · 1299 次阅读
本帖已被设为精华帖!

参考文章:
debug
Memory leak in profile

react-native 的开发者选项

在模拟窗口上按Ctrl+Command+z或者Command+d会调出react native的开发者选项:

这里写图片描述

Reload

重新运行程序,类似于在 Xcode 中按Command+R.

Debug in Chrome

在 Chrome 浏览器下调试,在 chrome 浏览器下输入http://localhost:8081/debugger-ui,再按Alt+Command+j出现浏览器 debug 窗口如下:

这里写图片描述

这一部分的知识属于 chrome 浏览器如何调试的知识,有兴趣可以单独学习。

Debug in Safari

在 Safari 浏览器下调试,safari 还没找到具体的事例。

Show FPS Monitor

打开 FPS 监控器,如下图底部的状态栏:

这里写图片描述

Inspect Element

可以用来查看页面中元素的结构以及属性,以及性能相关信息:
点击该选项后出现:

这里写图片描述

然后我们选择一个控件:
这里写图片描述

然后选择perf一览,可以查看脚本下载以及执行时间 (还有一个 TTI 是什么鬼,以后再说):
这里写图片描述

Enable Live Reload

修改 js 文件后,app 立即显示修改后的效果。

这里写图片描述

Start Profiling

进行性能分析,一段时间后点击Stop profiling会提示如下信息:

这里写图片描述

说明我们的分析结果已经在服务器保存了,那至于这个到底分析的是什么呢?首先我们找到该文件,根据控制台输出信息:
这里写图片描述

我们打开浏览器中输入file://tmp可以看到如下界面:

这里写图片描述

点击我们刚才保存的文件:
这里写图片描述
google 提供了工具trace-viewer将这个 json 文件转化为 html 文件,方便我们分析数据,转化后的结果如图:

这里写图片描述

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
共收到 4 条回复 时间 点赞

不错!图文并茂,学到了不少。
看来 React Native 的调试更接近于传统的前端调试啊,原生控件基本都已经被隐藏了。

已撸
谢啦!!☆⌒(*^-゜) v

#1 楼 @chenhengjie123 一些小技巧对提升开发效率有帮助,rn 后端是 nodejs 或 io.js,所以跟前段调试一样。

学习起来

需要 登录 后方可回复, 如果你还没有账号请点击这里 注册