[React Native]Visual Studio Code调试React-Native

1.配置Visual Studio Code为React-Native开发IDE

参考这篇文档
以及
知乎

2.添加配置

1. Open launch.json

2. Add Configuration

3. 选择 React Native:Debug iOS 这个根据自己需要

image.png

添加后的配置如下：

{
            "name": "Debug iOS",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "sourceMaps": true,
            "trace": "verbose",
            "outDir": "${workspaceRoot}/.vscode/.react"
        },

3. Debug

image.png

4.启动Debug后将会打开一个Chrome Tab

如下图

- 打开开发者模式

-开启断点调试

-打开你的JS代码

-设置断点进行调试

image.png

5.重新加载你的React-Native APP

在iOS模拟器中Cmd+D调出Debug 菜单，选择Reload重新加载代码，程序将在断点处停下来。

以上就是在Chrome中断点调试React-Native代码的过程。
记得在Visual Studio Code中安装Debugger For Chrome。

image.png

接下来我们将在Visual Studio Code中断点调试iOS模拟器中的JS代码。
确保安装了 React Native Tools 插件。

运行后设置断点（测试下来第一次启动无法捕捉到断点）

image.png

image.png