关于android：使用vscode调试器调试React Native

Debug React Native using vscode debugger

我需要在VsCode上调试我的react-native应用程序，并且是新来响应本机开发的..：:)我搜索并遵循不同的方法，但是没有运气.. :(
首先，我遵循以下方法https://medium.com/@tunvirrahmantusher/react-native-debug-with-vscode-in-simple-steps-bf39b6331e67并遵循此方法https://www.youtube.com/watch?v也= 0_MnXPD55-E。但没有运气。

让我解释一下我的调试过程。

首先，将react本机配置添加到Lunch.json。

像这样将packager.info.json添加到.expo目录

{
" expoServerPort"：19001，
" packagerPort"：19002，
" packagerPid"：65931
}

然后像这样将settings.json添加到.vscode目录

1
2
3
4
5
6
7

{
"react-native": {
"packager": {
"port" : 19002
}
}
}

然后在vscode调试选项上运行附加到打包程序并启用

Remote JS Debugging

在我真正的android设备上运行的本机应用程序上做出反应。但是vscode调试点不会触发。

我试过之后

Debug Android

选项vscode调试器。然后会弹出http：// localhost：8081 / debugger-ui /窗口。但是vscode调试器点没有命中。

谁能知道如何使用vscode正确设置响应本机应用调试的方法，请给我指导以完成此操作... :) :)
谢谢..

使用Attach to packager config并关闭该localhost：8081 / debugger-ui选项卡，因为如果它保持打开状态，则vscode将无法连接到调试器。现在再试一次，单击vscode调试器中的绿色播放按钮，然后重新加载应用程序。

我们还需要react native tools扩展名，否则您将得到错误：The configured debug type"reactnative" is not supported。
这是我目前正在使用的我的launch.json，以防您需要它：

{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version":"0.2.0",
"configurations": [
{
"name":"Debug Android",
"program":"${workspaceRoot}/.vscode/launchReactNative.js",
"type":"reactnative",
"request":"launch",
"platform":"android",
"sourceMaps": true,
"outDir":"${workspaceRoot}/.vscode/.react"
},
{
"name":"Debug iOS",
"program":"${workspaceRoot}/.vscode/launchReactNative.js",
"type":"reactnative",
"request":"launch",
"platform":"ios",
"sourceMaps": true,
"outDir":"${workspaceRoot}/.vscode/.react"
},
{
"name":"Attach to packager",
"program":"${workspaceRoot}/.vscode/launchReactNative.js",
"type":"reactnative",
"request":"attach",
"sourceMaps": true,
"outDir":"${workspaceRoot}/.vscode/.react"
},
{
"name":"Chrome Attach to packager",
"program":"${workspaceRoot}/.vscode/launchReactNative.js",
"type":"chrome",
"request":"attach",
"port": 9222,
"sourceMaps": true,
"outDir":"${workspaceRoot}/.vscode/.react"
},
{
"name":"Debug in Exponent",
"program":"${workspaceRoot}/.vscode/launchReactNative.js",
"type":"reactnative",
"request":"launch",
"platform":"exponent",
"sourceMaps": true,
"outDir":"${workspaceRoot}/.vscode/.react"
}
]
}