无法在 vscode 上调试 expo 项目

Question

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

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

1. 在 vscode 中添加 React Native Tools 扩展。
2. 在 vscode 中添加“附加到打包程序”配置 调试器。
3. 更改 settings.json 中的“react-native.packager.port”以匹配 世博包装器端口 (19001)
4. 举办世博会（世博会开始）
5. 并尝试使用“远程调试 JS”启动调试器 启用和禁用以及打开或关闭 chrome 调试器

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

顺便说一句，当我启用“远程调试 JS”时，chrome 调试器确实会启动并且运行良好。

我的 launch.json 是由 react native 工具扩展自动生成的。我还尝试将 "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

提前致谢！

Answer 1

这是一个 .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 运行开始

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

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

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

Answer 2

感谢Loupi和Bharat Lalwani你的回答对我很有帮助，我想发布一个更更新、更详细的答案。

1. 安装React Native Tools

2. 将 Attach to packager config 添加到 .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
       }
   ]
   

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

vscode 设置文件位置：

• Windows %APPDATA%\Code\User\settings.json
• ma​​cOS $HOME/Library/Application Support/Code/User/settings.json
• Linux $HOME/.config/Code/User/settings.json

4. 运行 expo start 并在终端中找到正确的端口（在我的情况下，它是 19000，如果您的端口不同，请在步骤 2 和 3 中更新端口，步骤应用程序并重新运行 expo start）

5. 打开调试菜单并点击附加到打包器

6. 返回终端并按a 在android 模拟器中启动应用程序（确保模拟器已经从AVD 管理器运行），如果模拟器卡在白屏上，请转到终端按r 重新加载应用程序

7. 如果没有命中断点，请确保在您的模拟器中启用了Debug remote JS，当应用程序在模拟器中运行时按CTRL+M 并选择Debug remote JS

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

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

Answer 3

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

下面是sn-p的代码：-

{
    // 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
        }
    ]
}