Unable to connect to devtool

[SandraLum]

Hi, I am trying out nativescript vue, following the starter guide in the official documentation and creating a new app using the vue init command and trying to connect to the dev tool.

I had no problem viewing the app on android emulator, however, I was unable to get the dev tool connected. I was stuck with Waiting for connection... with steps to add script at the top of the page you want to debug.

To Reproduce:

1. create a new nativescript vue app from scratch following https://nativescript-vue.org/en/docs/getting-started/quick-start/
2. Run npm install --save @vue/devtools@beta nativescript-toast nativescript-socket.io nativescript-vue-devtools
3. Add the import in main.js import VueDevtools from 'nativescript-vue-devtools' Vue.use(VueDevtools)
4. Run vue-devtools in one terminal
5. Run rm -rf platforms && tns run android --bundle on another terminal

[rw355]

Exactly same issue here.

Seems below nativescript-socket isn't returning correct stuff

const SocketIO = require('nativescript-socket.io')
debug && SocketIO.enableDebug()
return SocketIO.connect(address)

[AngeloCicero]

Same issue here - followed starter guide exactly.

[bbc91]

I have the same issue here, no errors, just not connecting.

[nucleogenesis]

Same here as the above comments.

[djokone]

I've get the same issue, but it seems to happen when tns device version is updated to 5.0.0

"nativescript": { "tns-android": { "version": "5.0.0" }, "tns-ios": { "version": "5.0.0" } },

It work again when you rollback to the 4.2.0 version "nativescript": { "tns-android": { "version": "4.2.0" }, "tns-ios": { "version": "4.2.0" } },

Make change effect $ rm -rf platforms

[stusmitharoo]

Same issue

[romandrahan]

Same issue

[sivabudati]

Same issue here

[kfiras]

Same here. It was working till I followed the steps to install and enable vue devtools.

[hubertstrk]

Same here

[kieuminhcanh]

Same here

[prinzt]

I tried it a few times without success, but now its working.

What i missed the first few tries was to confirm that electron is allowed to use the network (WIn10). The Windows System Dialog was initially hidden behind some other window. :-/ After confirmation, vue devtools instantly connect to my real device. (~‾▿‾)~

Win10 with a real device connected via USB. Versions:

"nativescript-vue": "^2.0.2",
"nativescript-vue-devtools": "^1.1.0",
"nativescript-socket.io": "^0.9.0",

"tns-android": {
      "version": "5.0.0"
    },
"tns-ios": {
     "version": "5.1.0"
}

Using it like documented:

if (TNS_ENV !== "production") {
  Vue.use(VueDevtools, {
    host: "192.168.45.20" // IP of the machine you are writing your code on, _not_ the Device IP your app runs on ;-)
  });
}

[slushnys]

Can't make it connect with --hmr as well unfortunatelly.

[kacperpll]

Can anyone share with any solution to this problems?? Maybe someone from Nativescripte-vue team could answer this quetion??

[bc-whisnant]

Does anyone have any updates about this issue or any new solutions? Just started using nativescript-vue and ran into this also.

[kfiras]

Not sure if nativescript-vue is there yet and I have not been successful in getting help or finding answers. It looks developers maintaining nativescript-vue are few and so are people using it. I had to switch to react-native.

On Thu, Mar 14, 2019 at 7:48 PM Brandon Whisnant [email protected] wrote:

Does anyone have any updates about this issue or any new solutions? Just started using nativescript-vue and ran into this also.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/nativescript-vue/nativescript-vue-devtools/issues/8#issuecomment-473107479, or mute the thread https://github.com/notifications/unsubscribe-auth/AFlMVnTK5_zMd7czoEXL0rIa5iy8HmcKks5vWt_MgaJpZM4YdQOP .

[bc-whisnant]

@kfiras I will be switching to react native as well. Thank you for your reply.

[Jakubo96]

Same issue

[gitcoinbot]

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

---

This issue now has a funding of 0.142 ETH (19.58 USD @ $137.9/ETH) attached to it.

