react-native - 无法在 vscode 上调试 expo 项目

Question

我有一个 expo 项目，我们可以运行和构建它，它可以在 android 和 iOS 中正常工作。我想要的是使用我的 Visual Studio Code 调试所述项目。

我遵循了一些指南并尝试了以下方法：

在 vscode 中添加 React Native Tools 扩展。
在 vscode 调试器中添加“附加到打包程序”配置。
更改 settings.json 中的“react-native.packager.port”以匹配 expo 打包程序端口 (19001)
运行博览会（博览会开始）
并尝试通过启用和禁用“远程调试 JS”以及打开或关闭 chrome 调试器来启动调试器

我得到的结果是带有调试器控件的小窗口出现了一秒钟然后消失，没有任何日志或证据表明它做了什么。我检查了 vscode 中的终端选项卡、输出选项卡和调试控制台选项卡

顺便说一句，当我启用“远程调试 JS”时，chrome 调试器会启动并完美运行。

我的 launch.json 是由 react native tools 扩展自动生成的。我还尝试将 "sourceMaps":true 添加到附加配置中，最终结果是相同的。这是我的代码：

{
// 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",
        "cwd": "${workspaceFolder}",
        "type": "reactnative",
        "request": "launch",
        "platform": "android"
    },
    {
        "name": "Debug iOS",
        "cwd": "${workspaceFolder}",
        "type": "reactnative",
        "request": "launch",
        "platform": "ios"
    },
    {
        "name": "Attach to packager",
        "cwd": "${workspaceFolder}",
        "type": "reactnative",
        "request": "attach"
    },
    {
        "name": "Debug in Exponent",
        "cwd": "${workspaceFolder}",
        "type": "reactnative",
        "request": "launch",
        "platform": "exponent"
    }
]

}

以防万一，操作系统是 Ubuntu 16.04

提前致谢！

score 21 · Accepted Answer

这是一个 .vscode/launch.json 文件，其中包含一个 Attach to packager 配置。
请注意，端口属性设置为 19001。

{
    // 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": "Attach to packager",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "attach",
            "port": "19001",
            "sourceMaps": true
        }
    ]
}

要调试您的应用程序，首先使用 vscode 控制台启动 expo 打包程序：npm run start

然后启动“附加到打包程序”调试器配置文件。在 Debug Console 窗口中，您应该看到调试器现在已附加到打包程序。

最后返回控制台并在所需目标上启动您的应用程序。即：'a' 代表安卓。

您现在应该看到调试器已在 vscode 中连接，而不是在浏览器中打开一个新的 react-native 调试选项卡。

score 8 · Accepted Answer

感谢Loupi和Bharat Lalwani，您的回答确实帮助了我，我想发布一个更新和详细的答案。

安装React Native 工具

将附加到打包程序配置添加到.vscode/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": "Attach to packager",
        "cwd": "${workspaceFolder}",
        "type": "reactnative",
        "request": "attach",
        "port": "19000", //Port number may be different in your machine
        "sourceMaps": true
    }
]

编辑 vscode 设置文件添加"react-native-packger.port": 19000 //same port in the previous step

vscode 设置文件位置：

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

运行expo start并在终端中找到正确的端口（在我的情况下，它是 19000，如果您的端口不同，则在步骤 2 和 3 中更新端口，步骤应用程序并重新运行expo start）
打开调试菜单并单击附加到打包程序
返回终端并按下a以在 android 模拟器中启动应用程序（确保模拟器已从 AVD 管理器运行），如果模拟器卡在白屏上，请转到终端按下r以重新加载应用程序
如果没有命中断点，请确保Debug remote JS在您的模拟器中启用，而应用程序在模拟器中运行时按下CTRL+M并选择 Debug remote JS

注意：要开始一个新的调试会话，首先确保CTRL+C在终端中停止使用expo服务器并断开vs代码中的调试器，如下面的截图，您可能还需要先在模拟器中关闭正在运行的应用程序

记得在 vscode 中附加调试器之前关闭浏览器中的 debugger-ui 选项卡

score 1 · Accepted Answer

我已经完成了 Loupi 提到的所有更改。但对我来说，为端口号工作。19000。我必须将 settings.json 和 launch.json 端口都设置为“端口”：“19000”。

这是以下图像的代码片段：-

{
    // 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 Direct iOS - Experimental",
            "request": "launch",
            "type": "reactnativedirect",
            "cwd": "${workspaceFolder}",
            "platform": "ios"
        },
        {
            "name": "Debug iOS",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "ios"
        },
        {
            "name": "Attach to packager",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "attach",
            "port" : "19000",
            "sourceMaps": true
        }
    ]
}

react-native - 无法在 vscode 上调试 expo 项目

3 回答 3

Related

Reference