React Native 断点调试 (react-native版本 0.72.6)

931 阅读1分钟

[React Native 断点调试(React Native Tools)]

我们在项目中会有很多调试方法,一般我们用warn、alert等等都可以,

但有时我们需要跟着流程定位问题,那么此时我们就需要使用断点调试了,当然别的方式也可以,只不过断点更加简单,以前很简单,自从0.70以后有了Hermes过后就不能再浏览器中debugger,然后摇一摇,点击debug就报错

下面简述下使用React Native Tools实现

1、首先在应用商店找到React Native Tools然后安装 image.png  

2、.vscode文件下配置launch.json文件

代码:launch.json

{
    // 使用 IntelliSense 了解相关属性。 
    // 悬停以查看现有属性的描述。
    // 欲了解更多信息,请访问: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "react-native: Debug Android",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "android"
        }
    ]
}

3、关闭终端,点击运行--启动调试,模拟器开启Debug

VScode:

image.png

模拟器: 摇一摇,出现这个调试菜单

image.png

先点setting

image.png  

设置局域网调试IP

image.png

再点debug

可能报这个错

image.png

vscode多点几次重新调试,会重新跑app

image.png

总的来说现在调试会出现奇奇怪怪的问题,摸索中出现问题在说  

至此使用React Native Tools断点调试完成