react-nativedebuggingvisual-studio-codeexporeact-native-tools

Can't debug expo project on vscode


I have an expo project, which we can run and build and it works correctly in android and iOS. What I want is to debug said project using my Visual Studio Code.

I followed some guides and tried the following:

  1. Adding React Native Tools extension in vscode.
  2. Adding the "Attach to packager" configuration in the vscode debugger.
  3. Changing the "react-native.packager.port" in settings.json to match the expo packager port (19001)
  4. Running expo (expo start)
  5. And tried to start the debugger with "Debug JS remotely" both enabled and disabled and also with the chrome debugger open or closed

The result I get is the small window with the debugger controls appears for a second and then dissapears, without any logs or evidence that it did something. I checked the terminal tab, the output tab and the debug console tab in vscode

By the way, when I enable "Debug JS remotely" the chrome debugger does launch and works perfectly.

My launch.json was autogenerated by the react native tools extension. I also tried adding "sourceMaps":true to the attach configuration and the end result was the same. Here is my code:

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

}

Just in case you need it, the OS is Ubuntu 16.04

Thanks in advance!


Solution

  • Here is a .vscode/launch.json file with a single Attach to packager config.
    Notice that the port property is set to 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
            }
        ]
    }
    

    To debug your app, first start the expo packager, using the vscode console: npm run start

    Then start the "Attach to packager" debugger profile. In the Debug Console window, you should see that the debugger is now attached to the packager.

    Finally go back to the console and launch your app on the desired target. i.e: 'a' for android.

    Instead of seeing a new react-native debug tab opening in your browser, you should now see that the debugger is connected in vscode.