Nativescript vue devtools does not connect - nativescript

Question

it seems a week or so ago, nativescript lost the ability to talk to the vue devtools. See this issue on github. Run this repo to reproduce -- (you will need to change the host variable in main.js to your computer's network address).
Here are some things I've tried:
Several different networks, including wired, public and private wifi, and mobile hotspot
Local Android emulator with host set to "localhost" and also host excluded.
Physical android device Samsung S9 with latest Android OS
Took the code from nativescript-vue-devtools package and added console logging. Appears to be getting stuck when connecting to the devtools socket in the connect_error -> reconnect loop. Unfortunately the arguments to the connect error event are null so there's no clear reason why it's failing.
Here is the package.json from that project -- they are all defaults after using the CLI to initialize the project:
{
"name": "nsvue-devtools-test",
"version": "1.0.0",
"description": "A native application built with NativeScript-Vue",
"author": "Will P.",
"license": "MIT",
"nativescript": {
"id": "org.nativescript.application",
"tns-ios": {
"version": "5.0.0"
},
"tns-android": {
"version": "5.0.0"
}
},
"dependencies": {
"vuex": "^3.0.1",
"#vue/devtools": "5.0.0-beta.3",
"nativescript-socket.io": "^0.9.0",
"nativescript-vue-devtools": "^1.0.0",
"nativescript-toast": "^1.4.6",
"nativescript-vue": "^2.0.0",
"tns-core-modules": "^5.0.2"
},
"devDependencies": {
"#babel/core": "^7.0.0",
"#babel/preset-env": "^7.0.0",
"babel-loader": "^8.0.2",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"clean-webpack-plugin": "^0.1.19",
"copy-webpack-plugin": "^4.5.2",
"css-loader": "^1.0.0",
"lazy": "1.0.11",
"nativescript-dev-webpack": "next",
"nativescript-vue-template-compiler": "^2.0.0",
"nativescript-worker-loader": "~0.9.0",
"node-sass": "^4.9.2",
"sass-loader": "^7.1.0",
"terser-webpack-plugin": "^1.1.0",
"vue-loader": "^15.2.6",
"webpack": "^4.16.4",
"webpack-bundle-analyzer": "~2.13.1",
"webpack-cli": "^3.1.0"
}
}
I have also tried on another project using the latest versions of nativescript toast and vue devtools with the same result -- vue devtools never changes from the default screen.
I am able to use termux with nmap to scan from my debugging device and see that my 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.
Nativescript: you are losing users to react native over this problem (see comments in the issue link above). Vue devtools just released a new version advertising better nativescript support, but we are completely unable to even try it out!
Since Nativescript's community has moved here, I am really just hoping to catch the attention of the devs to get this issue resolved. If anyone else is able to provide a workaround or solution to this problem that would be appreciated as well.
Thanks in advance!

Answer 1

To get my android emulator running NativeScript vue app talking to Vue Devtools electron app,
I needed to set android to allow clear text traffic
In AndroidManifest.xml
set
android:usesCleartextTraffic="true" on the existing node.
for example
<application
android:name="com.tns.NativeScriptApplication"
android:allowBackup="true"
android:icon="#drawable/icon"
android:label="#string/app_name"
android:theme="#style/AppTheme"
android:usesCleartextTraffic="true"
>
This solution was from this comment
https://github.com/nativescript-vue/nativescript-vue-devtools/issues/8#issuecomment-496292399
It might be also possible to solve this by creating or modifying the network_security_config.xml file.
I doubt this is a change that you would want to commit and have in production, so I am using it only in local development.

Answer 2

Could you try with this deps in your package.json:
"nativescript-toasty": "^1.3.0",
"nativescript-socketio": "^3.2.1",
"nativescript-vue-devtools": "github:anthonny/nativescript-vue-devtools#master",
I do not use nativescript-socket.io and nativescript-toast, but nativescript-socketio (without the .) and nativescript-toasty
It is more a workaround than a real solution but if it can help ;)