vscode调试vue项目

vscode如何调试vue项目，通过F5进行断点调试，类似与vs进行调试，vscode需要安装插件以及配置launch.json文件。

步骤一：

1.找到“扩展”或者按快捷键“Ctrl+Shift+X”，如下图，输入Debugger for Chrome查找，并安装。

2.项目里创建“launch.json”文件，内容如下：

关键是json配置：

{

"name": "chrome",

"type": "chrome",

"request": "launch",

"url": "http://localhost:8080/",

"webRoot": "${workspaceRoot}"

}

{
// 使用 IntelliSense 了解相关属性。
// 悬停以查看现有属性的描述。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"name": "chrome",
"type": "chrome",
"request": "launch",
"url": "http://localhost:8080/",
"webRoot": "${workspaceRoot}"
},
{
"name": ".NET Core Launch (console)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceFolder}/bin/Debug/<insert-target-framework-here>/<insert-project-name-here>.dll",
"args": [],
"cwd": "${workspaceFolder}",
"console": "internalConsole",
"stopAtEntry": false,
"internalConsoleOptions": "openOnSessionStart"
}
]
}

3.在“package.json”文件里的"scripts"中添加："dev": "vue-cli-service serve --open" 此命令是启动服务。如下图：

4.按“Ctrl+Shift+Y” 调出终端，输入：npm run dev

访问地址：http://localhost:8080

5.找到“Ctrl+Shift+D”，点击绿色按钮开始调试，会弹出google浏览器访问网站，在你想要的地方添加断点，如下图：

最后

以上就是清新钢笔为你收集整理的vscode调试vue项目的全部内容，希望文章能够帮你解决vscode调试vue项目所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。