这是我参与「第五届青训营 」伴学笔记创作活动的第10天。
今天学习的内容是关于web的调试技术，课程围绕前端开发中所遇见的BUG出发，给我们介绍了不同场景下debug方法，我将课程的重点内容总结为以下几点：
1.前端Debug的特点
- 多平台
- 浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境
- 本地开发环境、线上环境
- 多工具
- Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole...
- 多技巧
- Console、BreakPoint、sourceMap、代理等
2.Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前javaScript代码的调用栈
3.核心web指标
- Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
- First Input Delav（FID）：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- Cumulative Lavout Shift（CLS）：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。
4.代理工具调试原理
- 电脑作为代理服务器
- 手机通过HTTP代理连接到电脑
- 手机上的请求都经过代理服务器
5.常用代理工具
- Charles：适合查看、控制网络请求，分析数据
- Fiddler：与Charles类似，适合windows平台
- spy-debugger：远程调试手机页面，抓包
- Whistle：基于Node实现的跨平台Web调试代理工具
6.常用开发调试技巧
- 线上即时修改Overrides
- 首先打开Sources面板下的Overrides，然后点击Select folders for Overrides，选择一个本地的空文件夹目录，允许授权后，在page中修改代码，修改完成后保存，接着打开devTools，点击More tools->Changes就能看到所有修改了。
- 利用代理解决开发阶段的跨域问题
- 浏览器向代理服务器发起请求，代理服务器转发该请求给真实服务器，作出响应给代理服务器，然后代理服务器会转发响应给浏览器
