这是我参与「第四届青训营」笔记创作活动的的第8天

Bug 与 Debug

Bug一词的原意是臭虫或虫子。1947.9第一代计算机是由许多庞大的真空管组成，并利用大量的电力来使真空管发光。引得一只小虫子Bug钻进了一支真空管内，导致整个计算机无法工作。研究人员费了半天时间，总算发现原因所在，把这只小虫子从真空管中取出后，计算机又恢复正常。后来，Bug这个名词就沿用下来。

与Bug相对应，人们将发现Bug并加以纠正的过程叫做“Debug”，意即“捉虫子”或“杀虫子”。遗憾的是，在中文里面，至今仍没有与“Bug”准确对应的词汇，于是只能直接引用“Bug”一词。虽然也有人使用“臭虫”一词替代“Bug”，但容易产生歧义，所以推广不开。

Debug的特点

多平台：浏览器、Hybird、Node JS、小程序、桌面应用
多环境：本地开发环境、线上环境
多工具
多技巧：Console、BreakPoint、source Map、代理

Chrome DevTools

Console

console标签页：用于显示脚本输出的调试信息，或运行的测试脚本等。

console.log()
console.info()
console.error()
concole.warn()
concole.debug()
concole.table()：具象化的展示 JSON 和数组数据
concole.dir()：通过类似文树的方式展示对象的属性
占位符：给日志添加样式，可以突出重要的信息

Sources

sources标签页：用于查看和调试当前页面所加载的脚本的源文件（可以进行断点的设定和调试过程、代码格式化）

暂停
单步跳过
进入函数
跳出函数
单步执行
激活（关闭）所有断点
代码执行异常处自动

network

network标签页：用于查看http请求的详细过程，如请求头、响应头、响应及返回内容等。（可以查看加载资源的名称、加载资源的状态、加载资源类型）

application

application标签页:用于查看本地应用缓存数据信息（离线应用或本地存储应用时用）

Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

Lighthouse

Lighthouse 是 Google 开发的一款分析 Web 应用和 Web 页面的性能的工具。除了性能，它还可以分析 Web 页面的 Accessibility，各种页面最佳实践（Best Practices），SEO 以及 Progressive Web App 的能力，对它们打分，并展示出每一项基础项目的数据和结果。其中对于性能的分数，它是根据 6 个不同的性能指标计算而得到的。

常用开发调试技巧

线上即时修改Overrides
利用代理解决开发阶段的跨域问题
启用本地 source map
使用代理工具 Mock 数据

前端必须知道的开发调试知识 ｜ 青训营笔记