vscode代码调试
# 简介
介绍VSCode用户在浏览器中如何调试Vue项目代码
# 下载vscode扩展插件
应用商店中搜索: [Deprecated] Debugger for Chrome,下载不了可能需要翻墙,可以找我要下载好的扩展插件
# 配置
点击在Debugger图标看到Debug视图,然后点击那个齿轮图标来配置一个 launch.json 的文件
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
},
]
}
# 开始调试
运行vue项目,点击要调试的代码,选中行数旁边的位置,会出现小红点;设置好断点之后就可以启动(绿色的图标);这时候会自动启动一个google浏览器的窗口,操作窗口对应的打断点位置,就会命中断点;这个时候就可以再vscode调试代码了