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