说实话，前端基础班的课还是，对小白来说有点难，不过还有辅助资料可以看，软件也在那里，可以下载下来跟着老师的讲课节奏去实操一下，其实不管是小白还是基础者还是大佬，都需要时间去练习去熟悉，有想要参加青训营的小白也可以试一下，无论怎样都会增加一些知识量。像这节课讲的内容就可以马上应用学习并吸收到新知识！可以一边听课一边实操，或者听完课再拿着笔记去实操都更有效率，还可以套用自己以前写过的简单代码简单运行一下就可以更快掌握。
一、bug和Debug
- 前端Debug的特点
- 多平台 浏览器、Hybrid、NodeJs、小程序、桌面应用等
- 多环境 本地开发环境、线上环境
- 多工具 Chrome devTools、Charles、Spy-Debugger、 Whistle、vConsole
- 多技巧 Console、 BreakPoint、sourceMap、代理等
二、Chrome DevTools
- 动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到styles面板中的css规则
- 可以用以下2种方式强制激活伪类
- 选中具有伪类的元素，点击：hov
- DOM树右键菜单、选择Force State
- Console
- console.log
- console.warn console.error
- console.debug
- console.info
- console.table
- 具像化的展示 JSON 和数组数据
- console.dir
- 通过类似文件树的方式展示对象的属性
- 占位符
- 给日志添加样式，可以突出重要的信息
- %s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符
三、Sorce Tab
- Break Point与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器Watch右侧点击＋可以添加对变量的监控，查看该变量的值
- Scope 与 Call Stack
- 展开Scope可以查看作用域列表（包含闭包）
- 展开Call Stack可以查看当前 javaScript 代码的调用栈
- 关于调用栈可以参考：developer.mozilla.org/en-US/docs/…
- Source Map
- mappings 字段存储了源文件和 Source Map 的映射英文，表示源码及压缩代码的位置关联 逗号，分隔一行代码中的内容。 分号，代表换行。
- 映射见：www.murzwin.com/base64vlq.h…
-
NetWork
-
Application
- Application面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
-
Performance
-
Lighthouse
- 核心Web指标
- Largest Contentful Paint (LCP)：最大内容绘制，测量加载性能。为了提供良好的用户体验， LCP 应在页面首次开始加载后的2.5秒内发生。
- First Input Delay (FID)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- Cumulative Layout Shift (CLS)：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
