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

Bug与Debug

bug的由来

世界上的第一个bug，计算机上的一个虫子（bug），杀虫即debug

前端debug的特点

• 多平台：浏览器、Hybrid、小程序、桌面应用
• 多环境：线上、本地
• 多工具：Chrome devTools、Charles……
• 多技巧：Console、BreakPoint、sourceMap、代理等

Chrome devTools

动态修改元素和样式

• 伪类：强制元素状态Force State（两种方法）
• 添加类和样式规则
• Computed下样式跳转到style-css

Console控制台与Sources源代码

• console与BreakPoint断点：前端应该掌握的浏览器调试技巧 - 掘金 (juejin.cn)
• Scope与Call Stack：Scope查看作用域列表（闭包），Call Stack查看调用栈

压缩代码的调试

前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩到只有一行，变量使用字母替代，整体上难以阅读。

• Source Map 打包前删除

应用程序Application

展示与本地存储相关信息

• Local Storage
• Session Storage
• IndexedDB
• WebSQL
• Cookie

网络NetWork

性能performance

示例 GoogleChrome/devtools-samples: Samples for demonstrating DevTools features. (github.com)

• 页面卡顿
• 查看FPS指标（帧率），发现丢帧
• 寻找性能瓶颈，如m.offsetTop，浏览器强制重绘
• 优化代码optimize

Lighthouse

核心Web指标

• Largest Contentful Paint(LCP)最大内容绘制，测量加载(Loading)性能，LCP最好小于2.5秒
• First Input Delay(FID)首次输入延迟，测量交互性(Interactivity)，页面的FID应不高于100毫秒
• Cumulative Layout Shift(CLS)累计布局偏移，测量视觉稳定性(Visual Stability)，页面CLS应保持在0.1以内

NodejS调试

• Inspector Protocol + Chrome Devtool
• Inspector Protocol + VS code

移动端H5调试

真机调试

• IOS：Safari Develop Tools
• Android：
  • Discover USB devices
  • 手机扫码

VConsole

vConsole: 一个轻量、可拓展、针对手机网页的前端开发者调试面板 (gitee.com)

vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用

现在 vConsole 是微信小程序的官方调试工具

功能特性

• 日志(Logs)： console.log|info|error|...
• 网络(Network)： XMLHttpRequest, Fetch, sendBeacon
• 节点(Element)： HTML 节点树
• 存储(Storage)： Cookies, LocalStorage, SessionStorage
• 手动执行 JS 命令行
• 自定义插件

代理工具

原理

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

例子

• Charles
  • Charles 功能介绍和使用教程 - 掘金 (juejin.cn)
  • 适合查看、监控网络请求，分析数据
• Fiddler
  • Fiddler | Web Debugging Proxy and Troubleshooting Solutions (telerik.com)
  • fiddler配置及使用教程 - 掘金 (juejin.cn)
  • 适合windows平台
• spy-debugger：远程调试手机页面、抓包
• Whistle：基于Node实现的跨平台Web调试代理工具

常用开发调试技巧

线上即时修改Override

• Source面板下的Override（覆盖）

启用本地source map

• 线上不存在Source Map时，可以使用Map Local 网络映射功能来访问本地Source Map

使用代理工具Mock数据

小黄鸭？!