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 notifications@github.com 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?

[tdondich]

Also same issue, clean nativescript dev environment, following directions. Stock Android 9 AVD that came with Android Studio.

[jawa-the-hutt]

I've been able to get this working finally on all 3 of my dev machines. Previously, it only worked on one and I finally clued into the API 27 issue that @calebbergman also mentioned as on the one working machine only had a single image installed and it was for API 27.

To reiterate, this issue doesn't happen for me with Emulators running API 27 or lower images. This is because in API 28, Android has started blocking all cleartext traffic by default. Because vue devtools is using http instead of https, API 28 images can't connect to the devtools.

What I have done is edited my network_security_config.xml file and added the following:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="false">localhost</domain>
        <domain includeSubdomains="false">10.0.2.2</domain>
    </domain-config>
</network-security-config>

I've added this in src/App_Resources/Android/xml/network_security_config.xml. This tells android to allow http traffic to localhost as well as the host machine's local loopback IP as the emulator sees it: 10.0.2.2. Word of warning, make sure you understand the security risk with making the changes to this file and the potential for password/keys leaking due to them being unencrypted.

The other thing I have done is explicity setup vue-devtools to connect to 10.0.2.2 in my main entrypoint:

import VueDevtools from 'nativescript-vue-devtools';
Vue.use(VueDevtools, { host: '10.0.2.2' });

Would be a good idea to purge your platforms folder after making the changes and then serve things up as normal to see if it starts working for you on API 28 and greater images.

[tdondich]

@jawa-the-hutt What an amazing find. Great job.

[sbine]

Nice find @jawa-the-hutt! I unfortunately wasn't able to use this solution to connect to devtools on Android, but the HTTP connection clue led me to a solution on iOS.

Android recap: I tried adding a network_security_config.xml file, and even tried setting the broader android:usesCleartextTraffic="true" in the manifest. I was able to confirm that my Android app was able to make HTTP requests in general with usesCleartextTraffic enabled (not without), but the devtools connection still throws a socket error:
TypeError: Cannot read property 'on' of undefined The error is referring to socket.on in this line of code, so it seems the socket nativescript-vue-devtools provides to vue-devtools is still not a valid socket object.

However, enabling the iOS equivalent flag NSAllowsArbitraryLoads in Info.plist did work for me! See this StackOverflow post for more info.

To repeat the warning above, make sure you understand the security risk before making these changes. Enabling NSAllowsArbitraryLoads gives your app a broad ability to make insecure HTTP requests, and if you submit your app to the App Store with this flag enabled Apple will likely reject it during their review process.

[RomkaLTU]

You kidding me... Just wasted 4 hours of initial setup to find this.

[jonbwalker]

I was able to get dev tools working by simply adding the following flag to the existing <application> tag in app/App_Resources/Android/src/main/AndroidManifest.xml

android:usesCleartextTraffic="true"

Note: if you've added the network_security_config.xml file from the comments above, this flag won't work and android will ignore android:usesCleartextTraffic="true" as the <application> tag doc points out.

It says:

This flag is ignored on Android 7.0 (API level 24) and above if an Android Network Security Config is present.

[XEQTIONR]

@jonbwalker .. Thanks this was the easiest fix of them all for me. Is this unsafe in production?

[jonbwalker]

@XEQTIONR I can't say if it's safe or unsafe for your specific needs, but I'll say this: just make sure you fully understand the implications of allowing clear text traffic in production.

[ellie-me]

I'm following the steps pointed out in this issue. However, every time I try to use VueDevtools I get the problem that my development machine cannot connect to my android device or emulator, and when I'm not getting that first problem then I get this exception on my development device which is running Android 6.0:

An uncaught Exception occurred on "OkHttp Dispatcher" thread.
java.lang.NullPointerException: Attempt to invoke virtual method 'java.lang.String okhttp3.MediaType.toString()' on a null object reference
    at io.socket.engineio.client.transports.PollingXHR$Request.onLoad(PollingXHR.java:271)
    at io.socket.engineio.client.transports.PollingXHR$Request.access$700(PollingXHR.java:148)
    at io.socket.engineio.client.transports.PollingXHR$Request$1.onResponse(PollingXHR.java:232)
    at okhttp3.RealCall$AsyncCall.execute(RealCall.java:141)
    at okhttp3.internal.NamedRunnable.run(NamedRunnable.java:32)
    at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1113)
    at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:588)
    at java.lang.Thread.run(Thread.java:818)

