Vscode-react-native: Cannot debug on device

[buddhamangler]

Actual Behavior

1. If I select my 'Debug on iOS Device' launch configuration the application is installed on my device but it never launches. I can see that the app flashes momentarily meaning the app is getting installed, but it just never launches.
2. Additionally, if i manually launch the app and select turn off debug remotely, and turn it back on chrome flies open on my machine. The app is able to talk back to the packager and get the files, so I know the connection is there. Why is the chrome debugger trying to launch?
3. In either case, I get a 'launch request timeout' in vscode every time.
4. I can follow some weird steps like, a) hit play b) wait for app to be installed c) quickly open it d) stop vscode, and instead select launch option 'Attach to packager' and I do get into debug that way, but it becomes really unstable and eventually gives me 'Packager not ready for debug...' fat red screen.

5. Additionally I have noticed when I shake the device to get the developer menu I see two instances developer menus fly up on the screen.

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

Expected Behavior

1. I should be able to hit play on my launch setting and it should launch the app on device with vscode connected as the debugger.

I have read there is an environment variable called 'REACT_DEBUGGER', but I assumed that react native tools would handle pointing the packager to the right debugger (vscode), but that doesn't appear to be working.

All this used to work, but it's been a while since I debugged on device so I'm not sure exactly when.

Software versions

Environment:
OS: macOS High Sierra 10.13.6
Node: 10.1.0
Yarn: 1.9.4
npm: 6.2.0
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.1 AI-173.4819257

Packages: (wanted => installed)
react: 16.3.1 => 16.3.1
react-native: 0.55.4 => 0.55.4

vscode: Version 1.26.0 (1.26.0)

Outputs (Include if relevant)

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

OS: darwin x64
Adapter node: v8.9.3 x64
vscode-chrome-debug-core: 3.17.3

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

...
...
 BUNDLE  [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

[Warning] The Bundle Cache was prewarmed.

[Info] Building and running application.

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

Nothing

[ruslan-bikkinin]

Hi @buddhamangler and thanks for questioning.

Regarding 1, 3, 5:
Please, add "trace": "verbose" to your "Debug iOS on Device" configuration and try again debugging your app. You will get extra logging output in these output channels:

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

so please, share it with us.
In addition, could you please try debugging on simulator and let us know whether you still have such problems on it.
Also, please clarify what Mac are you using for testing, does it have HDD or SDD drive?

Regarding question 2: could you please describe the full step by step scenario?

[buddhamangler]

From Debug Console...

OS: darwin x64
Adapter node: v8.9.3 x64
vscode-chrome-debug-core: 3.17.3
1:45:07 PM, 8/22/2018
From client: initialize({"clientID":"vscode","clientName":"Visual Studio Code","adapterID":"reactnative","locale":"en-us","linesStartAt1":true,"columnsStartAt1":true,"pathFormat":"path","supportsVariableType":true,"supportsVariablePaging":true,"supportsRunInTerminalRequest":true})
To client: {"seq":0,"type":"response","request_seq":1,"command":"initialize","success":true,"body":{"exceptionBreakpointFilters":[{"label":"All Exceptions","filter":"all","default":false},{"label":"Uncaught Exceptions","filter":"uncaught","default":false}],"supportsConfigurationDoneRequest":true,"supportsSetVariable":true,"supportsConditionalBreakpoints":true,"supportsCompletionsRequest":true,"supportsHitConditionalBreakpoints":true,"supportsRestartFrame":true,"supportsExceptionInfoRequest":true,"supportsDelayedStackTraceLoading":true,"supportsValueFormattingOptions":true,"supportsEvaluateForHovers":true,"supportsLogPoints":true,"supportsTerminateRequest":true}}

From React-Native...

[Warning] The Bundle Cache was prewarmed.

[Info] Building and running application.

[Info] Packager is already running.

[Info] Prewarming bundle cache. This may take a while ...

[Info] About to get: http://localhost:8081/index.bundle?platform=ios

BUNDLE [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

[Warning] The Bundle Cache was prewarmed.

[Info] Building and running application.

From React Native: Run ios...

[Warning] The Bundle Cache was prewarmed.

[Info] Building and running application.

[Info] Packager is already running.

[Info] Prewarming bundle cache. This may take a while ...

[Info] About to get: http://localhost:8081/index.bundle?platform=ios

BUNDLE [ios, dev] ./index.js ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ 100.0% (1/1), done.

[Warning] The Bundle Cache was prewarmed.

[Info] Building and running application.

Simulator Testing

I am experiencing no issues with the simulator or running on device by directly playing from xcode

SDD Information

Macintosh HD:

Available: 299.5 GB (299,501,613,056 bytes)
Capacity: 500 GB (500,000,858,112 bytes)
Mount Point: /
File System: APFS
Writable: Yes
Ignore Ownership: No
BSD Name: disk1s1
Volume UUID: xxxxx
Physical Drive:
Device Name: APPLE SSD SM1024L
Media Name: AppleAPFSMedia
Medium Type: SSD
Protocol: PCI-Express
Internal: Yes
Partition Map Type: Unknown

Question 2

Let me get back to you on this

[iTOYS]

Hi @buddhamangler,
Sorry for delay.
Seems like this issue related for you.
For now the only way to debug RN application with VSCode it's install application with

react-native run-ios --device

and after that run "Attach to packager" configuration.

Thanks!

[livein21st]

@iTOYS The issue is still remain after manually run command, react-native run-ios --deviceand then attach to packager.

[SounD120]

Hi @livein21st . I just have tested Debug iOS scenario on that configuration:
1) macOS Mojave 10.14
2) Node.js 8.12
3) VS Code 1.29
4) Xcode 10.1(10B61) with Legacy Build Setup for project
5) React Native 0.55.4 (changed "babel-preset-react-native" version to 4.0.0 in package.json because of this bug)
6) iOS device version 12.1

This setup works without any problem. Please submit new issue using our issue template and describe your situation in details.