如何在 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 应用程序

      react-native run-android

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

  完成...

Answer 2

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