常用浏览器调试方法

# 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=%E9%80%89%E6%8B%A9%E5%99%A8&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');

```