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. 正常运转
这儿还有一小点值得留意，假如只给Button里的title设了值，而没有给onPress设置，界面不会出赤色过错，而是在最下面呈现一条黄色正告。仔细看，会发现其实这两个特点的Type不相同。由此可知，当需求的类型是string而实践是undefined时，会报error，而需求的类型是function而实践是undefined时，只会报warnning。
一起能够看到，在上面的代码中，当按钮按下时，会调用一个打log的事情。可是打出的log在哪儿能够看到呢？
有两种办法。 榜首种是在指令行显现，在项目当时目录（留意，必定要在项目当时目录）再发动一个新指令行窗口，输入
就能够在最下面看到输出的内容了，它不仅能够实时反响现有的输入，还保存了之前的输入。比方，下面三次输入，前两次输入是在之前还没有敞开这个指令行窗口时按下的。
或许你会想：我不是想在指令窗口看到输出，而是想能够在阅览器里那样看到输出，乃至断点调试。这便是检查log的第二种办法。
回到本文的初衷。让咱们回头再看看调试设置界面中的Debug JS Remotely选项，现在点击它。这时会弹出Chrome的一个标签（当然，本地需求预先装置有Chrome）。
图11. 翻开Remote JS Debugging后弹出的阅览器标签
留意这儿的Status：Debugger session #0 active就表明程序与该页面成功树立衔接了。
这个时分在阅览器开发者东西的调试窗口，也能看到打出的log。并且它还能够更进一步地进行断点调试。
为更好地测验调试功用，咱们修正一下代码，增加一个sayHello办法输出log。
图12. 从头绑定onPress事情
保存，和料想的相同，页面改写了，由于Live Reload。
好像调试Web前端代码相同，咱们翻开阅览器的开发者东西，找到代码文件，并在sayHello函数里打一个断点。这个时分，按下手机上的Test按钮，能够看到程序履行到断点停下了，这与调试网页代码是多么类似：
图13. 阅览器上的断点调试
不过，与调试纯网页代码有两点不同。
榜首，阅览器的页面上看不到运用界面，只能在手机上看到界面。
第二，手机上的界面在程序被断住的情况下，依然能够接纳事情。举个比如，就在此刻，手机上该运用的界面表面上没什么反响，可是，假如你再屡次按下Test按钮，事情都会被记住，到时分会挨个呼应。仅仅现在程序断在了榜首次按下按钮的时分。
咱们让程序持续（假如在断点期间屡次按下按钮，会有屡次被断住）。
图14. 阅览器操控台输出
咱们按下了6次，调试东西下也显现出6次输出。这是与调试网页时的不同：当调试网页时，一旦履行到断点，阅览器的页面其实就不可点击了。
到这一步，是不是觉得运用RN开发也没有那么难呢？
至于Toggle Inspector, Show Perf Monitor, Start/Stop Sampling Profiler和Dev Settings，咱们暂时能够不必管它们。
现在现已知道了调试设置中Remote JS Debugging, Live Reload和 Hot Reloading。信任咱们现已能够比较沉着地Debug简略的 RN运用了。这儿以Windows下的Android为例，其实在Mac下开发iOS也是类似的。
期望本文的共享对测验RN的新手朋友有所协助。假如咱们对下篇想讲的内容有自己的主意，请留言告诉我，咱们必定会仔细考虑。
移动端运用开发利器：SpreadJS纯前端表格控件、WijmoJS纯前端控件集为您的移动运用带来愈加灵敏的操作体会和更佳漂亮的外观风格，欢迎下载。
扩展阅览：
纯干货共享：怎么在 React 结构中运用SpreadJS