Skip to content

Commit 211fefc

Browse files
authored
docs(devtools): add troubleshooting guide
1 parent f0472ab commit 211fefc

File tree

1 file changed

+24
-8
lines changed

1 file changed

+24
-8
lines changed

content/docs/en/getting-started/5-vue-devtools.md

+24-8
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ $ cd <project-folder>
1717
$ npm install --save @vue/devtools nativescript-toasty nativescript-socketio nativescript-vue-devtools
1818
```
1919

20+
<!--
2021
## (Optional) Step 2: Install Vue DevTools globally
2122
2223
To easily access Vue DevTools, you can install the package globally.
@@ -28,8 +29,9 @@ $ npm install -g @vue/devtools
2829
```
2930
3031
After the installation is complete, you can run the `vue-devtools` command from any directory on your development machine.
32+
-->
3133

32-
## Step 3: Install the `nativescript-vue-devtools` plugin in your app
34+
## Step 2: Install the `nativescript-vue-devtools` plugin in your app
3335

3436
To connect your application to the Vue DevTools, you need to modify `main.js` (or `main.ts`).
3537

@@ -49,20 +51,19 @@ If you are using a real device instead of an emulator, set the `host` configurat
4951
Vue.use(VueDevtools, { host: '192.168.1.42' })
5052
```
5153

52-
## Step 4: Run Vue DevTools
54+
## Step 3: Run Vue DevTools
5355

54-
Run the following command to launch the Vue DevTools:
56+
Run the following command in a new terminal to launch Vue DevTools:
5557

5658
```shell
57-
$ # if installed globally
58-
$ vue-devtools
59-
$ # or
6059
$ npx vue-devtools
6160
```
6261

63-
## Step 5: Rebuild and run your app
62+
A window should open. Instructions shown in this window are not required in a NativeScript-Vue application, so please ignore them.
6463

65-
Run the following command:
64+
## Step 4: Rebuild and run your app
65+
66+
Run the following commands:
6667

6768
```shell
6869
$ rm -rf platforms
@@ -72,3 +73,18 @@ $ tns run ios
7273
```
7374

7475
If your machine and app are configured properly, you should see a few components in the component tree of Vue DevTools.
76+
77+
# Troubleshooting
78+
79+
On Android API level 28 and above, cleartext traffic is disabled by default. In order to connect to Vue DevTools you will have to add
80+
`android:usesCleartextTraffic="true"` to the `App_Resources/Android/src/main/AndroidManifest.xml` file:
81+
82+
```xml
83+
<application
84+
<!-- ... -->
85+
android:usesCleartextTraffic="true"
86+
<!-- ... -->
87+
</application>
88+
```
89+
90+
After making the change, delete the `platforms` folder, and rebuild the app. Vue DevTools should now connect automatically.

0 commit comments

Comments
 (0)