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

前端Bug的特点

• 多平台
• 多环境
• 多工具
• 多技巧

调试工具

Chrome devTools

动态修改元素和样式

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

Console

• console.log
• console.warn
• console.error
• console.debug
• console.info
• console.table具像化的展示JSON和数组数据
  • console.dir通过类似文件树的方式展示对象的属性
• 占位符
  • 给日志添加样式，可以突出重要的信息
  • %s：字符串占位符；%o：对象占位符；%c；样式占位符；%d；数字占位符

Sorce Tab

Debug 工具栏从左到右依次为：

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

Network

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

Application

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

• Local Storage
• Session Storage
• IndexedDB
• Web SOL
• Cookie

Performance

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

Lighthouse

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

压缩后的代码如何调试

使用source-map

mappings 字段存储了源文件和Source Mep的映射

• 英文，表示源码及压缩代码的位置关联
• 逗号，分隔一行代码中的内容。
• 分号，代表换行。