这是我参与「第四届青训营」笔记创作活动的的第6天
1.BUG
第一个Bug
bug原意本来为昆虫的意思，1947年9月9日，葛丽丝·霍普（Grace Hopper）发现了第一个电脑上的bug。当在Mark II计算机上工作时，整个团队都搞不清楚为什么电脑不能正常运作了。经过大家的深度挖掘，发现原来是一只飞蛾意外飞入了一台电脑内部而引起的故障（如图所示）。这个团队把错误解除了，并在日记本中记录下了这一事件。也因此，人们逐渐开始用“bug”来称呼计算机中的隐错。 —— 维基百科
事物都有两面性，就看你怎么看它
2.Debug
Debug：消除故障或排除程序故障。
前端Debug的特点：
- 多平台：如浏览器、NodeJs、Hybrid、小程序、桌面应用等。
- 多环境：本地开发环境、线上环境。
- 多工具：Chrome、devTools、Charles、Spy-Debugger等。
- 多技巧：Console、BreakPoint、sourceMap、代理等。
3.Chrome DevTools
Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。
Elements：在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑
Console：一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互
Sources：Sources 面板主要用来调试页面中的 JavaScript -** Network**：在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时。
Performance：在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。这个跟上面的 Network 有什么区别呢？在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。
Network：Network 面板主要用于查看header等与网络连接相关的信息。
Memory：Memory 面板主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况。
Application：记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息。
3.1-Elements
动态修改元素和样式方法：
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看生效效果
- 点击具体的样式值（字号、颜色、宽度高度等），可以进行编辑，浏览器内容区域实时预览。
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则。
可以用以下两种方式强制激活伪类:
- 选择具有伪类的元素，点击：hov
- DOM树右键菜单，选择Force State
3.2-console
console也被称为日志。
console.log：控制台显示信息，可以用来取代alert或document.write()。
console.warn：显示警告提示信息。
console.error：显示错误提示信息。
console.debug：显示除错信息。
console.info：显示一般信息。
console.table：具象化的展示JSON和数组数据。
console.dir：通过类型文件树的方式展示对象的属性。
占位符：给日志添加样式，可以突出重要信息。（如：%s：字符串占位符、%o：对象占位符、%c：样式占位符、%d：数字占位符。）
3.3-Sources
3.3.1-Sources-Tab
Sources面板主要分为4个部分：
- 区域1：页面资源文件目录树
- 区域2：代码预览区域
- 区域3：Debug工具栏，从左到右依次为：暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所以断点、代码执行异常处自动
- 区域4：断点调试器
3.3.2-断点与Watch
使用关键字debugger或代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开断点列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标hover变量可以查看变量的值
在调试器Watch监视右侧点击+可以添加对变量的监控，查看该变量的值。
3.3.3-作用域和调用堆栈
展开作用域可以查看作用域列表（包括闭包）
闭包可以参考：developer.mozilla.org/en-US/docs/…
展开调用堆栈可以查看当前JavaScript代码的调用栈
关于调用栈可以参考 developer.mozilla.org/en-US/docs/…
3.3.4-Source Map
SourceMap在其中扮演了一个十分重要的角色，用来作为源代码和编译代码之间的映射，方便开发定位问题。 一般在压缩 js 的过程中，会生成相应的 sourcemap 文件，并且在压缩的 js 文件末尾追加 sourcemap 文件的链接 ，如：//# sourceMappingURL=xxxx.js.map。这样，浏览器在加载这个压缩 过的js 时，就知道还有一个相应的 sourcemap 文件，也会一起加载下来，运行的过程中如果 js 报错，也会给出相应源代码的行号与列号，而非压缩文件的。
特点
- 英文：表示源码及压缩代码位置关联。
- 逗号：分割一行代码中的内容。
- 分号：代表换行。 映射解析器：www.murzwin.com/base64vlq.h…
Sourcemap可以映射源码，那webpack压缩后的代码不就又不安全了吗？
其实Sourcemap初衷是方便开发排错，但是不应该用在生产环境，如果用在生产环境，就可以通过sourcemap文件中的映射，还原出前端完整代码。
3.4-NetWork
Network 网络面板主要用来确认资源下载情况以及查看资源的属性信息网络上的请求都是对资源的请求，CSS、JS以及HTML页面等。
- 区域1：控制面板
- 区域2：过滤面板
- 区域3：概览区域
- 区域4：Request Table面板
- 区域5：总结面板
- 区域6：请求详情面板
3.5-Application
Appliaction面板展示与本地存储相关的信息：
- local Storage（本地存储）
- Session Storage（会话存储）
- IndexedDB
- Web SQL
- Cookie
