Merge remote-tracking branch 'upstream/master'

Author: Guillaume Chau

Diff for: shells/electron/README.md

@@ -31,7 +31,8 @@ Then add:
 Or if you want to debug your device remotely:
 ```html
 <script>
-  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>'
+  window.__VUE_DEVTOOLS_HOST__ = '<your-local-ip>' // default: localhost
+  window.__VUE_DEVTOOLS_PORT__ = '<devtools-port>' // default: 8098
 </script>
 <script src="http://<your-local-ip>:8098"></script>
 ```
@@ -60,12 +61,53 @@ import devtools from '@vue/devtools'
 And connect to host:
 ```js
 if (process.env.NODE_ENV === 'development') {
-  devtools.connect(/* host */)
+  devtools.connect(/* host, port */)
 }
 ```
 
 **host** - is an optional argument that tells your application where devtools middleware server is running, if you debug you app on your computer you don't have to set this (the default is `http://localhost`), but if you want to debug your app on mobile devices, you might want to pass your local IP (e.g. `192.168.1.12`).
 
+**port** - is an optional argument that tells your application on what port devtools middleware server is running. If you use proxy server, you might want to set it to `null` so the port won't be added to connection URL.
+
+#### FAQ:
+
+**1. How to change port devtools server is running on?**
+
+You can change it by setting environment variable before running it:
+```
+PORT=8000 vue-devtools
+```
+
+Then in your app you'll have to set either:
+```
+window.__VUE_DEVTOOLS_PORT__ = 8000
+```
+
+Or update connect method with new port:
+```
+devtools.connect(/* host */, 8000)
+```
+
+**2. How to remotely inspect page on the server?**
+
+For that you can use `ngrok` proxy. You can download it [here](https://ngrok.com/).
+
+Once you start vue-devtools run:
+```
+ngrok http 8098
+```
+
+Then update your host and port accordingly:
+```
+devtools.connect('example.ngrok.io', null)
+```
+
+Make sure to set port to `null` or `false`, because ngrok host already proxies to proper port that we defined in the first command.
+
+**3. How to inspect page served through `HTTPS`?**
+
+For that you can also use ngrok, as it automatically proxies https requests to http. Take a look at question number 2 for instructions.
+
 ### :beers: Development
 
 1. Install all dependencies

Diff for: shells/electron/index.js

@@ -1,8 +1,9 @@
 require('./build/hook.js')
 
 module.exports = {
-  connect: function (host) {
+  connect: function (host, port) {
     window.__VUE_DEVTOOLS_HOST__ = host
+    window.__VUE_DEVTOOLS_PORT__ = port
     require('./build/backend.js')
   }
 }

Diff for: shells/electron/src/backend.js

@@ -4,8 +4,9 @@ import Bridge from 'src/bridge'
 import { installToast } from 'src/backend/toast'
 
 const host = window.__VUE_DEVTOOLS_HOST__ || 'http://localhost'
-const port = process.env.PORT || 8098
-const socket = io(host + ':' + port)
+const port = window.__VUE_DEVTOOLS_PORT__ !== undefined ? window.__VUE_DEVTOOLS_PORT__ : 8098
+const fullHost = port ? host + ':' + port : host
+const socket = io(fullHost)
 
 const connectedMessage = () => {
   if (window.__VUE_DEVTOOLS_TOAST__) {

Diff for: shells/electron/src/devtools.js

@@ -2,7 +2,7 @@ import io from 'socket.io-client'
 import { initDevTools } from 'src/devtools'
 import Bridge from 'src/bridge'
 
-const port = process.env.PORT || 8098
+const port = window.process.env.PORT || 8098
 const socket = io('http://localhost:' + port)
 const $ = document.querySelector.bind(document)
 const $intro = $('#intro')