• If you would like to work on this issue you can 'start work' on the Gitcoin Issue Details page.
• Want to chip in? Add your own contribution here.
• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $53,314.11 more funded OSS Work available on the Gitcoin Issue Explorer

[wpatter6]

See this boilerplate repo to reproduce the issue (you will need to set the host variable in the main.js file to your computer's network address)

https://github.com/wpatter6/nsvue-devtools-test

I am able to use termux with nmap to scan from my debugging device and see that the IP/port is open. I am also able to make a very basic website, add a vue instance, and paste the script tag shown in the developer tools UI to show that the devtools are working properly.

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

Work has been started.

These users each claimed they can complete the work by 6 hours ago. Please review their action plans below:

1) axelios has started work.

1. I reinstalled the vue/devtools stack with same commands as described.
2. Test with devices an own app.
3. Find solution

Question Which OS are you using? Windows or Linux (Ubuntu, CentOS or any other)?

For your soon response thank you very much

Ralph Neumann

Learn more on the Gitcoin Issue Details page.

2) fabioluxx has started work.

I will try to reproduce your environment with provided information, check for errors and find a solution

Learn more on the Gitcoin Issue Details page.

[hubertstrk]

I am using Windows 10

[tralves]

There have been some issues with some of those packages. You can fix this issue now by changing package.json with:

Replace:

nativescript-vue-devtools -> "nativescript-vue-devtools": "github:anthonny/nativescript-vue-devtools#master",

nativescript-toast -> "nativescript-toasty": "^1.3.0",

nativescript-socket.io -> "nativescript-socketio": "^3.2.1",

This is a temporary solution while the template and nativescript-vue-devtools is not fixed, but it works!

[wpatter6]

@tralves That doesn't seem to fix it for me. Same behavior with these updated deps after wiping out node_modules and platforms and re-installing/building

Side note, my app uses nativescript-socket.io for other operations and it's having no trouble connecting to my socket.io server on heroku, but fails every time connecting to the devtools, and does the same with the other one nativescript-socketio, even if I completely remove the toaster and have it fall thru to an empty method. I'm also able to connect to the devtools with a generic socket.io tester desktop and android app without any trouble. So strange...

[gitcoinbot]

Issue Status: 1. Open 2. Cancelled

---

The funding of 0.142 ETH (20.09 USD @ $141.46/ETH) attached to this issue has been cancelled by the bounty submitter

• Questions? Checkout Gitcoin Help or the Gitcoin Slack
• $52,807.05 more funded OSS Work available on the Gitcoin Issue Explorer

[alkeinaiduko]

There have been some issues with some of those packages. You can fix this issue now by changing package.json with:

Replace:

nativescript-vue-devtools -> "nativescript-vue-devtools": "github:anthonny/nativescript-vue-devtools#master",

nativescript-toast -> "nativescript-toasty": "^1.3.0",

nativescript-socket.io -> "nativescript-socketio": "^3.2.1",

This is a temporary solution while the template and nativescript-vue-devtools is not fixed, but it works!

I did this and i run vue-devtools again, but still not working I am using an emulator

[adamschnaare]

Stink. Just went through this again with no luck. If I only had a brain cool enough to fix this...I totally would. But alas - I do not.

[OmarMakled]

The same issue any update I'm using an emulator

package.json

"dependencies": {
    "@vue/devtools": "^5.1.0",
    "nativescript-socketio": "^3.2.1",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-toasty": "^1.3.0",
    "nativescript-vue": "~2.2.0",
    "nativescript-vue-devtools": "^1.2.0",
    "tns-core-modules": "~5.3.0",
    "vuex": "^3.1.0"
  },

app.js

import VueDevtools from 'nativescript-vue-devtools'
Vue.use(VueDevtools)

when I run tns debug android --bundle everything works as to expect the issue is I can't see vue-devtools tab

[calebbergman]

I was having the same issue using an Android 9.0 (android-28) emulator. After downgrading to Android 8.1.0 (android-27) it worked as advertised in the docs.

[ericbae]

Does anyone have any update on this issue?