Bug与Debug

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

1.重点内容

这节课的内容主要关于bug的处理和debug时的技巧。

2.重要的知识点

• 前端Debug的特点
• Chrome DevTools
• 压缩后的代码调试方法
• 移动端H5调试
• Node.js调试
• 常见开发调试技巧

3.详尽的知识点

前端Debug的特点

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

Chrome DevTools

• Elements

  • 添加更改类名
  • 勾选/取消动态查看效果
  • 强制激活伪类

• Console

  • log,warn,error,debug,info

  • table展示JSON和数组数据

  • dir展示对象属性

  • 占位符

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

• Source

  • 页面资源文件目录树

  • 代码预览

  • debug工具栏

    • 暂停
    • 单步跳过
    • 跳出函数
    • 单步执行
    • 激活/关闭所有断点

  • 断点调试

• Network

  • 控制面板
  • 过滤面板
  • 概览区域
  • Request Table面板
  • 总结面板
  • 请求详情面板

• Performance

  • 控制面板

  • 概览面板

    • FPS：每秒帧数
    • CPU：处理各个任务花费的时间
    • NET：各个请求花费的时间

  • 线程面板

    • Frames：帧线程
    • Main：主线程
    • Raster：Raster线程

  • 统计面板

• Application

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

• Lighthouse

  • LCP：最大内容绘制
  • FID：首次输入延迟
  • CLS：积累布局偏移

压缩后的代码调试方法

使用Source Map来映射源码

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

移动端H5调试

• 真机调试

  • iOS 链接后使用Mac自带的Safari Developer Tools调试
  • Android 使用Chrome的chrome://inspect/#devices调试

• VConsole

  • Logs
  • Network
  • Element
  • Storage
  • 手动执行
  • 自定义插件

• 代理调试

  • 使用电脑作为代理服务器
  • 手机通过HTTP代理链接到电脑
  • 手机上的请求经过代理服务器

• 常用工具

  • Charles
  • Fiddler
  • spy-debugger
  • Whistle

Node.js调试

• 使用InspectorProtocol+ChromeDevtool

  • 1.执行node --inspect=8888 index.js
  • 2.使用chrome浏览器访问服务
  • 3.打开node面板调试
  • 4.使用断点调试

• 使用InspectorProtocol+VSCode

  • 1.添加配置
  • 2.启动调试
  • 3.添加断点
  • 4.查看变量、堆栈

常见开发调试技巧

• 线上即时修改Overrides
• 使用代理解决跨域问题
• 启用source map
• 使用代理工具Mock数据
• 小黄鸭调试

4.课后总结

Bug作为开发者来说是非常常见的，但是我们不应该对bug有抵触心理，在出现bug时，应该好好分析写源码时的思路，注意数据类型和算法可行性。这样多思考反馈，写代码的能力就会不断提升。