devtools

devtools copied to clipboard

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.

cc @michalsnik

the same issue here

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

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.

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

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

Hi,

I'm trying to bypass my corporation's rules regarding chrome extensions. My only aim is to have the devtools functionnalities on my local devlopment environment.

I tried to install devtools as a standalone.

When I run the vue-devtools command, I have no outputs. I'm not sure whether it's a problem or not.

I added

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

to my index.html

When i run npm run serve , here are the first requests of my network tab :

I also tried to import @vue/devtools and do devtools.connect() but the same problem occurs periodically.

I get the same error when I open localhost:8098. I am running on WSL, my app and everything I described is done in an Ubuntu 20.04