How to debug react-native-web with Expo and vscode?

Question

I am trying to find how react-native-web apps (specifically using Expo and vscode) can be debugged.

I found guidance neither in the web, nor in the react-native-web 's own site.

The debug configuration that comes with the React Native Tools aims to run within the Expo application, but my intention is to use the browser to debug/test the react-native-web behaviour.

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

Answer 1

I could have found the method. For all who are stuck the method is as follows.

1. Go to the debug pane.

   

2. If previously not chosen choose "Run and Debug"

   

3. Choose add configuration.

   

4. Choose Chrome: Launch (we would like to launch a chrome browser when we start debugging, you may have alternative browsers, or you may choose to have the attach approach also). (We will come back to here after step 5.)

   

It will add a configuration like:

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

5. Open the vscode's terminal and run expo start --web and you should see your server and related port. (Below, in my case it is port 19006.)

6. Modify the configuration.

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

7. Confirm that expo start --web is running then go to the debug pane and launch a browser by the debug start button, with "Launch Chrome 19006" value:

After these 6 steps you should be able to debug Expo applications that use react-native-web through the vscode.