2

我使用以下指南使用 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
}

运行时，显示以下错误：

在“我的项目根目录”或以上找不到项目，也没有指定 --path。

当我将 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 调试和设置断点？

4

2 回答 2

4

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

请注意，正如调试 Webpack 部分中提到的，您需要将以下内容添加到适当的 launch.json 配置中：

"tnsArgs": [ "--bundle" ]

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

devtool: "eval-source-map"

享受集成调试。

于 2018-09-07T01:52:09.150 回答
2

NativeScript-Vue和NativeScript VS Code plugin不兼容，因为 NativeScript-Vue 使用npm commands，而 NativeScript VS Code 插件使用tns幕后命令。

要调试 NativeScript-Vue，请运行

npm run debug:<platform>

在调试输出中，您将看到一个使用 Chrome DevTools 进行调试的 url。它看起来像这样：

要开始调试，请在 Chrome 中打开以下 URL：chrome-devtools://devtools/bundled/inspector.html?experiments=true&ws=localhost:40000

在 Chrome 中打开此 url，您将能够在 Chrome DevTools 中进行调试，包括设置断点。

于 2018-07-04T15:35:57.060 回答