Skip to content

Commit d33ca74

Browse files
ikoevskarigor789
authored andcommitted
Proofreading DevTools guide (#207)
1 parent 4883d03 commit d33ca74

File tree

1 file changed

+27
-17
lines changed

1 file changed

+27
-17
lines changed
Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,56 @@
11
---
2-
title: Using Vue Devtools
3-
contributors: [rigor789]
2+
title: Using Vue DevTools
3+
contributors: [rigor789, ikoevska]
44
outdated: false
55
---
66

7-
To debug a NativeScript-Vue application with Vue Devtools you need to use the standalone version of Vue Devtools.
7+
You can debug NativeScript-Vue applications using the standalone version of Vue DevTools.
88

9-
To make integration easier we have published [`nativescript-vue-devtools`](https://github.com/nativescript-vue/nativescript-vue-devtools) which takes care of connecting to Vue Devtools.
9+
To simplify the integration, you can use the [`nativescript-vue-devtools`](https://github.com/nativescript-vue/nativescript-vue-devtools) plugin which takes care of connecting your app to Vue DevTools.
1010

11-
** 1. Install dependencies **
11+
## Step 1: Install dependencies
12+
13+
Run the following command:
1214

1315
```shell
1416
$ cd <project-folder>
1517
$ npm install --save @vue/devtools@beta nativescript-toast nativescript-socket.io nativescript-vue-devtools
1618
```
1719

18-
** 2. Optionally install Vue Devtools globally **
20+
## (Optional) Step 2: Install Vue DevTools globally
21+
22+
To easily access Vue DevTools, you can install the package globally.
1923

20-
If you'd like to easily access Vue Devtools, it's a good idea to install it globally.
24+
Run the following command:
2125

2226
```shell
2327
$ npm install -g @vue/devtools@beta
2428
```
2529

26-
This will allow you to run the `vue-devtools` command regardless of the current directory you are in.
30+
After the installation is complete, you can run the `vue-devtools` command from any directory on your development machine.
31+
32+
## Step 3: Install the `nativescript-vue-devtools` plugin in your app
2733

28-
** 3. Install the `nativescript-vue-devtools` plugin into your app **
34+
To connect your application to the Vue DevTools, you need to modify `main.js`.
2935

30-
To connect your application to the devtools, you will have to make a slight modification to your `main.js`.
31-
Import `nativescript-vue-devtools` and tell NativeScript-Vue about it using `Vue.use()`
36+
In your code, import `nativescript-vue-devtools` and tell NativeScript-Vue about it using `Vue.use()`.
3237

33-
```js
38+
```JavaScript
3439
import Vue from 'nativescript-vue'
3540
import VueDevtools from 'nativescript-vue-devtools'
3641

3742
Vue.use(VueDevtools)
3843
```
3944

40-
*Optional*: If you use a real device instead of an emulator, it will not be able to connect to your host machine by default. You will need to set the host config option to the IP of your dev machine:
41-
```js
45+
If you are using a real device instead of an emulator, set the `host` configuration option to point to the IP of your development machine. Otherwise, your device will not be able to connect to your host machine.
46+
47+
```JavaScript
4248
Vue.use(VueDevtools, { host: '192.168.1.42' })
4349
```
4450

45-
** 4. Run Vue Devtools **
51+
## Step 4: Run Vue DevTools
52+
53+
Run the following command to launch the Vue DevTools:
4654

4755
```shell
4856
$ # if installed globally
@@ -51,7 +59,9 @@ $ # or
5159
$ npx vue-devtools
5260
```
5361

54-
** 5. Rebuild and run your app **
62+
## Step 5: Rebuild and run your app
63+
64+
Run the following command:
5565

5666
```shell
5767
$ rm -rf platforms
@@ -60,4 +70,4 @@ $ # or
6070
$ tns run ios --bundle
6171
```
6272

63-
If everything went well, you should see a few components in the component tree of Vue Devtools.
73+
If your machine and app are configured properly, you should see a few components in the component tree of Vue DevTools.

0 commit comments

Comments
 (0)