vue.js - 在 Visual Studio Code 中使用 Vue 调试 NativeScript

Question

我使用以下指南使用 Vue.js 创建了一个 NativeScript 应用程序: https://nativescript-vue.org/en/docs/getting-started/quick-start/

这些命令创建以下代码结构:

我正在尝试使用 Visual Studio Code 调试应用程序。我为 VS Code 安装了 NativeScript 扩展。这生成了以下 launch.json 配置:

{
    "name": "Launch on Android",
    "type": "nativescript",
    "request": "launch",
    "platform": "android",
    "appRoot": "${workspaceRoot}",
    "sourceMaps": true,
    "wtch": true
}

运行后出现如下错误:

No project found at or above 'my project root dir' and neither was a --path specified.

当我将 launch.json 配置更改为以下内容时(注意 appRoot 中的 dist 目录):

{
    "name": "Launch on Android",
    "type": "nativescript",
    "request": "launch",
    "platform": "android",
    "appRoot": "${workspaceRoot}\\dist",
    "sourceMaps": true,
    "wtch": true
}

然后开始调试，应用程序完美启动，但我无法在 JavaScript 文件中设置任何断点。这当然是因为 dist 目录已经包含编译后的 Android/iOS 代码，而 JavaScript 文件位于 src 目录中。

如何使用 NativeScript、Vue.js 和 VS Code 调试和设置断点？

Answer 1

如果您使用 nativescript-vue/vue-cli-template 的 next 分支，现在可以使用 NativeScript VSCode 插件在 VSCode 中进行调试。此模板使用 Vue CLI 3.0简化设置并重新与 NativeScript 实践保持一致(特别是允许根目录中的 tns 命令)。

请注意，如 debug Webpack section 中所述，您需要将以下内容添加到适当的 launch.json 配置中:

"tnsArgs": [ "--bundle" ] 

此外，需要激活 webpack 源映射才能在单文件组件中启用断点。将以下内容添加到您的 webpack.config.js:

devtool: "eval-source-map"

享受集成调试。