1. VS安装插件Debugger for Chrome
2. Vue CLI 3创建项目
3. Vue.config.js devtool
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
…
}
4. vscode调试栏创建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}/*"
}
}
5. 设置断点
6. CMD: npm run dev
7. 在VScode 开始调试
点击绿色▶会自动弹出浏览器，并命中断点
