vue.js - 在 Visual Studio Code 中使用 Vue 调试 NativeScript
问题描述
我使用以下指南使用 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 调试和设置断点?
解决方案
如果您使用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"
享受集成调试。
推荐阅读
- javascript - Vue js + Element UI [如何打印表格?]
- c - 如何在内核模块中创建每个进程的变量?
- excel - 取消文件对话框提示excel打开excel日志文件
- python - 缩放和保存图像(AttributeError:'NoneType' 对象没有属性'shape')
- mysql - 如何优化mysql查询?
- matlab - 如何在给定 3x3 矩阵的 matlab 中找到稳态向量
- ssh - 如何通过 putty ssh 进入云 shell vm 以及如何在没有 webpreview 的情况下查看 cloud-shell 上的端口
- xamarin - Mac OS 应用故事板说“id 不能为空”?
- python - 使用 Pandas Dataframe 到 Sqlite DB 不会减少 Ram
- javascript - 无法从 indexedDB 中获取数据