如何使用Expo和VSCode调试React Native Web？

Question

我正在尝试找到如何调试react-native-web应用程序（特别是使用Expo和vscode）的方法。

我在网上和react-native-web的官方网站上都没有找到指导。

React Native Tools提供的调试配置旨在在Expo应用程序中运行，但我的意图是使用浏览器来调试/测试react-native-web的行为。

{
    // 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 in Exponent",
            "request": "launch",
            "type": "reactnative",
            "cwd": "${workspaceFolder}",
            "platform": "exponent",
            "expoHostType": "local"
        }
    ]
}

- Mehmet Kaplan

Answer 1

我本来可以找到这个方法的。对于那些卡住的人，方法如下:

1. 前往调试面板。

   

2. 如果之前没有选择过，请选择“运行和调试”。

   

3. 选择添加配置。

   

4. 选择Chrome：Launch（我们想要在开始调试时启动Chrome浏览器，您可能有替代浏览器，或者您也可以选择使用附加方法）。 (步骤5后我们会回到这里。)

   

它将添加一个类似以下的配置:

        {
            "name": "Launch Chrome",
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:8080", // This line should be modified at step 6
            "webRoot": "${workspaceFolder}"
        },

5. 打开VSCode的终端并运行expo start --web，您应该看到服务器和相关端口。(在我的情况下，如下图，端口为19006。)

6. 修改配置。

        {
            "name": "Launch Chrome 19006", // Modified as 19006
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:19006", // Modified as 19006
            "webRoot": "${workspaceFolder}"
        },

7. 确认expo start --web正在运行，然后转到调试面板，通过启动调试按钮启动浏览器，并设置“Launch Chrome 19006”值。

完成上述6个步骤后，您应该能够通过VSCode调试使用react-native-web的Expo应用程序。

- Mehmet Kaplan