Vscode-react-native: Debugger attach to packager not working

[Gumija]

Actual Behavior

1. Run react-native run-android
2. Choose "Attach to Packager" and press Debug in VS Code Debug tab
3. Nothing/Error happens

Expected Behavior

1. Run react-native run-android
2. Choose "Attach to Packager" and press Debug in VS Code Debug tab
3. Can debug code in VS Code

Software versions

• React-Native VS Code extension version: 0.3.1
• VSCode version: 1.9.1
• OS platform and version: Windows 10
• NodeJS version: v6.6.0

• React Native version:
  react-native-cli: 1.3.0
  react-native: 0.41.2

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

[vscode-react-native] Debugger ready. Enable remote debugging in app.
[vscode-react-native] Starting debugger app worker.
[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application

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

mime.ts:59Overwriting extension <<.jsx>> to now point to mime <<text/javascript>>
keybindingsRegistry.ts:109Ctrl+Alt+ keybindings should not be used by default under Windows. Offender:  2611  for  java.projectConfiguration.update
extensionHost.ts:282[Extension Host] Windows_NT
extensionHost.ts:282[Extension Host] vscode-icons is active!
extensionHost.ts:282[Extension Host] typescript (vscode.typescript) uses PROPOSED API which is subject to change and removal without notice
extensionHost.ts:282[Extension Host] rejected promise not handled within 1 second
shell.ts:437Error while executing command 'npm.cmd install [email protected] --verbose': Error: Error while executing command 'npm.cmd install [email protected] --verbose'
    at InternalError (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\out\common\error\internalError.js:11:9)
    at Function.getInternalError (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\out\common\error\errorHelper.js:10:16)
    at ChildProcess.spawnedProcess.once (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\out\common\node\childProcess.js:43:58)
    at ChildProcess.g (events.js:286:16)
    at emitTwo (events.js:106:13)
    at ChildProcess.emit (events.js:191:7)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)e.onUnexpectedError @ shell.ts:437
shell.ts:437Error while executing command 'npm.cmd install [email protected] --verbose': Error while executing command 'npm.cmd install [email protected] --verbose': Error: Error while executing command 'npm.cmd install [email protected] --verbose': Error while executing command 'npm.cmd install [email protected] --verbose'
    at InternalError (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\out\common\error\internalError.js:11:9)
    at NestedError (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\out\common\error\internalError.js:23:9)
    at Function.getNestedError (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\out\common\error\errorHelper.js:14:16)
    at CommandExecutor.generateRejectionForCommand (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\out\common\commandExecutor.js:163:51)
    at result.outcome.result.outcome.then.reason (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\out\common\commandExecutor.js:144:25)
    at _rejected (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\node_modules\q\q.js:844:24)
    at C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\node_modules\q\q.js:870:30
    at Promise.when (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\node_modules\q\q.js:1122:31)
    at Promise.promise.promiseDispatch (C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\node_modules\q\q.js:788:41)
    at C:\Users\Milan\.vscode\extensions\vsmobile.vscode-react-native-0.3.1\node_modules\q\q.js:604:44e.onUnexpectedError @ shell.ts:437
2extensionHost.ts:282[Extension Host] rejected promise not handled within 1 second
messageService.ts:126Ensure Node was launched with --inspect. Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:29021).e.doShow @ messageService.ts:126
mainThreadEditorsTracker.ts:281setDecorations on invisible editor

Additional notes

Selecting "Debug Android" starts the packager, but the debugger still will not be able to connect. I ge this message in React-Native output channel:

Starting custom debugger by executing: echo A debugger is not needed:  "c:\SourceControl\ap-react-native"

[vladimir-kotikov]

@Gumija, thanks for reporting. Just to be sure - have you enabled JS debuggint in the app by hitting "Debug JS Remotely" in developer menu on device?

Also, just to clarify, are you trying to debug a standard react-native project or the project created with Exponent? Looking at the developer console output I see that extension is trying to install xdl package which means that it has detected that this is an exponent project and is trying to preconfigure it.

[Gumija]

@vladimir-kotikov thank you for the fast reaction time.
I didn't have "Debug JS Remotely" enabled. It used to work like this:

1. Start packager
2. Attach to packager
3. Press Debug JS Remotely

Otherwise it would start the debugger in chrome. Now I get stuck at the 2nd step. Now I tried with "Debug JS Remotely" first, but didn't help.

I don't use xdl maybe one of my dependencies? I found out in the meantime that the xdl error was because I use a private npm registry and there are some finicky stuff with that and npm scopes. I got that fixed. Xdl errors no longer appear.

Now I have a new error sometimes after waiting a lot in dev tools console:

Ensure Node was launched with --inspect. Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:28321).

[vladimir-kotikov]

