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