React Native(以下简称RN)为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具去Debug移动端的代码，无疑是最吸引开发人员的特性之一。
试想一下，当你在手机屏幕按下一个按钮，处理事件的代码就可以立即在浏览器的调试工具里进行断点调试，而且每当你对代码进行修改，界面便可以完成快速地重载，省去昂长的编译时间，这会是多么提高工作效率。
传统的Web前端开发人员自然很熟悉浏览器的调试工具，但是对于如何将其在RN中使用以便和移动端结合起来，也许会相当陌生。这也成为了一些开发者跨入RN移动开发大门的第一道小门槛。
本文是笔者一边参考官方文档，一边摸索RN调试过程的记录。希望能够帮助新手开发者走出一小步，更快地迈过这道门槛。
在开始之前，你需要搭建好本地开发环境，并有一部Android 5.0版本以上的手机可供连接至电脑。
首先，使用官方工具react-native-cli创建好一个初始化的工程，并安装好依赖。
安装的命令为“react-native init DebugTest”（DebugTest为我们这次的项目名称）
安装完成后，就会多出一个名为DebugTest项目文件夹，文件夹内结构如下：
图1. 项目初始结构
让我们把项目运行起来。我这里是在Windows下开发Android平台的应用，并且在此之前，已经用USB线连接好了一台Android版本7.1.1的真机。
运行项目的方法，就是进入DebugTest项目目录，此时执行命令行react-native run-android。注意，这里启动时会新弹出另一个窗口，用于在8081端口启动一个叫做Metro Bundler的服务，这个窗口在开发时是需要保持运行着的。
图2. Metro Bundler 窗口
同时，可以看到原cmd命令行窗口，显示在真机上安装了apk，并自动对8081端口进行了某种映射，使真机上的应用和我们将要调试的代码建立了动态的关联。这个过程会比较消耗开发者电脑的系统资源，耐心等待一会儿就好。
图3. 原cmd命令行窗口
当Metro Bundler窗口显示index.js的映射进度达到100%时，手机上就可以看到默认的应用界面了。
图4. 默认应用界面
同时，我们也可以退出应用，在手机的桌面上找到这个安装好的应用。这里，它的名字就是DebugTest，图标是一个默认的安卓样子。
我们进入这个应用，这时如果摇一摇手机，会弹出调试相关的设置：
图5. 调试设置界面
Reload就是重刷整个应用，类似于在浏览器的F5刷新。
Debug JS Remotely这个我们先留一个悬念，待会再来看。
先看看Enable Live Reload和Enable Hot Reloading。这两个都可以实现在代码保存时自动更新界面，它们区别是：Live Reload会重刷整个界面，相当于手动执行一次Reload。而Hot Reloading控制得更精准，它不会重刷整个界面，只会更新修改代码时影响的那个范围。官方文档里描述的是：This will allow you to persist the app's state through reloads. 也就是说，Hot Reloading时整个应用的状态是不会改变的，页面也是不会整个重刷的。有趣的是，与Live Reload对比，Hot Reloading的Reloading这个正在进行时的语法，也似乎意味着Hot Reloading是当程序正在运行时去热乎乎地替换。
也许是因为各种 Reloading过于强大，它有时会出一点问题，比如在开启Live Reload或者Hot Reloading后，偶尔代码错误时手机上弹出的红屏界面在代码修改好后仍然不能恢复，这种时候，就需要手动Reload界面才能解决。
让我们只是Enable Live Reload，然后从react-native引入Button，在View里加上一个按钮。
图6. 添加按钮
这个时候，保存代码。手机界面确实立即就变化了！说明Live Reload确实生效了。
不过，不是我们想要的界面，而是出现红屏错误提示。
图7. 红屏错误提示
不用怕，遇到问题很正常。这时，可以从头细心阅读错误提示，发现它指出The title prop of a Button must be a string，并且这个error is located at: in Button (at App.js:37)。根据这个线索，我们看到App.js的第37行，正是刚才添加的Button代码。
查阅文档发现，在RN里，Button组件有许多属性，其中onPress和title这两个属性是required的，也就是必须要有。
图8. 官方文档关于Button的节选
所以我们修改代码，
图9. 补全Button需要的属性
保存，手机界面就刷新了，并显示出刚才添加的Button。
图10. 正常运行