Vscode-react-native: Debugging feature doesn't work with react-native .21

[lokinfey]

In my OS X 10.11 I found problem about that I debug in my reactnative code it not run well .The console show me this [vscode-react-native] Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon... why ? But in my another mac it can run well . In this mac ,can not debug in VS code (I know it can debug in Chrome but not good) Can you tell me how to solve this

[dlebu]

Hi @lokinfey, thanks for reporting this issue. Can you give us a little more details about your scenario? We are insterested in the following:

• What version of VSCode are you using?
• Are you running multiple instances of VSCode at the same time? (multiple react projects opened in different VSCode windows)
• Are you running an external packager process or the one inside VSCode?
• Is there another process using your 8081 port? That is the default port of the packager.

[digeff]

Also, while this issue is happening, can you go to the browser and tell us what the content of: http://localhost:8081/status is ? (That will show us the status of the packager).

[lokinfey]

@dlebu My VSCode version is 0.10.9. I have only one instance in my mac . Not process using my 8081 port . No any external packager process .

@digeff it is status is

http://localhost:8081/status

packager-status:running

[digeff]

What React-Native library version are you using?

[lokinfey]

@digeff 0.21

[digeff]

The Preview version doesn't support 0.21, only 0.19 and 0.20.

We already have the fix in master, and it'll be included in the next release. We are sorry for the inconvenience, and we'll update this issue as soon as we publish the new version.

[n8stowell82]

Is this change in the 'master' branch? I have tried building the master locally to test this, and I am still unable to hit a breakpoint when testing with iOS Simulator.

[MSLaguana]

Yes it is. If it wasn't, then we would fail to connect to the packager and it should error out. What kind of failure are you seeing?

[digeff]

@n8stowell82 Could you please tell us:

1. At which commit are you on master?
2. What version of VS Code are you using?
3. By your comment it seems you are on React-Native 0.21 right?
4. Could you please copy us the latest log messages that you see both on the Debug Console and the React-Native output channel when this issue happens?

[n8stowell82]

@digeff

1. At which commit are you on master?
   I am currently pulling the latest from master before each try.
2. What version of VS Code are you using?
   Version 0.10.10 (0.10.10)
3. By your comment it seems you are on React-Native 0.21 right?
   Yes I am currently on React Native 0.21
