无法在 vscode 上调试 expo 项目

Question

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

我遵循了一些指南并尝试了以下操作：

1. 在 vscode 中添加 React Native Tools 扩展。
2. 在 vscode 调试器中添加“Attach to packager”配置。
3. 更改 settings.json 中的“react-native.packager.port”以匹配 expo packager 端口（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 文件，带有单个附加到打包程序配置。
请注意，端口属性设置为 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 调试选项卡。

Answer 2

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

1. 安装React Native 工具

2. 将附加到打包程序配置添加到.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
• macOS $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 选项卡