如何使用
Debugger for Chrome这个插件在vscode中进行debugger调试。
项目地址：https://github.com/Ewall1106/mall
在 vscode 中调试 vue
如何使用 Debugger for Chrome 这个插件在 vscode 中进行 debugger 调试。
安装插件
- 在
vscode中安装这个扩展。
开启 sourceMap
- 如果你是使用
vue-cli3.x+以上脚手架构建的项目，需要在vue.config.js中配置。
configureWebpack: {
devtool: "source-map";
}
- 如果你是
低版本脚手架构建的项目，需要先自行设置source-map的开启。
devtool: "source-map";
配置调试
- 选择新建一个
launch.json的文件，选择Chrome环境。
- 然后将生成的
launch.json的配置内容改为如下：
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Panda-mall debugger",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": false,
"sourceMapPathOverrides": {
"webpack:///./*": "${webRoot}/*",
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
启动调试
我们在任意位置打个断点测试一下（如下图的
51行）。当你点击那个绿色的
play按钮启动调试的时候，会自动在浏览器中打开http://localhost:8080实例，然后vscode中设置的断点就被命中了。
- 同样，浏览器中也会处于断点调试的状态。
image
