如何在 Visual Studio Code 中为 React Native 设置调试？

Question

我进行了搜索，但除 Visual Studio Code 文档外找不到任何外部资源，仅遵循这些文档不允许在 iOS 或 Android 中调试 React Native 应用程序。

我不断收到错误消息（此消息适用于 Android，适用于 iOS 是类似的：

[vscode-react-native] [警告] 无法在http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false&minify=false导入脚本。 调试不起作用：尝试从应用程序内部重新加载 JS，或重新连接 VS Code 调试器：路径必须是字符串

我的launch.json文件为：

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Android",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "android",
            "internalDebuggerPort": 9090,
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Debug iOS",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios",
            "target": "iPhone 6s",
            "internalDebuggerPort": 9090,
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Attach to packager",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "attach",
            "internalDebuggerPort": 9090,
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        },
        {
            "name": "Debug in Exponent",
            "program": "${workspaceRoot}/.vscode/launchReactNative.js",
            "type": "reactnative",
            "request": "launch",
            "platform": "exponent",
            "internalDebuggerPort": 9090,
            "sourceMaps": true,
            "outDir": "${workspaceRoot}/.vscode/.react"
        }
    ]
}

我正在尝试在 iOS 模拟器或 Android 设备中进行调试，但该过程从未附加到外部 JS 调试器。

Answer 1

转到 vscode 中的调试选项并选择调试类型

• 选择附加到打包程序

• 运行你的本机应用程序

   react-native run-android

  -> 摇晃手机并选择Debugg remote JS选项

  完毕...

Answer 2

您可以使用 Vscode 扩展“ React native tools ”来调试 react-native 应用程序。