之前的一篇文章讲了两种在 vue 项目中调试的方法，一个是在项目源码中手动加入断点(debugger), 然后利用 Chrome 调试，第二种是直接在 Chrome 中打断点调试，但是需要知道怎么找到调试文件，除了这两种方式以外 vue 还存在其他的方法去调试，比如
- console
- vscode 插件 Debugger for Chrome
- 以及前一篇文章介绍的 Chrome 断点调试
本篇文章就针对上面的方法做一些简单的介绍和不同
console
类似 console 这种打印信息的调试方法，几乎每种语言都有，而 JS 也是非常多人在使用，而且也很方便，需要调试的地方就去插入console类的输出语句就可以打印相关的信息，还可以根据不同类型的调试输出不同颜色，不同类型的提示，比如 console.log, console.error, console.info...我基本只用console.log, 其具体使用方式如下
function getData() {
// ...
const data = console.log(data); //...;
}简单的输出你需要的信息，比如你想知道接口返回的数据是什么？有没有返回正确的数据？当发现渲染错误的时候我可能就会去打印一下，其实这种调试思路有点像黑盒测试，不用去管内部实现，就是看用户输入得到的输出是什么
console 调试还有一个优点就是，打印的数据具有完整的数据结构，类似对象，数组之类的值，可以清晰的看到它的数据结构，像 JS 这种具有复杂引用的语言，可以查看它的原型链，即使是 vue 负责项目的开发中也能帮助我们进一步分析输出，这也是浏览器提供给我们的便利
当然 console 调试可以有另一种目的，就是日志记录，web 前端在这一块似乎没有太多发展，不过像后端和客户端(Andorid), 都对日志有很多要求和拓展，像我在 SpringBoot 用的很多的 log4j，在前一段时间还因为存在 BUG 影响很大，在参考一些后端 github 库的时候都是有很多日志记录的, console 可以在一些位置进行一定的输出，检测整个环境运行的情况，毕竟一个项目复杂的时候，很多 BUG 是无法复现的，更多的时候可以通过日志去找 BUG, 具体实例参考如下（可能与实际有较大出入，我前端和后端都没有和日志有过太多的了解）
2022年2月18日23点46分 -- xxx 用户登录
2022年2月18日23点46分 -- xxx 用户退出小结
优点
- 适用场景广，简单易上手
缺点
- 需要删除部分 console 语句
- 复杂逻辑无法调试，不适用于白盒测试
vs code 插件 Debugger for Chrome
这是同类文章经常提到的一个调试方法，因为很多人前端写代码都是用的 vscode(白嫖真香), 没有用 webStorm(没钱氪金), 这点就不像后端，基本都用 IDEA, 甚至连 Android 客户端都有 IDEA 爆改版 Android Studio(Google 大力出奇迹), 不过 vscode 还是挺好用的，像这篇文章也是在 vscode 用的 markdown 插件写的，所以回到这个调试工具 Debugger for Chrome, 它的具体使用方式如下,
这种方式是使用 vscode 提供的调试工具调试, vscode 的调试工具还是比较全面的，基本的逐行调试，查看变量值(watch) 什么的都有，而且它的使用让我感觉像是在调试 Java, 像以前 SpringBoot 就是需要重启调试，不是说随时加个断点然后就能马上停止，所以 Debugger for Chrome 的缺点就很明显了，并不能及时复现 BUG, 因为它的调试是重新打开一个 Chrome Tab 页，相当于重启，而重启以后很多调试的环境已经是不存在了，失去了调试的可能
还有一个缺点就是，并不是开箱即用，是需要一点配置的，像我之前使用的话，中间失败了好几次最后才成功，还是有点难上手操作的
小结
优点
- 能够利用 vscode 原生强大的调试工具
- 直接在源码上打断点调试
缺点
- 需要重启环境，部分 BUG 无法复现
- 需要配置，不是开箱即用
Chrome 中打断点调试
这是我用的比较多的调试方法，直接在 Chrome 中打断点调试，具体使用方法可以参考我之前的文章vue 项目调试你可以这样做
这种方法是基于 source-map 的，依赖于浏览器中和源码的一个映射，通过映射来找到源文件，不过我在使用中发现，我没有配置 source-map 却仍然能够在 Chrome 中找到我的源码映射，难道是我的 vue-cli 版本太高？(我的 vue-cli 版本为 4.5.15), 还有额外的一点就是 vite 也是无需配置 source-map
这里补充一下 vue-cli 和 vite 在浏览器中运行时目录结构的区别
这是 vue-cli 运行时浏览器的目录结构及源码映射位置
这是 vite 运行时浏览器的目录结构及源码映射位置
vite 要更清晰一点（所以还不赶紧上手 vite？），但是两个开发工具都可以使用 Ctrl+P 快捷键快速找到源文件
比较
- console 适用面更广，适用于黑盒测试场景，还可以用于日志记录，但逻辑内部错误无法调试
- Debugger for Chrome 适用于白盒测试，调试时需要
重启，具有上手难度，但是可以用 vscode 的调试工具 - Chrome 中调试，利用 Chrome 原生的调试工具（Chrome 的其实更专业），内部逻辑错误也能够调试，准确定位 BUG, 开箱即用，随用随调，可以随时打断点并调试，动态调试，但是需要找到源文件
