vscode调试前端vue项目
1、vscode 打开 vue 项目
2、terminal窗口执行 npm run dev 或 npm run serve
具体命令需查看 package.json,scripts字段的值
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
执行后输出信息:
DONE Compiled successfully in 11498ms 14:59:38
App running at:
- Local: http://localhost:8080
- Network: http://192.168.120.11:8080
Note that the development build is not optimized.
To create a production build, run npm run build.
3、点击侧边栏“Run and Debug”,创建 launch.json,内容如下:
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch Edge against localhost",
"url": "http://localhost:8080", // 与步骤2的输出相同
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*"
}
}
]
}
4、vue.config.js文件添加配置项
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
5、terminal窗口Ctrl+C停止步骤2的运行,再次运行 npm run serve
6、在项目的 js 或 vue 文件中设置断点,F5 即可启动调试
如不能命中断点,可在目标行之前添加 debugger; 语句
更多推荐



所有评论(0)