使用 VSCode Debugger
VSCode 内置了一个 debugger 的模块，我们想边调试边修改代码就可以使用这个功能，要启用这个工功能我们只需要新建一个配置文件 .vscode/launch.json :
我以 vue 项目为例做一个演示：
我们可以在 VSCode 左侧的 debug 选项卡中点击 "create a launch.json file"
我们选择 Web App(chrome) 就会立即生成模板：
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
默认的配置文件是 launch 模式，就是配置文件中的 { "request": "launch" } ，不同的模：
| 模式 | 说明 |
|---|---|
| launch | 会以调试模式启动一个浏览器，然后再 attach 通信进行调试 |
| attach | attach 到一个已经开启的浏览器窗口进行调试 |
根据实际情况我们调整一下 url 属性，比如我的项目端口是开启 https 的 1024端口，修改成 https://localhost:1024，点击“运行”按钮：
顺利的话，我们可以看到 chrome 打开了我们指定的 url ，我们可以在源代码中加入 debugger 保存，网页会自动刷新并且执行就暂停在我们写 debugger 的这一行。
但是我们不能在编辑器中直接通过点击行号的方式来设置断点，这是因为我们没有配置 source map 映射关系，我们继续手动添加 debugger 的方式来进入调试会话中，我们可以在浏览器的文件面板鼠标悬浮在文件名上，会显示出当前映射的文件路径为 webpack:///src/main.js?56d7
我们需要将这个路径指向到我们真正的源文件绝对路径就可以，我们在 launch.json 中增加 sourceMapPathOverrides 属性：
{
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/src/*",
"webpack:///./src/*": "${webRoot}/src/*"
}
}
// 一般情况下 "webpack:///src/*": "${webRoot}/src/*", 就可以满足需求，但是因为我的 webpack 修改了 publicPath: './'，因此路径前面会多一个 ./
// 因此我增加了一个相应 webpack:///./src/* 的配置
当我们不管怎么配置都不能生效的时候，我们可以通过以下几步来找原因：
将鼠标悬浮在空心圆点上，点击 "troubleshoot your launch configuration"
点击"What scripts and sourcemaps are loaded"
当我们看到有很多类似于 /js/webpack:/src/App.vue 这种不存在的地址映射的时候，基本可以判定是有映射错误的，我们可以将下面蓝色框展开
这里面罗列了所有的映射关系，我们可以看到很多 webpack:///./src/ 因此我们可以将这个路径也进行映射
"webpack:///./src/": "${webRoot}/src/"
另外因为我们映射的路径中包含有 hash , 即使我们增加了上面的映射关系，我们的断点依然不会生效，我们还需要修改 vue 配置，将 devtool 设置为 source-map :
// # vue.config.js 中设置 devtool
//...
configureWebpack(config) {
config.devtool = 'source-map';
}
//...
通过以上的配置，就可以体验边修改代码边调试的乐趣了。
vscode 调试 npm script
vscode 也内置了对 npm script 的支持，比如我们要调试分析 vue-cli ，我们就可以再创建一个调试 npm 的配置脚本，方法同之前创建 Web App(Chrome) 的方式，只是我们需要选择 nodejs: via npm ，就会自动生成配置：
{
"name": "Launch via NPM",
"request": "launch",
"runtimeArgs": [
"run-script",
"serve"
],
"runtimeExecutable": "npm",
"skipFiles": [
"<node_internals>/**"
],
"console": "integratedTerminal",
"type": "node"
},
我在默认的配置中增加了 "console": "integratedTerminal"，这个的目的主要是将 console 的输出导入到命令行的位置，不然默认在左侧 DEBUG CONSOLE，不太习惯。
在DEBUG面板，我们选择 "Launch via NPM" 这个配置，点击启动就会以debug的模式来运行 vue-cli 了，我们可以在相应的文件中自己设置断点来体验整个 vue-cli 的启动流程。
使用 Overrides 让调试更轻快
在 Android 中调试网页，现在有很多的限制，我们不能像在 iOS 中一样安装一个用户证书就能很容易的实现 HTTPS 代理，在不能使用 HTTPS 代理的情况下，我们怎么来调试线上代码呢，这个时候 Overrides 功能就能派上用场。
点击 Sources 面板，我们可以在界面的左侧看到有 Page、Filesystem、Overrides、Snippets、Content Scripts 几个子选项卡。
当我们需要调试某个js的时候，我们先点击 Overrides ，再点击 + Select folder for overrides
在文件夹选择器中我们可以新建一个文件夹专门用来存储需要调试的文件，选择之后，我们需要对读取本地文件系统文件的行为进行授权：
授权完成后，我们切换回 Page 选项卡，找到我们需要调试的文件，比如调试 www.baidu.com 的首页，点击鼠标右键，选择最后的一个选项“Save for overrides”
再切换回 Overrides 选项卡，我们就可以看到刚保存的文件了：
我们可以在右侧的编辑器中进行自由的编辑，编辑保存刷新页面就可以看看我们添加的内容是否生效了，在 Page 选项卡中的资源都是可以被覆盖的，功能就跟使用代理劫持替换一模一样，唯一不足的是，资源只能映射到 Overrides 保存的文件之中，而不能映射为一个远程资源，比如就映射到本地文件服务链接 localhost:8888/index.js。
