前端调试知识

BUG与Debug

第一个BUG的产生

第一个BUG可以追溯到1945年的9月
1945年9月9日，下午三点。哈珀中尉正领着她的小组构造一个称为“马克二型”的计算机。这还不是一个真正的电子计算机，它使用了大量的继电器，一种电子机械装置。第二次世界大战还没有结束。哈珀的小组日以继夜地工作。机房是一间第一次世界大战时建造的老建筑。那是一个炎热的夏天，房间没有空调，所有窗户都敞开散热。

突然，马克二型死机了。技术人员试了很多办法，最后定位到第70号继电器出错。哈珀观察这个出错的继电器，发现一只飞蛾躺在中间，已经被继电器打死。她小心地用摄子将蛾子夹出来，用透明胶布帖到“事件记录本”中，并注明“第一个发现虫子的实例”。

从此以后，人们将计算机错误称为Bug，与之相对应，人们将发现Bug并加以纠正的过程叫做“Debug”，意即“捉虫子”或“杀虫子”.

BUG是无法避免的

前端Debug的特点

1.多平台

2.多环境

3.多工具

4.多技巧

chrome DevTools

动态修改元素和样式

`Elments`面板用于调试元素与样式

可以实时修改标签和样式

在Computed中可以看到最终生效的样式,以及其对应的CSS文件来源

点击.cls开启动态修改元素的class
输入字符串可以动态地给元素添加类名
勾选/取消类名可以动态地查看类名生效效果
点击具体的样式值(字号,颜色,宽度高度等)可以进行编辑,浏览器内容区域实时预览
Computed下点击样式里的箭头可以跳转到style面板中的css规则

可以使用以下两种方式强制激活伪类
- 选择具有伪类的元素,点击:hov
- DOM树右键菜单,选择Force State

Console日志面板

console.log
console.warn
console.error
console.debug
console.info

左侧可以选择等级,对日志进行分类查看

console.table

具象化地展示JSON和数组数据

console.dir可以展示对象中的属性和对应的值

let juejin = document.getElementById('juejin');
undefined
console.dir(juejin);
复制代码

占位符

给日志添加样式,可以突出重要的信息
%s:字符占位符;%o:对象占位符;%c:样式占位符;%d;数字占位符

举例
```
console.log('%s %o,%c%s','hello',{name:'张三', age: 20}, 'font-size: 24px; color: red', 'hello world!')
复制代码
```