Question

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

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

在vscode中添加React Native Tools扩展。
在vscode中添加“附加到打包程序”配置调试器。
更改settings.json中的“ react-native.packager.port”以使其匹配世博包装商港口（19001）
正在运行的博览会（博览会开始）
并尝试使用“远程调试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

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

安装React Native Tools

将附加到打包器配置添加到 .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 {{3 }}

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

<块引用>

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

Answer 2

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

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

最后回到控制台，并在所需的目标上启动您的应用程序。即：“ a”（对于android）。

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

Answer 3

我已经完成了 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
        }
    ]
}

无法在vscode

3 个答案: