您可以使用独立版本的 Vue DevTools 调试 NativeScript-Vue 应用程序。

为了简化集成，您可以使用 nativescript-vue-devtools 插件，它负责将您的应用程序连接到 Vue DevTools。

步骤 1：安装依赖项

运行以下命令

$ cd <project-folder>
$ npm install --save @vue/devtools@^5.3.4 @triniwiz/nativescript-toasty @triniwiz/[email protected] nativescript-vue-devtools

步骤 2：在您的应用程序中安装 nativescript-vue-devtools 插件

要将您的应用程序连接到 Vue DevTools，您需要修改 main.js（或 main.ts）。

在您的代码中，导入 nativescript-vue-devtools 并使用 Vue.use() 告诉 NativeScript-Vue 关于它。

import VueDevtools from 'nativescript-vue-devtools'
import Vue from 'nativescript-vue'

Vue.use(VueDevtools)

确保您在 Vue 之前导入 devtools，否则它可能无法按预期工作。

如果您使用的是真实设备而不是模拟器，请将 host 配置选项设置为指向您的开发机器的 IP。否则，您的设备将无法连接到您的主机。

Vue.use(VueDevtools, { host: '192.168.1.42' })

步骤 3：运行 Vue DevTools

在新的终端中运行以下命令以启动 Vue DevTools

$ npx vue-devtools

应该会打开一个窗口。此窗口中显示的说明在 NativeScript-Vue 应用程序中不需要，因此请忽略它们。

步骤 4：重建并运行您的应用程序

运行以下命令

$ rm -rf platforms
$ tns run android
$ # or
$ tns run ios

如果您的机器和应用程序配置正确，您应该在 Vue DevTools 的组件树中看到一些组件。

故障排除

在 Android API 级别 28 及更高版本上，明文流量默认情况下被禁用。为了连接到 Vue DevTools，您需要将 android:usesCleartextTraffic="true" 添加到 App_Resources/Android/src/main/AndroidManifest.xml 文件中

<application
 <!-- ... -->
 android:usesCleartextTraffic="true"
 <!-- ... -->
</application>

完成更改后，删除 platforms 文件夹，然后重建应用程序。Vue DevTools 现在应该自动连接。