5

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

1 Answer 1

10

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

  1. Go to the debug pane.

    enter image description here

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

    enter image description here

  3. Choose add configuration.

    enter image description here

  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.)

    enter image description here

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}"
        },
  1. 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.)

enter image description here

  1. Modify the configuration.
        {
            "name": "Launch Chrome 19006", // Modified as 19006
            "request": "launch",
            "type": "chrome",
            "url": "http://localhost:19006", // Modified as 19006
            "webRoot": "${workspaceFolder}"
        },
  1. 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:

enter image description here

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.