React Native 研发所有调试技巧

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成次结构清晰的显现出来，如下图所示。