加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react-native试玩(3)-窥探开发者选项

发布时间:2020-12-15 05:22:07 所属栏目:百科 来源:网络整理
导读:参考文章: debug Memory leak in profile react-native的开发者选项 在模拟窗口上按 Ctrl+Command+z 或者 Command+d 会调出 react native 的开发者选项: Reload 重新运行程序,类似于在Xcode中按 Command+R . Debug in Chrome 在Chrome浏览器下调试,在chrom

参考文章:
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文件,方便我们分析数据,转化后的结果如图:

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读