使用VsCode开发React-Native[debug调试+智能提示]

前言：
这篇博文主要介绍两个方面：
1. react-native项目的调试
2. react-native项目的代码智能提示
这两个问题主要是由于reactnative和vue，react等框架不一样，这个是跨平台的，写的app不能直接在网页上即看即所得[意味着不能”直接地”console.log打印..]只能在真机调试或者在模拟器中查看，所以关于调试就显得特别重要。其次关于智能提示：react-native同react一样，秉承”一切元素皆组件“设计理念，但它比react更甚：直接抛弃html标签，所有“标签”都得用它的封装好的组件。所以这就是智能提示的重要性。

1. react-native项目的调试

1.1 使用vscode调试

1.1.1 安装React Native Tools

插件支持react-native代码高亮、debug以及代码提示等十分强大的功能

1.1.2 使用React Native Tools进行调试

1. 点扩展插件上面的调试

2. 播放按钮的旁边，给预调试的项目添加配置
   

3. 然后弹出一个选择 ，选react native
   

4. 这里我选的是Debug Android[因为我的模拟器是安卓的]
   
   随后生成一个launch.json文件，按照默认配置即可。对了我项目是在react native 脚手架上写的所以默认配置即可
   

快捷键F1—>输入 React Native Run Android 来部署应用
相当于命令行敲下 的react-native run-android

应用成功启动：

开始debug:
1. 打断点
例如我们在注册页面的判空那里打个断点，当用户点击注册按钮时触发这个函数：

1. 开始调试
   调试——》debug Android [即选择刚刚我们新添加的那个配置] ——》开始调试[播放按钮]
   

开启调试成功: 会出现一行调试的悬浮窗口

当我触发注册按钮时：断点

接下来就是正常的调试步骤了
按钮依次是：继续,单步跳过，单步调试，单步跳出，重启，停止

1. 对了还有讲下右边界面
   可以看变量，增加断点等
   鼠标移上变量也可以看到变量值，这和chrome调试差不多
   

1.2 Chrome开发者工具调试

1.win10下 在模拟器ctrl + m 打开菜单选项
选择debug js remotely

此时谷歌会打开新页面,如未打开自己输入以下地址亦可
http://localhost:8081/debugger-ui/

页面显示Status: Debugger session #0 active. 则证明模拟器连接上了该调试。

1. F12 打开控制台
   在控制台即可以看到console的输出，以及在sources项中断点调试js脚本[和一般的chrome调试没差别]
   只是在网页不能看到app样子只能输出信息 ，app还是得在真机或者模拟器上查看

2. 利用Typings为Visual Studio Code实现智能提示功能

2.1 全局安装typings

npm install -g typings

2.2 使用typings安装相关代码提示包

先进入你的react-native项目中，在项目的根目录下:

typings install dt~react-native --save --g

安装完成后VSCode的根目录下会多一个typings.json文件
至此配置完，以后关于reactnative的代码就有自动提示+补全。

当然也可以使用typings 为node，Lodas等增加智能提示。

后记：

学习reactnative让我真正由衷地发出前端今非昔比的感叹..
从环境搭建到写的应用可以直接调手机的本地文件[前端再也不是简单的网页脚本了。。]到代码调试。让我找到了以前用c++写游戏调试的码感。。
大抵是以前的一个html+js文件就可以跑个网页的时代一去不复返了，大抵是前端走向全栈将要走向客户端后端的大统一了..
要学的东西很多，很新，技术也层出不穷的，不过让我兴奋，为前端感到骄傲~