一、序
工欲善其事，必先利其器。作为一名资深程序员，置信必有一款调试神器相伴左右，帮忙你疾速发现问题，解决问题。作为前端开发，我还很年老，也喜爱去捣鼓一些货色，借着文章的题目，先提一个问题：大家目前是怎么调试前端？哈哈，我也大胆的猜想下，可能有这么几种：
不调试，间接看代码找问题
console.log 打印日志
用 Chrome Devtools 的 debugger 来调试
用 VSCode 的 debugger 来调试
以上形式我置信大家根本都用过，不同的调试形式效率和体验是不一样的，我当初根本都是用 VSCode debugger 来调试，效率又高、体验又爽。
明天我就来介绍下怎么用 VSCode 调试网页。
二、实际
还是以之前的小 demo 来做演示，首先咱们须要在我的项目根门路下增加一个
.vscode/launch.json
的配置文件，其内容如下：
{
"configurations": [
{
"name": "Launch",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {"villiam://src/*": "${workspaceFolder}/src/*"
}
}
]}
创立了一个调试配置，类型是 chrome，并指定调试的 url 是开发服务器的地址。
因为 Vue 咱们写的是 SFC（single file component）格局的文件，须要 vue-loader 来把它们分成不同的文件，所以门路独自映射一下，能力对应到源码地位。
所以调试配置里须要加个
sourceMapPathOverrides：
“sourceMapPathOverrides”: {
"villiam://src/*": "${workspaceFolder}/src/*"
}
那么这外面的值是怎么来的呢？首先 workspaceRoot 是 vscode 提供的环境变量，就是我的项目的跟门路，这样一映射之后，地址不就变成本地的文件了么？那么在本地文件中打断点就能失效了。那右边的 key 值是怎么来的呢？其实这个门路是能够配置的，这其实就是 webpack 生成 sourcemap 的时候的文件门路，能够通过 output.devtoolModuleFilenameTemplate 来配置：
configureWebpack:{
output:{devtoolModuleFilenameTemplate:'villiam://[resource-path]'
}}
以上其实咱们曾经把调试的配置全副实现了，接下来咱们就一起来见证下奇观～
启动：
会先关上浏览器：
点击按钮后，进入断点：
不论你是想调试 Vue 业务代码，还是想看 Vue 源码，体验都会很爽的。
三、小结
明天给大家分享的是一个调试小技巧，不便咱们查找定位问题用，心愿在工作中晋升你的效率。
其实 React 的调试绝对简略，只有增加一个 chrome 类型的 dubug 配置就行，Vue 的调试要麻烦一些，要做一次门路映射。
有趣味的能够走一波。
欢送关注