这是我参与「第五届青训营」伴学笔记创作活动的第14天。
一、本堂课重点内容
本节课主要介绍了前端开发者在不同模块、不同客户端的调试技巧，本节课主要讲解的是PC端的一些技巧，主要为debug、浏览器的调试技巧。
二、详细知识点介绍
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通过类似文件树的方式展示对象的属性：
0.占位符给日志添加样式，可以突出重要的信息
% s:字符串占位符;
% o:对象占位符，
% c:样式占位符;
% d:数字占位符
Sorce Tab
区域1:页面资源文件目录树 区域2:代码预览区域 区域3: Debug工具栏
从左到右依次为
暂停 (继续)
单步跳过
进入函数
跳出函数
单步执行
激活 (关闭)
所有断点
代码执行异常处自动
区域4:断点调试器
NetWork
区域1:控制面板
区域2:过滤面板
区域3:概览区域
区域4: Request Table面板
区域5:总结面板
区域6:请求详情面板
Application
Application面板展示与本地存储
相关的信息
Local Storage
Session Storage
IndexedDB
Web SQL
Cookie
6920
Performance
区域1:控制面板
区域2:概览面板
FPS:每秒帧数
CPU:处理各个任务花费的时间
NET:各个请求花费时间
区域3:线程面板
Frames:帧线程
Main:主线程，负责执行Javascript,
解析HTIML/CSS,完成绘制
Raster: Raster线程， 负责完成某个
layer或者某些块(ile)的绘制。
区域4:统计面板
Lighthouse
Largest Contentful Paint (LCP) :最大内
容绘制，测量加载性能。为了提供良好的用
户体验，LCP应在页面首次开始加载后的
2.5秒内发生。
First Input Delay (FID) :首次输入延迟，
测量交互性。为了提供良好的用户体验，页
面的FID应为100毫秒或更短。
Cumulative Layout Shift (CLS) :累积布局
偏移，测量视觉稳定性。为了提供良好的用
户体验，页面的CLS应保持在0.1.或更
少。
三、引用参考
掘金
