Vscode-react-native: Breakpoints is set not yet bound (Resetting does not fix issue)

[VanessaChu]

Actual Behavior

Breakpoints is set not yet bound every time app launches. From the previous thread, I tried resetting the breakpoint, still does not work. Downgrading to VSCode 1.19 does not work. VSCode 1.24 also does not work.

Expected Behavior

Breakpoints be set or at least the workaround of resetting a breakpoint to work.

Software versions

• React-Native VS Code extension version: 0.6.11
• VSCode version: 1.24.1
• OS platform and version: MacOS Sierra V10.13.4
• NodeJS version: v8.11.2
• React Native version: 0.54.4

[iTOYS]

Hi @VanessaChu,
I tested with the latest extension and vscode versions, all works fine for me.
Could you please provide a bit more info:

• Which configuration did you run?
• Is it reproduce on react-native init project
• Simulator or real device(versions)
• and all what you think may be helpfull

Thanks!

[VanessaChu]

This is my launch configuration:

  {
    "name": "Debug iOS",
    "program": "${workspaceRoot}/.vscode/launchReactNative.js",
    "type": "reactnative",
    "request": "launch",
    "platform": "ios",
    "sourceMaps": true,
    "target": "iPhone 6 Plus",
    "outDir": "${workspaceRoot}/.vscode/.react"
  }

[VanessaChu]

Same issue on both simulator and real device.

Launch configuration for real device:

{
    "name": "Debug iOS Device",
    "program": "${workspaceRoot}/.vscode/launchReactNative.js",
    "type": "reactnative",
    "request": "launch",
    "platform": "ios",
    "target": "device",
    "sourceMaps": true,
    "outDir": "${workspaceRoot}/.vscode/.react"
}

[PandaGeek1024]

I got the same issue here, have updated to the latest vsCode 1.24.1 and still with no luck. It can run "Debug iOS" and start the app but when I select Debug Remote JS, it always opens the chrome dev tool and never stops at the break point on vsCode. Please check my config detail.
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},

[PandaGeek1024]

I see why now. "Debug iOS" simply does not work when you create project with create-react-native-app cause it will run app on the expo client which will listen to different port other than 8081. you have to eject your project to make it run solely on the simulator so that it will listen to the same port as VSCode.
Does anyone knows a way to change the listening port on "Debug iOS"?

[iTOYS]

@gagaJay
You can attach to running CRNA app with this configuration:

{
    "name": "Attach to packager",
    "program": "${workspaceRoot}/.vscode/launchReactNative.js",
    "type": "reactnative",
    "request": "attach",
    "sourceMaps": true,
    "port": "19001",
    "outDir": "${workspaceRoot}/.vscode/.react"
}

[iTOYS]

@VanessaChu
Could you please paste following outputs here:

• Output of the Debug Console (View -> Toggle Debug Console):

PASTE OUTPUT HERE

• Output of the React-Native output channel (View -> Toggle Output -> Select React-Native in ListBox):

PASTE OUTPUT HERE

• Output of the React-Native ios output channel (View -> Toggle Output -> Select React-Native ios in ListBox):

PASTE OUTPUT HERE

• Output of the Developer Tools console (Help -> Toggle Developer Tools -> Select Console tab):

PASTE OUTPUT HERE

[iTOYS]

@VanessaChu just a friendly ping

[delciopolanco]

Hi guys, the same happening to me using vscode 1.24.1.

• angular 6.0.4
• angular cli 6.0.8
• node 8.11.2

[iTOYS]

Hi @delciopolanco,
This extension provide debugger for React Native apps.
As I can see your project is angular and you are using Debugger for Chrome.
I'm sure that https://github.com/Microsoft/vscode-chrome-debug is a better place to open your issue.

Thanks!

[delciopolanco]

My Bad!!!

[iTOYS]

I cant' reproduce this.
Closing for now. Feel free to reopen if you still faced this issue.

Thanks!