Vue-devtools: Cordova remote debug socket.io error

[TristanPct]

Version

4.1.4

Browser and OS info

WebView 65.0 (Cordova) / Android 5.1

Steps to reproduce

In a cordova project, add @vue/devtools as dependency.
Use connect method :

if (process.env.NODE_ENV === 'development') {
  devtools.connect(/* host, port */)
}

Build and run the project on an Android device.

What is expected?

Remote tools connection.

What is actually happening?

GET http://file/socket.io/?EIO=3&transport=polling&t=M8kTOWa net::ERR_NAME_NOT_RESOLVED on backend.js:6983
The remote tool don't connect.

---

Works fine if I directly run the cordova www folder on my computer browser.

[Akryum]

cc @michalsnik

[krvd]

the same issue here

<script>window.__VUE_DEVTOOLS_HOST__ = '192.168.2.243';</script>
<script src="http://192.168.2.243:8098"></script>

[michalsnik]

Hello @TristanPct @krvd ! Sorry for the late reply..

It works in your browser @TristanPct because your browser can access the default host and port directly (localhost:8098), whereas your mobile device can't. In order to get it working you'd have to make sure your IP is accessible in local network. You can do so by visiting the page listed in opened devtools on your mobile device connected to same network, e.g.: http://192.168.1.62:8098/. If you'll see the response with javascript code, you can proceed. If not - then it might be your antivirus, firewall or router blocking the traffic.

Now let's say:
1) The script is accessible on your mobile device.
Then you'd have to specify host and port, so that your app can connect directly using your local IP:

devtools.connect('192.168.1.62', '8098');

You can get your IP either from vue-devtools window, or by executing ifconfig | grep inet in your terminal.

2) The script is not accessible on your mobile device. (it might be your case @krvd)
You can either disable all anti-viruses, and check router settings. If it helps - go to 1) ☝️ if not, you can use ngrok, described here

Please let me know whether this solves your issue.

[juansaab]

@TristanPct I did solve the issue

GET http://file/socket.io/?EIO=3...

just by adding the protocol (https) to the window.__VUE_DEVTOOLS_HOST__ variable

<script>
     window.__VUE_DEVTOOLS_HOST__ = 'http://192.168.0.3'
     window.__VUE_DEVTOOLS_PORT__ = '8098'
</script>
<script src="http://192.168.0.3:8098"></script>

It is now working like a charm!

[bastula]

@juansaab Your fix worked for me. I was debugging in a VM and could not get this to work!

I'll send a PR for the docs.