I'm seriously thinking on switching over to another solution as there is not currently a way for me to debug my mobile applications with nativescript vue.

[Syltis]

Having the same issue here, waiting for connection forever. Using @jonbwalker 's solution did not help. Am I doing it right; starting the emulator in Android Studio and then running 'vue-devtools' in the NS CLI?

This issue seems pretty detrimental to NativeScript-Vue as trying to debug an app without devtools it is pretty hard.

[CesarGomezTissini]

@jonbwalker workaround made my day, but Devtool shows me this. The project is recently created.

[classikd]

In my case I solved it by adding a correct IP... I was using IP of my mobile device instead of my computer's IP Vue.use(VueDevtools, { host: '192.168.0.44' }); // If device, point to the IP of your development machine

Also make sure to delete what is in the /platforms folder, and to run npx vue-devtools before tns run android.

@Syltis With a real device vue-devtools must be inevitably started before, but with an emulator I don't know maybe it's the same

[ghost]

Sadly @jonbwalker solution did not work for me.

    <application
        android:usesCleartextTraffic="true"

Is set in my application manifest. Made sure the IP is correct and load order is correct. This is not an issue for older android versions, so the issue does seem to still be cleartext related on new versions. I sit on "Waiting for connection".

[mho22]

Not working for me neither using my Android device :

Development machine : macOs Catalina Device : Android 10

init steps :

- ns create HelloWorld --vue
- cd HelloWorld
- npm install
- npm install --save @vue/devtools@^5.3.4 @triniwiz/nativescript-toasty @triniwiz/nativescript-socketio nativescript-vue-devtools

code in app.js :

import VueDevtools from 'nativescript-vue-devtools'
import Vue from 'nativescript-vue'

Vue.use(VueDevtools, { host: '192.168.0.3' }); 

import Home from './components/Home'

new Vue({
  render: (h) => h('frame', [h(Home)]),
}).$start()

Code in AndroidManifest.xml :

<application
    android:name="com.tns.NativeScriptApplication"
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:usesCleartextTraffic="true"
>

use steps :

[ first terminal window ]
- npx vue-devtools

[ second terminal window ]
- rm -rf platforms 
- tns run 

when launching the npx vue-devtools command, an Electron app with devtools appear with the message Waiting for connection... A modal opens from macOS asking me if I accept incoming connections. I accept. Nothing happens next on the Electron App.

clean package.json :

   "dependencies": {
    "@nativescript/core": "~8.0.0",
    "@nativescript/theme": "~3.0.1",
    "@triniwiz/nativescript-socketio": "^5.0.1",
    "@triniwiz/nativescript-toasty": "^4.1.3",
    "@vue/devtools": "^5.3.4",
    "nativescript-vue": "~2.9.0",
    "nativescript-vue-devtools": "^1.5.1"
  },
  "devDependencies": {
    "@nativescript/android": "8.0.0",
    "@nativescript/webpack": "beta",
    "nativescript-vue-template-compiler": "~2.9.0",
    "sass": "^1.32.8"
  },

[rigor789]

Try npm i --save-dev @triniwiz/nativescript-socketio@4.0.1 - 5.x uses a newer socketio protocol that @vue/devtools@^5.3.4 doesn't work with.

[mho22]

Thanks @rigor789 ! It works like a charm now ! 🎉

It should probably be noted in the tutorial : https://nativescript-vue.org/en/docs/getting-started/vue-devtools/ at Step one

[sitnikovalex]

Unfortunately, the solution from @rigor789 does not work on Mac with m1

[farwace]

Unfortunately, the solution from @rigor789 does not work on Mac with m1

For me change @triniwiz/nativescript-socketio to version "^4.0.3" in package.json solved the problem. (Mac m1, "@vue/devtools": "^6.0.0-beta.12")

Thanks @rigor789