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

前言

做项目前，如果没有提前进行调试而直接敲代码的话，会出现很多意想不到的问题，所以这门课教我们如何使用调试工具和避开很多bug的产生。

前端Debug的特点

多平台

浏览器、Hybrid、Node.js、小程序、桌面应用等

多环境

本地开发环境、线上环境

多工具

Chrome devTools、Charles、Spy-Debugger、histle、vConsole

多技巧

Console、BreakPoint、sourceMap、代理等

Chrome DevTools

sorce Tab

区域1：页面资源文件目录树

区域2：代码预览区域

区域3：Debug工具栏
从左到右依次为
暂停(继续)
单步跳过
进入雨数
跳出西数
单步执行
激活关闭引所有断点
代玛执行异常处自动

区域4：断电调试器

Scope 与 Call Stack

• 展开Scope可以查看作用域列表（包含闭包） 闭包可以参考此链接
• 展开Call Stack 可以查看当前JavaScript代码的调用栈 关于调用栈可以参考此链接

Lighthouse

核心Web指标

Largest Contentful Paint (LCP]:最大内容给制，测量如营性能。为了提供良好的用户体验，LCP应在页面首次开始加我后的25秒内发生。

First Input Delay(可D): 首次输入延迟，测且交互性，为了提供良好的用户体验，页面的FD应为100毫秒或更短。

Cumulative Layout Shift(C): 累积布局偏移，测量视觉税定性。为了提供良好的用户体验，页面的CLS应保特在01或更少。

VConsole

---

• 日志(Logs):console.loglinfolerrorl.
• 网络(Network):XMLHttpRequest, Fetch,sendBeacon
• 节点(Element):HTML节点树
• 存储(Storage):Cookies, LocalStorage,SessionStorage
• 手动执行JS命令行
• 自定义插件

小黄鸭调试大法

传说中程序大师随身携带一只小 黄鸭，在调试代码的时候会在桌 上放上这只小黄鸭，然后详细地 向鸭子解释每行代码，然后很快 就将问题定位修复了。 -- 《程序员修炼之道》

以上总结

现在有很多工具可以辅助我们调试，不过我们也要对我们自己写的代码规范化，该注释的地方就要注释，利用调试工具，把一切bug给消灭掉。

---

有错误欢迎指正