React Native的开发工具和调试方法

一、背景介绍

接触一门新的语言，第一是看官方的开发文档，第二自然就是开发工具，第三就是调试方法。

下面介绍RN所需要用到的开发工具和调试方法。

二、开发工具

1.sublime

Sublime Text 是一个复杂的文本、代码编辑器。出色用户界面，非凡的功能和惊人的性能。

下载地址：http://www.sublimetext.com/3

破解方法：点击菜单－help－Enter License

为了开发React Native。需要再加入几个插件。

a) package controller

在sublime中View>Show Console控制台，复制下面的内容后回车，安装成功后重新启动sublime。

安装这个的目的是可以方便下载其他插件：输入package controller:install package 回车，然后输入我们要的插件就可以install下来了。

b) react-native-snippets

这个插件快速搭建一个RN开发环境还有一些生命周期的语法，搜索：react-native-snippets。(具体操作看https://packagecontrol.io/packages/react-native-snippets)

c) sublime-react

RN是基于React.js的，都是用JSX语法，是用来显示语法颜色，使代码看起来更漂亮。（具体内容看https://github.com/reactjs/sublime-react）

d) babel

 babel插件支持ES6语法和JSX语法，要比sublime-react添加更多关键字，看起来更舒服。出现问题也会提示。

对比babel和sublime-react，更推荐babel。

至此，react-native的开发工具环境就搭建完成了。

在实际开发中遇到以下问题：

1.工程目录文件很多，开了一大堆窗口来切换，效率很低。

解决：可以直接拖文件夹进来，sublime左侧会展示目录结构。

2.没有太多的语法提示，定位bug比较难受。

解决：建议改一点代码就跑一下，反正是秒编嘛。

2.atom

经过测试，Atom在install nuclide之后会变得很卡，目前不建议尝试。如果非要尝试，看这篇：http://www.jianshu.com/p/5d772d2c6f5e

相信过不了多久，facebook完善了nuclide插件后，一款强大的rn编辑器就诞生了。

3.WebStorm

目前用过最好使的js编写的ide神器。和idea是同一家公司出的，所以各种像idea和as啊。

logo对比：

如果说开发JS像是在陌生的异域打拼，那么用了WebStorm就有一种回家了的感觉。

webstorm11.0.3 新特性描述：更好的支持了react语法。

话不多少，看截图就行，好用不好用，试试就知道。

三、调试工具

安装react dev的chrome插件（地址：官方插件）。在模拟器或真机菜单中选择Debug JS，即可开始调试。

会自动访问 http://localhost:8081/debugger-ui，应当能看到一个页面，或是按F12打开开发者菜单。

槽点：

• 在浏览器改动css后，模拟器的布局不跟着更新。

• 浏览器的dom和手机上的元素位置对不准确。

• debug状态没有关闭的情况下，模拟器会出现超时。