这是我参与「第四届青训营 」笔记创作活动的第4天
前端debug的特点
- 多平台 浏览器、Hybrid、Node.js、小程序、桌面应用等
- 多环境 本地开发环境、线上环境
- 多工具 chrome devTools、Charies、Spy-Debugger、Whistle、vConsole...
- 多技巧 Console、BreakPoint、sourceMap、代理等
Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table 具体化的展示JSON和数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要的信息 %s:字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符
Scope与Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前javaScript代码的调用栈
Source Map
mappings字段存储了源文件和Source Map的映射
- 英文，表示源码与压缩代码的位置关联
- 逗号，分隔一行代码中的内容
- 分号，代表换行
Performance
区域1：控制面板 区域2：概览面板
- FPS：每秒帧数
- CPU：处理各个任务花费的时间
- NET：各个请求花费时间 区域3：线程面板
- Frames：帧线程
- Main：主线程，负责执行JavaScript，解析HTML/CSS，完成绘制
- Raster：Raster线程，负责完成某个layer或者某些块（tile）的绘制 区域4：统计面板
Lighthouse
核心Web指标
- LPC：最大内容绘制，测量加载性能，为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生
- FID：首次输入延迟，测量交互性，为了提供良好的用户体验，页面的FID应为100毫秒或更短
- CLS：累计布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少
结合vscode调试
- vscode 点击运行
- 添加配置
- 启动调试
- 添加断点
- 查看变量，堆栈
线上即时修改Overrides
- 打开sources面板下的Overrides
- 点击Select folders for Overrides，选择一个本地的空文件目录
- 允许授权
- 在page中修改代码，修改完成后Command+s保存
- 打开devTools，点击右上角的三个小点->More tools->Changes，就能看到所有修改了
