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

Bug与Debug

• Bug的故事：小虫子
• 前端Debug特点
  • 多平台：浏览器、Hybrid、小程序、桌面应用
  • 多环境：本地线上
  • 多工具：chrome devTools、Charles、Spy-Debugger
  • 多技巧：Console、BreakPoint、sourceMap、代理
• 通过console输出值，在sources页面加断点、watch和breakpoint

PC：chrome devTools

• 浏览器F12打开

Elements：元素、样式

• .cls开启动态修改元素的class
• .hov可以更改元素状态
• 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的箭头可以跳转到styles面板中的css规则（搜索）

Consoles：控制台

• 常用日志
  • log
    • 可以用占位符添加样式：console.log('%s','hello')
      • %s：字符串
      • %o：对象
      • %c：样式
      • %d：数字
    • 不同类型的值颜色不同
  • warn
  • error
  • debug
  • info
  • table：具像化展示JSON和数组数据
  • dir：通过类似文件树的方式展示对象的属性

Sources

• 程序代码

• Watch：查看值
• Breakpoints：控制断点
• Scope：查看作用域列表（包含闭包）
• Call Stack：查看当前JS代码调用栈

压缩后的代码如何调试

• source-map：可以映射源码和压缩后代码
• 安全性：在build时用，但不上传，而是上传到监控平台

Network

• 模拟网络环境
• 查看接口

Application

• 存储

Perfomance

• 性能表现

• 页面卡顿 -> 查看FPS指标 -> 寻找性能瓶颈 -> 优化代码

Lighthouse

• 性能分析
• 核心Web指标
  • LCP
  • FID
  • CLS

移动端

真机调试

VConsole

使用代理工具调试

• 常用代理工具
  • Charles（小花瓶）
    • map remote：远程代理
  • Fiddler
  • spy-debugger
  • Whistle

NodeJS调试

• 浏览器中调试

• 还可以在VScode中调试

常用调试技巧

• 线上及时修改

• 利用代理解决开发阶段的跨域问题

• 启用本地sourcemap

• 使用代理工具Mock数据

• 小黄鸭调试大法