首先在vs code中安装 Debugger for Chrome 之后配置launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "vuejs: chrome",
"url": "http://localhost:5050",
"webRoot": "${workspaceFolder}/src",
"breakOnLoad": true,
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
}
}
这是配置chrome的json
接着去vue.config.js内配置
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
然后重跑服务,打断点,点那个小虫子,选择就能看到断点了,
打断点的时候需要先停掉debug,打完了在启动就能看到了。