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:
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!
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.