这是我参与「第五届青训营 」伴学笔记创作活动的第 6 天
一. Bug与DeBug的由来
第一代的计算机是由许多庞大且昂贵的真空管组成，并利用大量的电力来使真空管发光。可能正是由于计算机运行产生的光和热，引得一只小虫子Bug 钻进了一支真空管内，导致整个计算机无法工作。研究人员费了半天时间，总算发现原因所在，把这只小虫子从真空管中取出后，计算机又恢复正常。后来，Bug这个名词就沿用下来，表示电脑系统或程序中隐藏的错 误、缺陷、漏洞或问题。 与Bug相对应，人们将发现Bug并加以纠正的过程叫做“Debug”，意即“捉虫子”或“杀虫子”。遗憾的是，在中文里面，至今仍没有与“Bug”准确 对应的词汇，于是只能直接引用“Bug”一词。虽然也有人使用“臭虫”一词替代“Bug”，但容易产生歧义，所以推广不开。
二. Chrome DevTools
1.动态修改元素样式
点击.cls可以动态修改元素class,输入字符串可以动态给元素添加类名
勾选/取消类名可以动态查看类名生效效果
点击具体的样式值进行编辑，浏览器可实时预览
选中有伪类的元素，点击:hov或者在dom树找到该元素右键选择强制状态可以激活该元素的伪类
2.console
console可以打印不同的日志等级，并可以通过占位符突出显示重要信息。常见占位符如下:
| %s | 字符串占位符 |
| %c | 样式占位符 |
| %o | 对象占位符 |
| %d | 数字占位符 |
断点调试
使用关键字debugger可以设置断点 展开breakPoints List可以查看断点列表，并进行勾选/取消操作 暂停状态下，可以hover查看变量的值 调试器位置watch右侧点击+可以添加对变量的监控
scope与call stack
展开scope可以查看当前作用域列表 展开call stack可以查看当前js代码调用栈
Network
1:控制面板
2:过滤面板
3:概览面板
4:request table面板
5:总结面板
6:请求详情面板
Application
展示与本地存储相关的信息，如localstorage，cookie
lighthouse
性能测试相关
