使用 vscode 调试器调试 React Native

Question

我需要在 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。但没有运气。

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

1. 首先将 react 原生配置添加到 lunch.json。

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

   { “expoServerPort”：19001， “包装器端口”：19002， “packagerPid”：65931 }

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

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

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

远程JS调试

关于在我真正的 Android 设备上运行的本机应用程序。但是vscode调试点没有触发。

我试过之后

调试安卓

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

任何人都知道如何正确设置使用 vscode 进行反应本机应用程序调试，请给我指导... :) :) 谢谢。。

Answer 1

使用附加到打包器配置并关闭该 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" } ] }

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）。

您可以在my another answer中详细阅读所有说明。