@Gumija, I'm sorry but I'm afraid that I don't completely understand what exactly is your problem (now after issues with exp went away, though they were IMO very suspicious).

What happens after you press 'Debug' in VSCode? If everything works fine It should log some strings to debug console and then start waiting for application to connect to packager. There also should be a progress indicator right below 'Start Debugging button'

After you press 'Start JS debugging' (or reload the app if it already has been put into JS debugging mode) the debugger should connect to app and actually start debug session - the progress indicator should disappear and the status bar should change the color. Also there should appear a message in debug console that indicates that debugger discovered a process to attach to - something like [vscode-react-native] Debugger worker loaded runtime on port 25712

If this is not what you are seeing, please explain what exactly happens for you when you start debug session and enable 'Debug JS remotely' on device. In that case please also try adding the following lines to VSCode workspace configuration (see https://github.com/Microsoft/vscode-react-native#customization):

{
  "react-native-tools": {
    "showInternalLogs": true,
    "logLevel": "Trace"
  }
}

and paste here the output of debug console again - this might give us some insights about what is happening.

[Gumija]

@vladimir-kotikov so what happens is:

1. Press "Start Debugging" with Debug Android config
2. Console output (as below), build is fine, packager starts fine as well.
3. Application started on the device in debug mode, but stuck at a white screen.
4. Ensure Node was launched with --inspect. Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:31486).
5. Progress indicator stops with this error and the debugger panel disappears

What I noticed in the mean time that I don't have a launchReactNative.js file. Even when I delete the .vscode folder and reopen the project folder.

Output/React-Native window:

Getting exponent dependecy.
######### Checking react native is correctly setup. This may take a while... ##########
Checking if the correct react native is installed..
######### Starting Packager ##########
######### Executing command: react-native.cmd start --port 8081 ##########
Scanning 627 folders for symlinks in c:\SourceControl\ap-react-native\node_modules (24ms)
 ┌────────────────────────────────────────────────────────────────────────────┐ 
 │  Running packager on port 8081.                                            │ 
 │                                                                            │ 
 │  Keep this packager running while developing on any JS projects. Feel      │ 
 │  free to close this tab and run your own packager instance if you          │ 
 │  prefer.                                                                   │ 
 │                                                                            │ 
 │  https://github.com/facebook/react-native                                  │ 
 │                                                                            │ 
 └────────────────────────────────────────────────────────────────────────────┘ 
Looking for JS files in
   c:\SourceControl\ap-react-native 


React packager ready.

######### Packager started. ##########
Loading dependency graph, done.
Bundling `index.android.js`
  Transforming modules  100.0% (639/639), done.
######### The Bundle Cache was prewarmed. ##########
######### Attaching to running React Native packager ##########
######### Checking react native is correctly setup. This may take a while... ##########
Checking if the correct react native is installed..
######### Packager is already running. ##########
Bundling `index.android.js`
  No module changed.
######### The Bundle Cache was prewarmed. ##########
Starting custom debugger by executing: echo A debugger is not needed:  "c:\SourceControl\ap-react-native"
Starting custom debugger by executing: echo A debugger is not needed:  "c:\SourceControl\ap-react-native"
Starting custom debugger by executing: echo A debugger is not needed:  "c:\SourceControl\ap-react-native"
Starting custom debugger by executing: echo A debugger is not needed:  "c:\SourceControl\ap-react-native"

Debug Console:

