React Native学习笔记四：VSCode调试ReactN

2019-03-05 本文已影响0人 IT前沿技术分享

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

一. DEBUG配置

添加配置1

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

添加配置2

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

Debug Android
Debug iOS
Attach to packager
Debug in Exponent

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

添加断点1

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

添加断点2

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

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

调试

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

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