Skip to content

Commit 4e54f70

Browse files
committed
Update electron shell readme
1 parent 89d1245 commit 4e54f70

File tree

1 file changed

+33
-4
lines changed

1 file changed

+33
-4
lines changed

shells/electron/README.md

Lines changed: 33 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,15 @@ Install the package globally:
99
npm install -g @vue/devtools
1010
```
1111

12+
Or locally as project dependency:
13+
```bash
14+
npm install --save-dev @vue/devtools
15+
```
16+
1217
### :rocket: Usage
1318

19+
#### Using global package
20+
1421
Once you installed the package globally, run:
1522
```bash
1623
vue-devtools
@@ -20,23 +27,45 @@ Then add:
2027
```html
2128
<script src="http://localhost:8098"></script>
2229
```
30+
31+
Or if you want to debug your device remotely:
32+
```html
33+
<script>
34+
window.__VUE_DEVTOOLS__HOST = '<your-local-ip>'
35+
</script>
36+
<script src="http://<your-local-ip>:8098"></script>
37+
```
38+
2339
To the `<head>` section of your app.
2440
**(Don't forget to remove it before deploying to production!)**
2541

26-
Alternatively you can also install `@vue/devtools` as project dependency:
42+
`<your-local-ip>` usually looks like this: `192.168.x.x`.
43+
44+
#### Using dependency package
45+
46+
Once you installed the package as project dependency, run:
2747
```bash
28-
npm install @vue/devtools --save-dev
48+
./node_modules/.bin/vue-devtools
2949
```
3050

31-
And then directly import it in your app:
51+
You can also use the global `vue-devtools` to start the app, but you might want to check if the local version matches the global one in this scenario to avoid any incompatibilities.
52+
53+
Then import it directly in your app:
3254
```js
3355
import devtools from '@vue/devtools'
56+
// import Vue from 'vue'
57+
```
58+
> Make sure you import devtools before Vue, otherwise it might not work as expected.
3459
60+
And connect to host:
61+
```js
3562
if (process.env.NODE_ENV === 'development') {
36-
devtools.connect()
63+
devtools.connect(/* host */)
3764
}
3865
```
3966

67+
**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`).
68+
4069
### :beers: Development
4170

4271
1. Install all dependencies

0 commit comments

Comments
 (0)