这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
Bug与Debug
Bug的产生
1947年9月，一只虫子
前端Debug的特点
- 多平台
浏览器，Hybrid，Node.js，小程序，桌面应用 等
- 多环境
本地开发环境，线上环境
- 多工具
Chrome devTools，Charles，Spy-Debugger，Whistle，vConsole 等
- 多技巧
Console，Breakpoint，sourceMap，代理 等
Chrome DevTools
打开DevTools： 浏览器-检查-各种tabs
Elements 动态修改元素和样式
Elements Tab：包括网页的元素和样式
- 点击
.cls开启动态修改元素的class - 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
Computed下点击样式里的箭头可以跳转到Styles面板中的CSS规则- 点击
Elements中的标签，如<body>，右键可在元素范围内截屏
强制激活伪类：
- 选中具有伪类的元素，点击
:hov - DOM树右键菜单，选择Force State
Console Tab
左侧有日志分类：
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table：具像化展示JSON和数组数据
- console.dir：通过类似文件树的方式展示对象的属性
- 占位符：给日志添加样式，可以突出重要的信息
%s-字符串占位符 %o-对象占位符 %c-样式占位符 %d-数字占位符
Source Tab
包括：
-
页面资源文件目录树
-
代码预览区域
-
Debug工具栏
暂停/继续，单步跳过，进入函数，跳出函数，单步执行，激活/关闭所有断点，代码执行异常处自动 -
断点调试器
断点和监视 Break point，Watch
在想要调试的地方，加上关键字debugger；或 代码预览区域的行号可以设置断点
执行到断点处时代码暂停执行
展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标hover变量可以查看变量的值
在调试器Watch右侧点击+可以添加对变量的监控，查看该变量的值
作用域和调用堆栈 Scope，Call Stack
Scope：查看作用域列表（包含闭包）
Call Stack：查看当前javaScript代码的调用栈
Source Map
压缩后的代码如何调试？
——为了安全，上线前，代码会经过压缩和混淆，变得不可阅读
mappings字段存储了源文件和Source Map的映射
- 英文：表示源码及压缩代码的位置关联
- 逗号：分隔一行代码中的内容
- 分号：代表换行
Network Tab
包括：
控制面板，过滤面板，概览区域，Request Table面板，总结面板，请求详情面板
Application Tab
展示与本地存储相关的信息：
Local Storage，Session Storage，IndexedDB，Web SQL，Cookie
Performance Tab
包括：
-
控制面板
-
概览面板
FPS：每秒帧数
CPU：处理各个任务花费的时间
NET：各个请求花费时间 -
线程面板
Frames：帧线程
Main：主线程，负责执行Javascript，解析HTML/CSS，完成绘制
Raster：Raster线程，负责完成某个layer或者某些tile的绘制 -
统计面板
官方示例：googlechrome.github.io/devtools-sa…
-
查看FPS指标：
可以点击 Frames 查看每一帧的情况
More tools - rendering - 可查看FPS面板 -
寻找性能瓶颈
-
优化代码
Lighthouse Tab
核心Web指标：
-
Largest Contentful Paint（LCP）
最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生 -
First Input Delay（FID）
首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短 -
Cumulative Layout Shift（CLS）
累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少
