这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天
Bug与Debug的由来
Bug的本意为小虫子的意思，第一个Bug的产生，当时是人们还在使用第一代真空计算机，不知道什么原因，机器突然不运转了，通过检查发现，机器中有一只死去的虫子，把虫子抓出来后，机器又能重新正常运转了。从此Bug又增加了一层含义，那便是程序的缺陷。然后Debug就变成排除程序故障的意思，可能是delete bug的简写？我个人觉得蛮有意思。
Chrome DevTools谷歌浏览器调试工具
常用的五大部分
- Elements
- Console
- Source
- Performance
- Network
Elements
- 用于查看页面元素，以及动态修改元素和样式
- 点击
.cls开启动态修改元素的class - 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值可以编辑
伪类比较特殊，若要强制激活伪类有两种方法
- 选中具有伪类的元素，点击
：hov - DOM树右键菜单，选择
Force State
Console
别再只用console.log了，试试这些
- console.warn
- console.error
- console.debug
- console.info
- console.tabal(具象化展示JSON和数组数据，我认为很好)
- console.dir
还有一种占位符的用法，类似C语言中的printf,可以添加样式，突出重要信息。
Source
利用
Sorce Tab可以进行断点调试，同时也可以对变量的值进行监控，展开Scope可以查看作用域，展开Call Stack可以查看JS的调用栈。
Performance
利用Performance选项卡可以分析页面卡顿的原因，查看FPS指标，寻找性能瓶颈，从而优化代码，不过，我认为我目前水平还不太能用上这个功能，我感觉这个是高级前端用来分析页面性能才用的上的，不过先了解总是没错的。
Lighthouse选项卡可以给页面进行打分，具体包括白屏时间、SEO等等。
Network
通过Network选项卡可以对页面加载元素进行分析，也可以了解到一些请求头相关的信息。
小结
掌握调试技术是成为一名合格开发者必备的能力，希望以后能不断积累调试经验，熟能生巧。
