这是我参与「第四届青训营 」笔记创作活动的的第6天
一、重点内容：
- 前端开发BUG和DEBUG的特点
- 网页端、移动端、NodeJS的不同调试方法与技巧
二、详细知识点介绍：
Bug 与 Debug
前端Debug的特点
- 多平台：浏览器、Node、小程序、桌面应用
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧：Console、BreakPoint、sourceMap、代理
Chrome DevTools
Elements
elements可查看并修改元素和样式，点击.cls可修改元素的类名，点击:hov可添加伪类或在DOM树中右键菜单选择Force State
Computed下点击样式里的箭头可以跳转到生效的CSS规则
Console
console.log输出的值的类型不同，颜色会不同
console.warn 黄色
console.error 红色
console.debug 蓝色
console.info
console.table() 具象化展示JSON和数组
console.dir() 通过类似文件树展开对象的属性
console.time()
Sources
debugger;会使程序暂停
暂停状态下，鼠标hover的变量可以查看变量的值
watch栏会展示变量的值
Scope作用域
Call Stack调用栈
压缩后的代码如何调试？
mappings字段存储了源文件和Source Map的映射
- 英文：表示源码及压缩代码的位置关联
- 逗号：分隔一行代码中的内容
- 分号：代表换行
通过sourceMap映射源代码，通过监控系统定位错误出现位置，再由映射找出源代码出错位置。
NewWork
Application
- Local Storage 本地缓存
- Session Storage 会话缓存
- indexedDB 浏览器数据库
- Web SQL 浏览器上模拟数据库
- Cookie
点击左侧Application下的Storage面板中的Clear Site Data可以清除网页的本地存储数据
Performance
Lighthouse
核心Web指标
- Largest Contentful Paint(LCP)：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生
- First Input Delay(FID):首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短
- Cumulative Layout Shift(CLS)：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少
移动端调试
真机调试
IOS
- 使用Lightning 数据线将iPhone与Mac相连
- iPhone开启Web检查器（设置->Safari->高级->开启Web检查器）
- iPhone使用Safari浏览器打开要调试的页面
- Mac打开Safari浏览器调试(菜单栏->开发->iPhone设备名->选择调试页面
- 在弹出的Safari Developer Tools 中调试
安卓
- 使用USB数据线将手机与电脑相连
- 手机进入开发者模式，勾选USB调试，并允许调试
- 电脑打开Chrome 浏览器，在地址栏输入: chrome:/inspect/#devices并勾选 Discover USB devices选项
- 手机允许远程调试，并访问调试页面
- 电脑点击inspect按钮
- 进入调试界面
VConsole
- 日志(Logs): console.log..
- 网络(Network): XMLHttpRequest,Fetch, sendBeacon
- 节点(Element):HTML节点树
- 存储(Storage): Cookies,LocalStorage,SessionStorage
- 手动执行JS命令行
- 自定义插件
使用代理工具调试
Charles，Fiddler，spy-debugger，Whistle
Node.js调试
在VSCode中点击运行，添加配置，启动调试，添加断点，查看变量和堆栈
常用开发调试技巧
三、课后个人总结：
今天学习不同平台下的前端调试方法与技巧，尤其是学到了之前不知道的调试小操作，感觉非常实用。
