1 调试是什么？
1.1 调试是什么？
**Bug的起源**：当时人们还在使用第一代真空计算机（马克二型），这种计算机是依靠控制电流来改变开关，从而实现控制，但是它会发出大量的热和光。
1949年9月9日，天气非常炎热，有一只娥死在了70号继电器里面，造成电路不通，机器死机，经过近一天的检查，Grace Hopper（格蕾斯哈珀）终于找到了真凶，原来正是被光吸引过来的娥造成了机器宕机，在这儿之后，在计算机科学中，Bug就从虫子变成了程序的缺陷，一只虫子就这样被载入了计算机史册。
**调试** （英文 ： Debugging / Debug），又称除错，是发现和减少计算机程序或电子仪器设备中程序错误的一个过程。
1.2 调试的基本步骤
-
发现程序错误的存在；
-
以隔离、消除等方式对错误进行定位；
-
确定错误产生的原因；
-
提出纠正错误的解决办法；
-
对程序错误予以改正。重新测试；
2 调试方法
控制台发送请求
有时候后端不仅会让我们重复发送请求，还会要求我们修改请求的参数，那么可以复制到控制台
这里不管是body参数还是query参数都可以随我们自己的要求去随意更改，更改完成按下回车即可.
日志调试
这种调试方案是最方便简明的，直接在需要调试的代码处console.log（xxx），可以直接打印出所需要的数据，一目了然；添加console.log(),之后可以直接在控制台看到所需要打印的数据，可以根据这个数据进行调试，查看效果；但是有一个比较麻烦的地方，就是在prod环境的时候要屏蔽掉console.log();当然现在构建工具是可以很轻松做到这一点的，不过也算是需要处理，难免也算一个麻烦的地方；
***支持占位符***
`console.log("%c%d年%d月%d日%s%o",'color:red',2023,08,04,'张三',{name:'李四',sex:'男'});`
```
%s --- 字符串
%d --- 数字
%o --- 对象
%c --- 样式(css)
```
控制台最常用的功能是记录文本和其他数据。还可以使用以下方式进行多种类别的输出
```
console.assert() 将错误消息写入,默认不写入，只写入第一个参数为false的消息
console.warn() 将消息显示为警告
console.error() 将消息显示为错误
console.table() 将表格数据显示为表格
console.group() 创建一个新的内联组,将所有后续输出缩进到另一个级别。一般后面跟console.groupEnd()
console.time() 展示time到timeEnd期间的执行时间
```
***日志保持***
场景：假设在重新加载页面之前或导航发生时出现了问题，你会尝试登录控制台，但所有内容都被清除了
解决：
控制台常用方法
（1）$_可以引用上一步的操作结果，而不需要从头开始调用
（2）$(selector)
控制台是支持jquery的$，可以使用 $(selector)，查看节点。
> [!NOTE]
> 注：浏览器控制台封装的$只能输出一个元素对象，当使用class[选择器](https://so.csdn.net/so/search?q=选择器\&spm=1001.2101.3001.7020)选择到多个元素时只会展示第一个元素。
（3）$ $(selector)
相当于`querySelectorAll()`,返回一个数组，包含所有选择到的元素。
debugger断点
在代码中添加debugger来给代码设置断点，当打开开发者工具代码执行到该语句的时候就会自动断点，也可以在开发者工具栏中Sources面板添加断点调试。
(1)（三角形）暂停/恢复脚本执行（程序执行到下一断点停止）
(2)（半弧箭头）单步跳过下一个函数调用
(3)（下箭头）单步执行下一个函数调用
(4)（上箭头）跳出当前函数
(5) 跳到下一条执行语句
(6) 关闭/开启所有断点（不会取消）
(7) 异常情况自动断点设置，浏览器会在程序发生异常的那一行设置断点，即当程序会在异常发生处暂停；
(8)Scope Variables作用域变量变化跟踪
Network
场景：在一些需要测试加载动画loading中
Network面板通过no throttling选项，可以选择手动模拟网速
3 调试插件
Eruda
是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。
只需要引入
```
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>
eruda.init();
</script>
```
Vconsole
***方式一***
```
npm install vconsole
import VConsole from 'vconsole';
const vConsole = new VConsole();
console.log('Hello world');
```
***方式二***
```
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
// VConsole 默认会挂载到 window.VConsole 上
var vConsole = new window.VConsole();
// 接下来即可照常使用 console 等方法
console.log('Hello world');
```