动机

每个运用，不管大小，都需求了解程序是如何运转失利的。当我们写的程序没有依照自己写的逻辑走的时分，我们就会逐渐逐个排查问题。在往常开发进程中我们可能会凭仗console.log来排查,但是现在我们可以凭仗vsc# ~ H $ c Zodr Z + ] s Oe断点来调试项目。

先决条件

  • 浏览器：Chrome
  • 编辑器：VS Code
  • vs{ Z . mcode扩展插件：Debugger for Chrome
  • 项目搭建：Vue CL4 C @ w dI 3

浏览器断点调试

在可以从 Chrome 浏览器调试你的 Vue 组件之前，你需求更新 webpack 配备以构建 souF W N s S U W _ -rce mas k V D - tp。做了这l I ( u件事之后，我们的浏览器就有机会将一个被压缩的文件中的代码对应回其源文件相应的方位。这会保证你可以在一个运用中h – X q调试，即便你的资源已经被 webpack 优化过了也没关系。

source map可以u A m / 6 K J生成一个源代= L 6 L 码的映射文件* T o.map文件，可以让你打包压缩的代码指向回源代码。

vue-cli3设置source map

运用vue-cli3搭建项目，在项目根目录vue.config.js文件配备相对应的devtor C ? Q y H l b aol,集体devtool配备概况介绍可以参看我之前写的webpack文章

//vue.config.js
moduS t . u 4 B ,le.exports = {
...
configureWebpack: {
devtool: 'e Z  q * E ?source-map'
}
}

npm跑起项目后，在Chrome浏览器F12在控制台就3 w A M G K可以进行相对应的断点调试了

vscode配备使vue项目支撑断点调试

注：devtool4 A . M W 设置成eval-cheap-module-source-map打包编译速度会比source-q } Dmap更快，所以主张在开发环境设置成eval-cheap-module-s? o 6 8 T nource-map,生成环境设置成cheap-module-source-map,更多配备可以检查webpack文档

vscode断点调试

* 进程一：装置Debugger for Chrome插件

vscode配备使vue项目支撑断点调试

* 进程二：配备launch.json文件

vscode配备使vue项目支撑断点调试
vscode配备使vue项目支撑断点调试
vscode配备使vue项目支撑断点调试

**留意:**url参数配备要和vue.config.jG g 4 O `s的devServer保持一致

//launch.json
{
// 运用 IntelliSense 了解相关特色。
// 悬停以检查现有特色的描绘。
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlY . A h Uink/?  r u - L linkid=830387
"version": "0.2.0",
"configurationsB R 6 S @ N R $": [
{
"type": "chrome", //调试的环境
"request": "launcz z 1 7h", //调试模式：发动类型
"name": "erp_admin_break", // 自定义调试称号
"url": "httU D . 7 i F o } mp://localhost:3000", //调试的服务地址，需求和devServT Y ler对应
"webRoot": "${workspaceFolderP 1 h R + f ^ A}/src", //调试的根途径为g ? : Ksrc事务目录下
"breakOnLoad": true,
"sourceMapPathOverrides": { //指定生成的sourceMap途径，参看浏览器生成的 .目录和src目录
"webpack:///srcn # U [ U D/*": "D ? q Z g r 6${webRoot}/*",
"webpack:///./src/*": "${webRoot}/*"
}
}
]
}

Vscode 调试Debugging参数概况阐明可以参看官方文档

断点调试项目

发动项目 npm run serve,F5翻开调试,

vscode配备使vue项目支撑断点调试

一起可以凭仗vscode调试控制台来检查console.log

vscode配备使vue项目支撑断点调试

感谢支撑

因为许多小伙伴想看这个断点配备，就写了配备手册。如有犯错之处，望点拨一起k ] X ^学习。再+ v y , Q & Q次感谢各w ! 5 – [ ) ) L l位的阅读！路过的可以关注一波给个赞♥♥♥} H x R