ReactNative（以下简称RN）为传统前端开发者打开了一扇新的大门。其中，使用浏览器的调试工具调试移动端代码无疑是最吸引开发者的功能之一。试想一下，当你在手机屏幕上按下一个按钮时，处理事件的代码可以立即在浏览器的调试工具中进行调试，并且每当你修改代码时，界面可以快速重新加载，省去了漫长的编译时间，它将如何提高工作效率。传统的Web前端开发者自然熟悉浏览器调试工具，但是对于如何在RN中使用它与移动端相结合，他们可能会相当陌生。这也成为部分开发者踏入RN移动开发之门的第一道小门槛。本文是作者在参考官方文档的同时探索RN调试过程的记录。希望能够帮助新手开发者迈出一小步，更快地跨过这个门槛。开始前，需要搭建本地开发环境，并有一部Android5.0以上版本的手机连接电脑。首先使用官方工具react-native-cli创建初始项目并安装依赖。安装命令是“react-nativeinitDebugTest”（DebugTest是我们这次的项目名）。安装完成后，会多出一个名为DebugTest的项目文件夹。文件夹的结构如下：让我们运行项目。我正在Windows下开发Android平台的应用程序，在此之前，我已经用USB数据线连接了一台Android版本为7.1.1的真机。运行项目的方式是进入DebugTest项目目录，此时执行命令行react-nativerun-android。注意这里启动的时候会弹出另外一个窗口，这个窗口是用来在8081端口启动一个叫MetroBundler的服务的，这个窗口在开发过程中需要保持运行。同时可以看到原来的cmd命令行窗口，显示真机上安装了apk，并自动在8081端口进行某种映射，从而动态关联真机上的应用使用我们要调试的代码。该过程会消耗开发者电脑的系统资源，请耐心等待一段时间。当MetroBundler窗口显示index.js映射进度达到100%时，可以在手机上看到默认的应用界面。同时，我们也可以退出应用，在手机桌面找到安装好的应用。在这里，它的名称是DebugTest，它的图标是默认的Android图标。当我们进入这个应用程序的时候，如果此时摇晃手机，就会弹出调试相关的设置：Reload就是刷新整个应用程序，类似于浏览器中的F5刷新。给DebugJSRemotely留个悬念，待会再看。首先查看启用实时重新加载和启用热重新加载。这两个都可以在保存代码时自动更新界面。它们的区别在于：LiveReload会刷新整个界面，相当于手动执行一次Reload。HotReloading控件更精准，不会刷新整个界面，只会更新代码修改时受影响的范围。官方文档描述：这将允许您通过重新加载来保持应用程序的状态。也就是说HotReloading时整个应用的状态不会发生变化，整个页面不会被刷新。有趣的是，与LiveReload相比，HotReloading的Reloadinginprogress的语法似乎也意味着HotReloading是在程序运行的时候热情地替换它。可能是各种Reloading太强大了，有时候会出点小问题，比如开启LiveReload或HotReloading后，手机偶尔会出现代码错误时手机弹出的红屏界面，之后无法恢复代码被修改。这时，需要手动重新加载界面来解决。让我们只启用LiveReload，然后从react-native导入Button，并添加一个按钮到View。此时，保存代码。电话界面确实会立即发生变化！说明LiveReload确实生效了。然而并不是我们想要的界面，而是出现了红屏错误提示。别担心，有问题很正常。这时候你可以仔细阅读从头开始的报错信息，发现它指出了ThetitlepropofaButtonmustbeastring，而这个错误位于：inButton(atApp.js:37)。根据这个线索，我们看到App.js的第37行就是刚刚添加的Button代码。查阅文档后发现，在RN中，Button组件有很多属性，其中onPress和title这两个属性是必须的，也就是必须存在。于是我们修改代码，保存，手机界面刷新，显示刚刚添加的Button。这里还有一点值得注意。如果只给Button中的title设置值，不给onPress设置值，界面不会出现红色错误，但底部会出现黄色警告。仔细看会发现这两个属性的Type其实是不一样的。可以看到，当要求类型为string但实际未定义时，会报错，当要求类型为function但实际未定义时，只会报warning。同时可以看到，在上面的代码中，当按钮被按下时，会调用一个日志事件。但是我在哪里可以看到打印的日志？有两种方法。首先是在命令行上显示，在项目当前目录下新建一个命令行窗口（注意一定要在项目当前目录下），然后在最下面可以看到输出内容输入，它不仅可以为某些输入提供实时反馈，还可以保存以前的输入。比如下面三个输入，前两个输入是在之前没有打开命令行窗口的时候按下的。也许你在想：我不想在命令窗口中看到输出，但我希望能够在浏览器中看到那样的输出，甚至断点调试。这是查看日志的第二种方式。回到本文的初衷。我们回过头来看调试设置界面中的DebugJSRemotely选项，现在点击它。这时候会弹出一个Chrome的标签页（当然本地需要预装Chrome）。请注意，此处的Status：Debuggersession#0active表示程序已成功与页面建立连接。这时在浏览器开发者工具的调试窗口中，也可以看到打印出来的日志。它可以通过断点调试更进一步。为了更好的尝试调试功能，我们修改一下代码，增加一个sayHello方法来输出日志。保存，如预期的那样，页面因实时重新加载而刷新。和调试web前端代码一样，我们打开浏览器的开发者工具，找到代码文件，在sayHello函数中设置断点。这时候按下手机上的测试键，可以看到程序执行已经停在了断点处，这和调试网页代码差不多：但是和调试纯网页代码有两点不同。首先，在浏览器页面看不到应用界面，在手机端只能看到界面。第二，手机端的接口在程序掉线的情况下依然可以接收到事件。比如此时手机上应用的界面好像没有响应，但是如果你按几次测试按钮，事件就会被记住，到时候会一一响应。只是现在程序在第一次按下按钮时中断了。我们让程序继续执行（如果在断点的时候多次按下按钮，会多次卡住）。我们按了6次，在调试工具下也显示了6次的输出。这和调试网页时不同：调试网页时，一旦执行断点，浏览器页面实际上是无法点击的。至此，你是不是觉得用RN开发没有那么难了？至于ToggleInspector、ShowPerfMonitor、Start/StopSamplingProfiler和DevSettings，我们暂时可以忽略它们。我们已经知道调试设置中的RemoteJSDebugging、LiveReload和HotReloading。相信我们可以更从容地调试简单的RN应用。这里我们以Windows下的Android为例。其实在Mac下开发iOS也是类似的。希望本文的分享对尝试RN的新手朋友有所帮助。如果你对下一篇要讲的内容有自己的想法，欢迎留言告诉我，我们一定会认真考虑的。移动应用开发利器：SpreadJS纯前端表单控件和WijmoJS纯前端控件集，为您的移动应用带来更灵活的操作体验和更好的外观风格。欢迎下载。延伸阅读：纯干货分享：如何在React框架中使用SpreadJS
