vscode配置使vue项目支持断点调试

动机

console.logvscode

先决条件

ChromeVS CodeDebugger for ChromeVue CLI 3

浏览器断点调试

ChromeVuewebpacksource map

source map

vue-cli3设置source map

vue-cli3vue.config.jsdevtoolwebpack

//vue.config.js
module.exports = {
  ...
  configureWebpack: {
	devtool: 'source-map'
  }
}
复制代码

ChromeF12

devtooleval-cheap-module-source-mapsource-mapeval-cheap-module-source-mapcheap-module-source-mapwebpack

vscode断点调试

Debugger for Chrome

launch.json

vue.config.jsdevServer

VscodeDebugging

断点调试项目

npm run serveF5

同时可以借助

vscode

调试控制台来查看

console.log

感谢支持

因为很多小伙伴想看这个断点配置，就写了配置手册。如有出错之处，望指点