Web调试技巧｜青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 10 天，欢迎各位大佬批评指正。

Bug 与 Debug

最早的Bug是由1947年9月当时准将Grace Hopper在哈弗大学实验室测试计算机时，出现故障，经过各种排查之后发现是一个虫子影响了计算机运行，清除之后计算机恢复正常。至此，Bug和Debug就成为编程世界的通用词，无处不在。

---

讲个笑话：No Code, No Bug...

---

前端的Debug特点：

• 多平台：浏览器、Hybird、NodeJs、小程序、桌面应用等
• 多环境：本地开发环境、线上环境
• 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle...
• 多技巧：Console、BreakPoint、sourceMap、代理等

Chrome DevTools

Elements

查看网页里面元素和样式。比如：

• 左侧展现的是元素，即HTML骨架结构。

• 右侧是选中元素对应的样式。

  • 点击.cls可以动态修改元素的class。
  • 输入字符串可以动态给元素添加类名。
  • 勾选/取消类名可以动态查看类名生效效果。
  • 点击具体样式值（字号、颜色等）可以进行编辑，浏览器内实时预览。
  • Computed下点击样式里面的箭头可以转跳到Styles面板的CSS规则。

  • 可以用以下两种方式强制激活伪类：
    - 选中具有伪类的元素，点击**:hov** 。
    - 在DOM树右键菜单，选择Force State选项。

Console

Console一般用于打印日志。

• 占位符：

  • %s：字符串
  • %o：对象
  • %c：样式
  • %d：数字

• console.table：用来展示数组和JSON数据更为直观。

Source Tab

一般用于展示源代码和调试。

Network

包含所有网络请求数据。可以用于查看数据请求头部、返回结果、cookie、请求耗时、瀑布图等信息。

Application

主要是存储相关调试。

• Storge
  • localStorage
  • sessionStorage
  • cookie
  • ...
• Cache
• ...

Performance

和网页性能调试相关。

可以方便快速查看网页上线程执行时间、帧率、卡顿情况等。

---

Ps：可以在设置中 --> more tools --> Rendering --> Frame Rendering Stats 中开启帧率实时监测。

---

Lighthouse

和Performance一样，也可以用来检测性能，但是更偏向于总体性能指标，包括：

• FCP：首次内容绘制时间
• LCP：最大内容绘制，应该控制在2.5s内。
• FID：首次输入延时，应该控制在100ms内。
• CLS：累计布局偏移，应该控制在0.1s内。
• ...

代理工具调试

---

后期会详细介绍以下两种调试工具：

• charles

• Whistle