1.配置Visual Studio Code为React-Native开发IDE
2.添加配置
-
Open launch.json
-
Add Configuration
-
选择 React Native:Debug iOS 这个根据自己需要

添加后的配置如下:
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"trace": "verbose",
"outDir": "${workspaceRoot}/.vscode/.react"
},
3. Debug

4.启动Debug后将会打开一个Chrome Tab
如下图
- 打开开发者模式
-开启断点调试
-打开你的JS代码
-设置断点进行调试

5.重新加载你的React-Native APP
在iOS模拟器中Cmd+D调出Debug 菜单,选择Reload重新加载代码,程序将在断点处停下来。
以上就是在Chrome中断点调试React-Native代码的过程。
记得在Visual Studio Code中安装Debugger For Chrome。

接下来我们将在Visual Studio Code中断点调试iOS模拟器中的JS代码。
确保安装了 React Native Tools 插件。
运行后设置断点(测试下来第一次启动无法捕捉到断点)


网友评论