Unable to connect to devtool about nativescript-vue-devtools HOT 48 OPEN

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.

from nativescript-vue-devtools.

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.

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

Same issue

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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.

from nativescript-vue-devtools.

from nativescript-vue-devtools.

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.

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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)

from nativescript-vue-devtools.

Same issue here - followed starter guide exactly.

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

Same here as the above comments.

from nativescript-vue-devtools.

Same issue

from nativescript-vue-devtools.

Same issue here

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

Same here

from nativescript-vue-devtools.

Same here

from nativescript-vue-devtools.

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 ;-)
  });
}

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

Same issue

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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.

from nativescript-vue-devtools.

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.

from nativescript-vue-devtools.

I am using Windows 10

from nativescript-vue-devtools.

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!

from nativescript-vue-devtools.

@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...

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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.

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

Does anyone have any update on this issue?

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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.

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

@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.

from nativescript-vue-devtools.

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.

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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".

from nativescript-vue-devtools.

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"
 },

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.

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

from nativescript-vue-devtools.