Can't debug expo project on vscode

Question

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:

Adding React Native Tools extension in vscode.
Adding the "Attach to packager" configuration in the vscode debugger.
Changing the "react-native.packager.port" in settings.json to match the expo packager port (19001)
Running expo (expo start)
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!

score 25 · Accepted Answer · answered Nov 14 '19 at 13:32

25

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.

answered Nov 14 '19 at 13:32

Loupi

691
7
9

3

It worked! Thanks for the help! Just a note for anyone else with the same problem: After everithing Loupi said, I commented the modification I did in the settings.json file and when the app is running (after pressing the 'a' button for android) I had to activate the "Remote JS Debugging" – Rodrigo Brickman Nov 14 '19 at 17:50
1

If you're reading @Rodrigo's comment in 2020, you need to press 'd' instead of 'a' now and just pick "Debug" (instead of Remote JS Debugging) – Jon Oct 16 '20 at 01:49
1

Following your steps I could attach the debugger to expo packager, but the app hangs on loading, bundler seams to finish compiling but the app freezes at 100% and does not go beyond the splash screen... Any clues? tnks! – Douglas Schmidt Jan 19 '21 at 11:28
@DouglasSchmidt Did you figure it out? – Jalil Compaoré Feb 04 '22 at 16:38

Mahmoud Farahat · Answer 2 · 2021-11-01T09:44:42.013

Thanks Loupi & Bharat Lalwani your answers really helped me, and I want to post a more updated and detailed answer.

Install React Native Tools

Add Attach to packager config to .vscode/launch.json (Create the file if not exist)

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

Edit vscode settings file to add "react-native-packger.port": 19000 //same port in the previous step

vscode settings files locations:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

run expo start and find the correct port in the terminal (in my case it's 19000 update the port in steps 2&3 if yours is different, step the app and re-run expo start )
open the debug menu and click attach to packager
go back to terminal and press a to start the app in android emulator (make sure that the emulator is already running from AVD manager), if the emulator stuck on a white screen go to terminal press r to reload the app
if no breakpoints where hit, make sure that Debug remote JS is enabled in your emulator, while the app is running in the emulator press CTRL+M and select Debug remote JS

Note: to start a new debugging session, first make sure to stop expo server using CTRL+C in the terminal and disconnect the debugger in vs code as in the following screenshot, you may also need to close the running app in emulator first

Remember to close debugger-ui tab in the browser before attaching the debugger in vscode

Thanks for such detailed explanations, not easy BTW each part was crucial for it to succeeds — TOPKAT, Sep 29 '22 at 17:05

Bharat Lalwani · Answer 3 · 2021-05-18T12:52:15.073

I have done all changes as Loupi mentioned. But for me worked for Port no. 19000. I have to set both settings.json & launch.json port as "port" : "19000".

Here is the code snippet for the below images:-

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

Please, prefer to paste code, image is less usable. – YLR Jan 22 '21 at 10:22 — YLR, Jan 22 '21 at 10:22
@YLR I have added the code snippet above. – Bharat Lalwani May 18 '21 at 12:53 — Bharat Lalwani, May 18 '21 at 12:53

Can't debug expo project on vscode

3 Answers3

Linked