alexwolf22 commented 8 months ago

🐛 What is the bug? How can we reproduce it?

Hi I am trying to use the VS code debugger with my react native expo app, but it's not stopping on breakpoints in VS code.

I have a development build installed on my local simulator, with the local server is using the expo dev client started with npx expo start --dev-client on my mac.

I am able to stop on breakpoints using the built in JS Debugger in the simulator. ( see photo below 1), but when I set the same exact breakpoint in VS code it's not stopping ( Photo 2)

I'm unsure what exactly causing the breakpoint not be working in VS code. The progress bar in the top left doesn't seem to be moving at all.

Photo 1

Photo 2

Here is my launch.json file

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug React Native App",
      "request": "attach",
      "type": "reactnative",
      "cwd": "${workspaceFolder}",
      "sourceMaps": true,
      "trace": "verbose"
    }
  ]
}

Expected behavior

What were you expecting to happen?

VS code stops on breakpoints when it hits that line of code in the GUI.

Debug output

Debug Console

```text From client: initialize({"clientID":"vscode","clientName":"Visual Studio Code","adapterID":"reactnative","pathFormat":"path","linesStartAt1":true,"columnsStartAt1":true,"supportsVariableType":true,"supportsVariablePaging":true,"supportsRunInTerminalRequest":true,"locale":"en","supportsProgressReporting":true,"supportsInvalidatedEvent":true,"supportsMemoryReferences":true,"supportsArgsCanBeInterpretedByShell":true,"supportsMemoryEvent":true,"supportsStartDebuggingRequest":true}) To client: {"seq":0,"type":"response","request_seq":1,"command":"initialize","success":true,"body":{"supportsConfigurationDoneRequest":true,"supportsEvaluateForHovers":true,"supportTerminateDebuggee":true,"supportsCancelRequest":true}} From client: attach({"name":"Debug React Native App","request":"attach","type":"reactnative","cwd":"/Users/alexwolf/Code/scratch_odds/scratch-odds-react-app","sourceMaps":true,"trace":"verbose","__configurationTarget":6,"__sessionId":"f1cb99c5-9bfc-49a2-9e0f-6bd33ee94b2c"}) Attaching to the application Attaching to the application: { "name": "Debug React Native App", "request": "attach", "type": "reactnative", "cwd": "/Users/alexwolf/Code/scratch_odds/scratch-odds-react-app", "sourceMaps": true, "trace": "verbose", "__configurationTarget": 6, "__sessionId": "f1cb99c5-9bfc-49a2-9e0f-6bd33ee94b2c", "enableDebug": true, "sourceMapRenames": false } Starting debugger app worker. About to download: http://localhost:8081/debugger-ui/debuggerWorker.js to: /Users/alexwolf/Code/scratch_odds/scratch-odds-react-app/.vscode/.react/debuggerWorker.js ```

React Native output channel

```text .... ```

Developer Tools console

```text PASTE OUTPUT OF DEVELOPER TOOLS CONSOLE (Help -> Toggle Developer Tools -> Select Console tab) ```

Environment

Please tell us about your system and your project:

npx react-native doctor or npx expo doctor if your project is using Expo:

❯ npx expo-doctor
✔ Check Expo config for common issues
✔ Check package.json for common issues
✔ Check dependencies for packages that should not be installed directly
✔ Check for common project setup issues
✔ Check npm/ yarn versions
✔ Check for issues with metro config
✔ Check Expo config (app.json/ app.config.js) schema
✔ Check that packages match versions required by installed Expo SDK
✔ Check for legacy global CLI installed locally
✔ Check that native modules do not use incompatible support packages
✔ Check that native modules use compatible support package versions for installed Expo SDK

Didn't find any issues with the project!

envinfo:

❯ npx envinfo

  System:
    OS: macOS 14.1.1
    CPU: (12) arm64 Apple M3 Pro
    Memory: 1.21 GB / 36.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
    Watchman: 2024.01.22.00 - /opt/homebrew/bin/watchman
  Managers:
    CocoaPods: 1.15.0 - /opt/homebrew/bin/pod
    Homebrew: 4.2.10 - /opt/homebrew/bin/brew
    pip3: 22.3.1 - ~/.pyenv/shims/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 15.0.0 - /usr/bin/gcc
    Git: 2.39.3 - /usr/bin/git
    Clang: 15.0.0 - /usr/bin/clang
    Curl: 8.1.2 - /usr/bin/curl
  Servers:
    Apache: 2.4.56 - /usr/sbin/apachectl
  Virtualization:
    Docker: 24.0.6 - /usr/local/bin/docker
  SDKs:
    iOS SDK:
      Platforms: DriverKit 23.2, iOS 17.2, macOS 14.2, tvOS 17.2, visionOS 1.0, watchOS 10.2
  IDEs:
    Android Studio: 2023.1 AI-231.9392.1.2311.11255304
    Sublime Text: Build 3211
    Vim: 9.0 - /usr/bin/vim
    Xcode: 15.2/15C500b - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Perl: 5.30.3 - /usr/bin/perl
    Python: 3.10.9 - /Users/alexwolf/.pyenv/shims/python
    Python3: 3.10.9 - /Users/alexwolf/.pyenv/shims/python3
    Ruby: 2.6.10 - /usr/bin/ruby
  Databases:
    PostgreSQL: 14.10 - /opt/homebrew/bin/postgres
    SQLite: 3.39.5 - /usr/bin/sqlite3
  Browsers:
    Chrome: 122.0.6261.94
    Safari: 17.1

React Native Tools extension version: v1.12.3
Expo SDK version (if applicable):50.0.8

lexie011 commented 8 months ago

Hi @alexwolf22, thanks for reaching us. Could you please try to use below config for debugging?

     {
            "name": "Attach to Hermes application",
            "request": "attach",
            "type": "reactnativedirect",
            "cwd": "${workspaceFolder}"
        }

alexwolf22 commented 8 months ago

@lexie011 that did the trick thank you!

I spent way too much time today trying to get the debugger working lol

rsapko commented 7 months ago

I've also tried it. It looks like it attaches, but the breakpoints are unbound.

mccoyg commented 7 months ago