这是我参与「第五届青训营」伴学笔记创作活动的第 9 天。

前端debug的特点

• 多平台：浏览器、Hybrid、Nodels、小程序、桌面应用……
• 多环境：本地开发环境、线上环境
• 多工具：Chrome DevTools、Charles、Spy-Debugger、Whistle、vConsole……
• 多技巧：Console、断点、sourceMap、代理……

Chrome DevTools

动态修改元素和样式

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

可以用以下2种方式强制激活伪类

• 选中具有伪类的元素，点击：hov
• DOM树右键菜单，选择Force State

Console

• 不同等级的日志输出：

  • console.log
  • console.warn
  • console.error
  • console.debug
  • console.info

  可以在DevTools中筛选这些日志输出：

  

  还可以使用占位符给日志添加样式，可以突出重要的信息：

  

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

• console.table：具像化的展示JSON 和数组数据

  

• console.dir：通过类似文件树的方式展示对象的属性

Source

• 区域1：页面资源文件目录树
• 区域2：代码预览区域
• 区域3：Debug 工具栏，从左到右依次为
  • 暂停（继续）
  • 单步跳过
  • 进入函数
  • 跳出函数
  • 单步执行
  • 激活（关闭）所有断点
  • 代码执行异常处自动
• 区域4：断点调试器

断点（Breakpoint）与监视变量（Watch）

• 使用关键字debugger或代码预览区域的行号可以设置断点
• 执行到断点处时代码暂停执行
• 展开 Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
• 暂停状态下，鼠标hover变量可以查看变量的值
• 在调试器 Watch 右侧点击+可以添加对变量的监控，查看该变量的值

作用域（Scope）与调用栈（Call Stack）

• 展开Scope可以查看作用域列表（包含闭包）
• 展开Call Stack可以查看当前JS代码的调用栈

调试压缩后的代码：SourceMap

前端代码天生具有“开源"属性，出于安全考虑，上线之前JS代码通常会被压缩，压缩后的代码只有一行，变量名使用a、b等替换，整体变得不可阅读。

为了解决这一问题，在构建工具中进行压缩代码时启动sourceMap选项，帮你找到在原始的可读代码中出错的位置。

sourceMap选项实际会建立sourceMap文件，指明压缩前后代码的映射关系（文件中会包含原始代码）。

---

思考题：既然Source Map可以映射源码，那压缩后的代码带上Source Map上线不就又不安全了吗？

答案：部署生产环境时，生成Source Map但是不实际发布Source Map，Source Map只部署到错误监控平台中。

Network

• 区域1：控制面板
• 区域2：过滤面板
• 区域3：概览区域
• 区域4：Request Table面板
• 区域5：总结面板
• 区域6：请求详情面板

Application

Application 面板展示与本地存储相关的信息

• Local Storage
• Session Storage
• IndexedDB
• Web SQL
• Cookie

点击左侧Application下的Stroage面板中的Clear Site Dat可以清除网页的本地存储数据。

Performance

• 区域1：控制面板
• 区域2：概览面板
  • FPS：每秒帧数
  • CPU：处理各个任务花费的时间
  • NET：各个请求花费时间
• 区域3：线程面板
  • Frames：帧线程
  • Main：主线程，负责执行JS，解析HTML/CSS，完成绘制
  • Raster：Raster线程，负责完成某个layer或者某些块（tile）的绘制。
• 区域4：统计面板

性能问题的诊断流程：

graph LR
s1[页面卡顿] --> s2[查看FPS指标] --> s3[寻找性能瓶颈] --> s4[优化代码]

Lighthouse

指示核心Web指标：

• Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
• First Input Delay（FID）：首次输入延迟测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
• Cumulative Layout Shift（CLS）：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS 应保持在0.1或更少。