[vscode-react-native] Starting React Native Packager.
[vscode-react-native] Prewarming bundle cache. This may take a while ...
[vscode-react-native] Building and running application.
[vscode-react-native] Executing command: react-native.cmd run-android
JS server already running.
Building and installing the app on the device (cd android && gradlew.bat installDebug...
Incremental java compilation is an incubating feature.

:app:preBuild

UP-TO-DATE

------------------ HERE MORE UP-TO-DATE --------------

UP-TO-DATE
:app:installDebug

Installing APK 'app-debug.apk' on 'Nexus 5X - 7.1.1' for app:debug
Installed on 1 device.

BUILD SUCCESSFUL

Total time: 20.283 secs
Running C:\Users\Milan\AppData\Local\Android\sdk/platform-tools/adb -s 0110815f568f2ee6 reverse tcp:8081 tcp:8081
Starting the app on 0110815f568f2ee6 (C:\Users\Milan\AppData\Local\Android\sdk/platform-tools/adb -s 0110815f568f2ee6 shell am start -n com.safeass/.MainActivity)...
Starting: Intent { cmp=com.safeass/.MainActivity }

[vscode-react-native] Finished executing: react-native.cmd run-android
[vscode-react-native] Executing command: adb -s "0110815f568f2ee6" reverse tcp:8081 tcp:8081
[vscode-react-native] 
[vscode-react-native] Finished executing: adb -s "0110815f568f2ee6" reverse tcp:8081 tcp:8081
[vscode-react-native] Executing command: adb -s 0110815f568f2ee6 shell am broadcast -a "com.safeass.RELOAD_APP_ACTION" --ez jsproxy true
[vscode-react-native] Broadcasting: Intent { act=com.safeass.RELOAD_APP_ACTION (has extras) }
Broadcast completed: result=0
[vscode-react-native] Finished executing: adb -s 0110815f568f2ee6 shell am broadcast -a "com.safeass.RELOAD_APP_ACTION" --ez jsproxy true
[vscode-react-native] Starting debugger app worker.
[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application
[vscode-react-native] Debugger worker loaded runtime on port 31486

Dev Tools Console:

/C:/Program Files (x86)/Microsoft VS Code/resources/app/out/vs/workbench/electron-browser/workbench.main.js:31 Overwriting extension <<.jsx>> to now point to mime <<text/javascript>>
/C:/Program Files (x86)/Microsoft VS Code/resources/app/out/vs/workbench/electron-browser/workbench.main.js:71 Ctrl+Alt+ keybindings should not be used by default under Windows. Offender:  2611  for  java.projectConfiguration.update
/C:/Program Files (x86)/Microsoft VS Code/resources/app/out/vs/workbench/electron-browser/workbench.main.js:136 [Extension Host] typescript (vscode.typescript) uses PROPOSED API which is subject to change and removal without notice
/C:/Program Files (x86)/Microsoft VS Code/resources/app/out/vs/workbench/electron-browser/workbench.main.js:136 [Extension Host] Windows_NT
/C:/Program Files (x86)/Microsoft VS Code/resources/app/out/vs/workbench/electron-browser/workbench.main.js:136 [Extension Host] vscode-icons is active!
messageService.ts:126 Ensure Node was launched with --inspect. Cannot connect to runtime process, timeout after 10000 ms - (reason: Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:31486).

[vladimir-kotikov]

@Gumija, thanks for response. It sounds like the node process, that executes react native code somehow stucks when loads the bundle, so the debugger can't attach. I'm currently out of ideas how to diagnose this further, but it's possible that upgrading node would help - vscode-node-debug2 that is used by this extension states that there might be issues w/ Node < 6.9, especially on Windows.

Upd.: If this won't help, you might try adding another couple of lines to "Debug Android" section in launch.json:

"diagnosticLogging": true,
"verboseDiagnosticLogging": true

and paste output here (or upload somewhere else) - this will give us a bit more information about what's happening when debugger tries to attach to the process...

[Gumija]

@vladimir-kotikov Updating NodeJS to v6.10.0 helped. Thanks for the tip.

[vladimir-kotikov]

Cool! Thanks for update

[neomib]

Saved my day!!!! Thanks!

[bochen2014]

I don't have that "Attach to packager" option available to me.
I'm running latest versions of VSCode (ver 1.16.1) and vscode-ract-native(ver 0.4.2)

when I click the gear icon within debug view, I wasn't pompted a "choose debug env" drop down, but rather, the launch.json file opened in editor directly.

not sure how you guys have that 'Attach to packager' configured.

[bochen2014]

here is how I got my "Debug Android" configuration from:

where I can find "attach to packager" configuration?

[iTOYS]

Hello, @bochen2014
Attach to packager configuration available in default launch.json
You can re-initialize your launch.json if will delete current and click gear icon

Default Attach to packager configuration here:

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

[bochen2014]

thanks @iTOYS for your reply.

I think there definitely some tricks here.
if you can't get the select Environment drop down pop us like I mentioned above
you need to make sure

1. delete .vscode/launch.json
2. close all editors

[johngoren]

I had trouble attaching to packager until I reinstalled the React Tools extension. Before that, I kept getting "Starting custom debugger by executing: echo A debugger is not needed."

[prorigorous]

I have the encountered the same problem. At first upgraded node did not solve, and restarted the computer actually solved！

[andywall66]

If anyone is still having this issue... one thing that always work for me (though doesn't get to the root of the issue) is just killing all node processes on your machine:

sudo killall node

Dunno why (some kind of ghost process that confuses VS Code?), but it works.

[molant]

@andywall66 have you tried the preview version?
There's been a lot of improvements on how debugging sessions are managed and this should have been fixed.

[andywall66]

@molant Thanks. What I'll do is wait for this to manifest again (it's not easy to repro) and then try the preview version and see if it fixes it.

[SanjanaTailor]

Hello, @bochen2014
Attach to packager configuration available in default launch.json
You can re-initialize your launch.json if will delete current and click gear icon

Default Attach to packager configuration here:

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

This is working for me Thank you