4. Could you please copy us the latest log messages that you see both on the Debug Console and the React-Native output channel when this issue happens?
   @MSLaguana the debugger continues to cycle the same message as mentioned above by @lokinfey
   [vscode-react-native] Finished executing: react-native run-ios --simulator iPhone 5s [vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application [vscode-react-native] Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon... [vscode-react-native] Debugging session started succesfuly. [vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application

vscode building the extension output:
Loading development extension at /Users/nathan/Development/Desktop/vscode/extensions/vscode-react-native [Internal] [Info] Extension messaging server started. [Internal] [Info] Handling message: START_PACKAGER [Internal] [Info] Handling message: PREWARM_BUNDLE_CACHE [Internal] [Info] About to get: http://localhost:8081/index.ios.bundle

[n8stowell82]

here is the output of the debugger cycling:
[vscode-react-native] Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon... [vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application [vscode-react-native] Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon... [vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application [vscode-react-native] Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon... [vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application [vscode-react-native] Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon... [vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application [vscode-react-native] Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon... [vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application [vscode-react-native] Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon... [vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application [vscode-react-native] Disconnected from the Proxy (Packager) to the React Native application. Retrying reconnection soon...

[n8stowell82]

Hey guys, just wanted to drop in here and let you know that it is indeed working. After re-reading all the comments above I ran lsof -n -i4TCP:8081 and found that there was another process listening on port 8081. Most likely I think it was a relic of a previous run of my application. once I killed that process it connected immediately and was able to hit a breakpoint. Also I should mention that I packaged the extension myself in order to run a single instance of vscode.

So is there anyway that the extension could warn the user that there is another process already listening on that port? or even offer to kill that process for the user?

Thanks for all your hard work. I am really liking this plugin

[MSLaguana]

Great to hear that you've got it working!

Right now we attempt to launch the react-native packager, but if one is already running (or something that looks kind of like it) we don't mess with it because it could be anything, and we don't want to break anyone's environment. We do print a message that there may be an external instance of the packager and suggest disabling it if there are issues, but that message is printed in a separate buffer (I believe you can find it under view -> toggle output buffer) rather than the debug window, since it would also be where all the log messages from the packager go as well and we don't want to clutter the debugging session with that information.

We are definitely trying to find a better way to make it more obvious what state things are in.

[n8stowell82]

Ok, interesting I never saw that message. I wonder if there is a better way to alert the user. Could you possibly throw a warning message in the top notification center of vscode? I think something like that would be best. Preferably I would like a button that would offer to kill that process and restart the console again. But that is just me ;) Thanks again for your great tool.

[nitsujri]

How do I install this package from a specific commit in VS Code?

[ghost]

@nitsujri This fix has already been released, you can update the extension by following these instructions.

If you want to install our latest then clone the repo, build with Gulp, and then copy the contents of the enlistment to your extension directory. Be sure to remove the preexisting extension first (.vscode/extensions/vsmobile.vscode-react-native-0.1.X).

[djyde]

I caught this warning just now and I found that the reason was I did open a chrome tab for debug session. After closing it, the debugger works again

[neilyoung]

Same problem.

react-native-cli: 0.2.0
react-native: 0.27.2

vs-code Version 1.3.0-insider (1.3.0-insider)

Cannot debug because of no connectivity from iOS device to debugger

[MSLaguana]

When you say "Same problem" do you mean exactly the same error message as the first post here? Have you made sure that your iOS device can connect to your host machine? See the "To debug on a real device" section at https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools

[lughino]

I get the same error.
After ~5 seconds i get

Runtime is not ready for debugging.
Make sure Packager server is running.

in console:

Installing build/Build/Products/Debug-iphonesimulator/TestApp.app
Launching org.reactjs.native.example.TestApp
org.reactjs.native.example.TestApp: 34633
[vscode-react-native] Finished executing: react-native run-ios --simulator iPhone 5s --project-path ios
[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] Debugging session started successfully.

If launch the simulator with react-native run-ios works perfectly.
react-native version: 0.27.2
react version: 15.1.0

[MSLaguana]

Are you debugging iOS device, or iOS simulator? And if you are debugging on device, did you follow the directions at https://facebook.github.io/react-native/docs/debugging.html#chrome-developer-tools ?

[lughino]

I'm debugging with simulator.
I'm sorry for having only accused the plugin, after various tests even if launched from a terminal.
It seems to be a version of "react-native" problem, if I use the 0.31 version works perfectly from the terminal but through plugin not work in giving this error in console:

[vscode-react-native] Established a connection with the Proxy (Packager) to the React Native application
[vscode-react-native] Debugging session started successfully.
[vscode-react-native] [Warning] Couldn't import script at <http://localhost:8081/index.ios.bundle?platform=ios&dev=true&minify=false>. Debugging won't work: Try reloading the JS from inside the app, or Reconnect the VS Code debugger: Cannot GET /json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9sdWdoaW5vL1Byb2plY3RzL2lnbml0ZUFwcE5vU2FnYS9ub2RlX21vZHVsZXMvcmVhY3QtbmF0aXZlL3BhY2thZ2VyL3JlYWN0LXBhY2thZ2VyL3NyYy9SZXNvbHZlci9wb2x5ZmlsbHMvcHJlbHVkZV9kZXYuanMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUNBLE9BQU8sT0FBUCxDQUFpQixJQUFqQjs7QUFFQSxPQUFPLHFCQUFQLENBQStCLEtBQUssR0FBTCxFQUEvQiIsImZpbGUiOiJwcmVsdWRlX2Rldi5qcyIsInNvdXJjZXNDb250ZW50IjpbIi8qIGVzbGludCBzdHJpY3Q6MCAqL1xuZ2xvYmFsLl9fREVWX18gPSB0cnVlO1xuXG5nbG9iYWwuX19CVU5ETEVfU1RBUlRfVElNRV9fID0gRGF0ZS5ub3coKTtcbiJdfQ==

[MSLaguana]

That looks like part of your app is trying to use inline sourcemaps, meaning the mapping between the final .js files and the original .ts/.js files is included directly in the final js directly rather than as a link. We don't support that currently, and so we are trying to fetch that JSON string as a url which fails.

Could you please open up a separate issue about this particular issue, since it is unrelated to the original thread here.