这是我参与[第五届青训营]笔记创作活动的第十天
本课题重点内容：
- Elements
- Console
- Source
- Performance
- Network
详细知识点介绍：
前端 Debug 的特点：
- 多平台：浏览器，Hybrid、Nodejs等
- 多环境：本地开发环境、线上环境
- 多工具：Chrome devTools、Charles 、Whistle等
- 多技巧：Console、BreakPoint、代理等
Chrome DevTools：
1. 动态修改元素和样式：
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效结果
- 点击具体的样式值可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 styles 面板中的 css 规则
- 选中具有伪类的元素，点击：hov 或者 DOM 树右键菜单，选择 Force State 这两种方式可以强制激活伪类
2. Console：
- console.table：具象化的展示 JSON 和数组数据
- console.dir：通过类似文件树的方式展示对象的属性
- 占位符：给日志添加样式，可以突出重要的信息
- %s: 字符串占位符 %o: 对象占位符 %c: 样式占位符 %d: 数字占位符
3. Sorce Tab：
- 区域1：页面资源文件目录树
- 区域2：代码预览区域
- 区域3：Debug 工具栏
从左到右依次为：暂停、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断点、代码执行异常处自动 - 区域4：断点调试器
4. Break Point 与 Watch：
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时，代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值
5. Scope 与 Call Stack：
- 展开 Scope 可以查看作用域列表（包含闭包）
- 展开 Call Stack 可以查看当前 JavaScript 代码的调用栈
6. NetWork：
- 区域1：控制面板
- 区域2：过滤面板
- 区域3：概览区域
- 区域4：Request Table 面板
- 区域5：总结面板
- 区域6：请求详情面板
7. Lighthouse：
核心 web 指标：
- Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。为提供良好用户体验，LCP 应在页面首次开始加载后的 2.5s 内发生
- First Input Delay（FID）：首次输入延迟，测量交互性。FID应为 100ms或更短
- Cumulative Layout Shift（CLS）：累积布局偏移，测量视觉稳定性。CLS应保持在 0.1或更少
个人课后总结：
精通 Web 调试能够大幅提升开发效率
