React Native开发和调试工具

目标平台：Android。
按照官网教程搭建开发环境（RN中文网教程：http://reactnative.cn/docs/0.48/getting-started.html#content）。

Win 10：因为目前只开发android版本，所以windows就可以。很多文档以及教程都是针对macOS上的开发，用到windows上有时会出现一些问题，这个需要稍微注意下。
Visual Studio Code：安装插件React Native Tools，用于运行、调试应用，语法提示。
Android Studio 模拟器：使用Nexus S，因为这个模型是有菜单键的，高版本的模拟器通常没有。使用快捷键Ctrl+M也可以打开菜单栏。如果使用的IDE不是Android Studio，模拟器运行起来就可以关掉Android Studio了，不会影响模拟器。

模拟器调试菜单
- Reload：重新加载。将js代码部分重新生成bundle，然后传输给模拟器或手机。有人说快捷键是ctrl+R，但我发现不好使，实际上是连按R键...
- Debug JS Remotely：启动JS远程调试功能。此时Chrome会被打开，同时会创建一个 http://localhost:8081/debugger-ui Tab页。（我的情况是不会自动创建tab页，需要手动打开页面）
- Enable Live Reload：动态加载。当js代码发生变化后，React Native会自动生成bundle然后传输到模拟器或手机上。
- Enable Hot Reloading：热加载。每次保存代码时Hot Reloading功能便会生成此次修改代码的增量包，然后传输到手机或模拟器上以实现热加载。相比 Enable Live Reload需要每次都返回到启动页面，Enable Live Reload则会在保持程序状态的情况下，就可以将最新的代码部署到设备上。
- Toggle Inspector：在模拟器中查看组件样式。不怎么好用。
Genymotion 模拟器：安装了但是感觉跟Android Studio模拟器差不多。
Chrome 开发者工具：调试JS代码。在模拟器中打开菜单栏，点击Debug JS Remotely，Chrome会自动打开一个标签页，如果没有自动打开，则直接访问http://localhost:8081/debugger-ui。F12打开Chrome开发者工具，主要看source标签中的代码，可以添加断点调试。

Chrome开发者工具

React Developer Tools：可以用来看组件结构，props，state等。使用命令npm install -g react-devtools安装。一开始安装有问题，启动的时候报错。
启动react-devtools报错
后来看到RN中文网上的说明，于是把node_modules文件夹里react-devtools和electron删掉，然后npm先安装electron，再安装react-devtools就好了。

react-devtools依赖于electron，而electron需要到国外服务器下载二进制包，所以国内用户这一步很可能会卡住。此时请在环境变量中添加electron专用的国内镜像源：ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/"，然后再尝试安装react-devtools。

参考链接

RN中文网调试：http://reactnative.cn/docs/0.48/debugging.html#content
React Native调试技巧与心得：http://www.cnblogs.com/gaosheng-221/p/6954434.html

参考链接

更多相关文章

随机推荐