使用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. 首先添加将本机配置反应到lunch.json。
2. 像这样将packager.info.json添加到.expo目录 {“expoServerPort”：19001，“packagerPort”：19002，“packagerPid”：65931}
3. 然后将settings.json添加到.vscode目录中

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

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

远程JS调试

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

我试过之后

调试Android

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

任何人都可以知道如何设置反应本机应用程序调试与vscode正确请给我指示这样做... :) :)谢谢..

Answer 1

使用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"
    }
  ]
}

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中详细阅读所有说明。