使用vscode调试器调试React Native

Question

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

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

1. 首先将react本机配置添加到lunch.json.

2. 将package.info.json添加到.expo目录中，如所示

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

3. 然后将settings.json添加到.vscode目录中，如下所示

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

4. 然后在vscode调试选项上运行Attach to packager并启用

远程JS调试

在我真正的android设备上运行的react原生应用程序上。但vscode调试点不会触发。

在我尝试之后

调试Android

选项vscode调试器。然后http://localhost:8081/debugger-ui/窗口弹出。但vscode调试器点未命中。

有人知道如何正确地使用vscode进行设置反应本地应用程序调试吗？请给我指导…：(：(非常感谢。

Answer 1

使用attach to packager config并关闭localhost:8081/debug 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" } ] }

Answer 2

对于运行它仍然有问题的人。

为我修复的是：

1. 纱线启动
2. 关闭浏览器中所有博览会窗口
3. 在手机上启动应用程序
4. 在手机上启动应用程序并摇动它，直到进入调试器菜单和Disable Debugging
5. 进入./expo/packager-info.json。复制分装商端口
6. 粘贴到您在youtube./vscode/settings.json上根据上述教程创建的文件中
7. 在VSCode中按F5
8. 摇动手机以启用调试

Answer 3

您可以在VS Code上使用React Native Tools扩展(由Microsoft提供(来为React Native应用程序启用调试(就像任何其他IDE一样，而不是Chrome(。

你可以在我的另一个答案中详细阅读所有说明。