×

转载:3分钟带你玩转React Native研发所有调试技巧

96
曹印亮
2016.11.01 13:06* 字数 675

原文地址 http://www.52learn.wang/archives/1071

1、React Native Dev tool的安装

在利用Chrome调试之前,首先需要在Chrome中安装React Native Dev tool工具。

安装步骤如下:

(1)点击Chrome右上角的按钮

(2)点击设置按钮

(3)点击扩展程序

(4)点击获取更多应用程序

(5)在搜索框中输入React Native Dev tool并且将其添加至CHROME

(6)安装完的效果如下

2、如何通过Chrome跟踪调试React Native程序

首先把程序安装到iOS模拟器,接下来通过快捷键command+d弹出选择提示框(PS:调试中如果你翻墙了,请务必关闭,否则Chrome没法调试),然后点击Debug JS Remotely。

Chrome浏览器将会被自动链接。

接下来通过快捷键option+command+j打开调试界面,再根据下图中的步骤进行操作

(1)打开调试界面

(2)选择查看源码

(3)连接正在工作的代码(只有这一步这么选择才能查看源码)

(4)查看index.ios.js源码

(5)源码查看区

(6)断点调试区

接下来的问题是如何通过断点跟踪调试?

用Sublime打开项目源码,在如下位置添加几句代码,如下如所示:

保存代码,通过command+r重新刷新模拟器,接下来在23行打个端点,在下图第二步中点击下一步,你会发现控制台依次输出第三步的内容。

另外的一种方式,不需要在Chrome中添加端点,也可以在代码里面添加debugger这么一句代码,这句代码就代表添加了一个端点。

3、如何在模拟器上查看视图的盒子模型

(1)运行程序

(2)通过command+d弹出调试提示选择框

(3)选择show inspector

当你在模拟器上选择不一样的视图时,模拟器就会展示出这个视图的盒子模型数据

4、如何通过Atom+Nuclide进行调试

首先通过Atom 打开项目文件,接下来通过shift+command+p弹出搜索框,在搜索框中输入inspector,如下图所示选择Nuclide React Native Inspector Show选项

接下来等待模拟器React Native连接。

接下来将程序安装到模拟器,通过command+d弹出提示选项,点击Debug JS Remotely选项。

连接上以后,当前项目的UI成次结构清晰的显现出来,如下图所示。

日记本
Web note ad 1