React Native学习笔记四：VSCode调试ReactNative项目

---

React Native学习系列：
React Native学习笔记一：搭建开发环境
React Native学习笔记二：试水第一个项目
React Native学习笔记三：IDE的选择-VisualStudioCode
React Native学习笔记四：VSCode调试ReactNative项目
React Native学习笔记五：项目基本结构分析
React Native学习笔记六：IOS从OC更换成SWIFT
………………

---

  上一个笔记里提到，VS Code的调试非常赞，这里就迫不期待的弄起来啦，废话少说，搞起

一. DEBUG配置

1. 添加配置文件

• 点击VSC扩展插件上面的调试
• 点击DEBUG右边的框框
• 再弹出栏选择Add Configuration

添加配置1

  这时候还会弹出另一个选择栏，在选择栏里选择React Native

添加配置2

  操作完毕后，会在.vscode目录下，自动产生一个launch.json的工程文件，这个就是我们要添加的配置文件，里面4个配置选项，不用做修改，按照默认配置即可

---

Debug Android
Debug iOS
Attach to packager
Debug in Exponent

---

2. 添加断点

  接下来，我们回到DEDUG，点击右边的选择栏，选择Debug IOS

添加断点1

  在index.ios.js（IOS界面搭建文件）文件上设置一个断点

添加断点2

3. 开始Debug

  快捷键F1—>输入 ReactNative 从候选的 Run on ios simulater 来部署应用，等APP在模拟器上显示后，选择debug 启动按钮，即可

  这时候要等待一小会，就可以看到已经跑到我们之前设置的断点了，然后就可以操作悬浮窗口 进行调试了。

调试

二. 总结

  利用VSCode调试RN项目，只需要做以上三步操作即可，是不是非常简单呀，这个就是我选择它作为开发工具的非常重要原因。

  上面提到一个.vscode目录，那么这个目录是干什么用的，还有其它的一些目录及文件有上面又分别是干什么的，这就涉及到项目工程的结构了。
  熟悉项目的结构，是开发的基本也是技术提升的一个重要途径，下一节课，计划对 React Native 项目结构做一次分析。