这是我参与「第四届青训营」笔记创作活动的的第8天。

前端Debug的特点

多平台

浏览器、Hybrid、Node.js、小程序、桌面应用等
多环境

本地开发环境、线上环境
多工具

Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole……
多技巧

Console、BreakPoint、sourceMap、代理等

Chrome devTools

Elements

动态修改元素的样式：

点击.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：数字占位符

Source Tab

断点调试（Watch和Breakpoints）

在想要的地方的代码加debugger
执行到端点处时暂停代码执行
展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
暂停状态下，鼠标hover变量可以查看变量的值
在调试器Watch右键点击+可以添加对变量的监控，查看该变量的值

Scope与Call Stack

展开Scope可以查看作用域列表（包含闭包）
展开Call Stack可以查看当前javaScript代码的调用栈

压缩后的代码如何调试？

Source Map

mappings字段存储了源文件和Source Map的映射

特点

英文：表示源码及压缩代码位置关联。
逗号：分割一行代码中的内容。
分号：代表换行。

代码上线上传不带Source Map的产物，Source Map上传到监控平台

NetWork

Network 网络面板主要用来确认资源下载情况以及查看资源的属性信息网络上的请求都是对资源的请求，CSS、JS以及HTML页面等。

Network面板主要分为6部分（如下图）：

区域1：控制面板

区域2：过滤面板

区域3：概览区域

区域4：Request Table面板

区域5：总结面板

区域6：请求详情面板

Appliaction面板展示与本地存储相关的信息

local Storage（本地存储）
Session Storage（会话存储）
IndexedDB
Web SQL
Cookie

点击左侧Application下的Stroage面板中的Clear Site Data可以清楚网页的本地存储数据。

Performance

Performance面板主要分为4部分（如下图）：

区域1：控制面板

区域2：概览面板（FPS：每秒帧数）、（CPU：处理各个任务花费的时间）、（NET：各个请求花费时间）

区域3：线程面板（Frames：帧线程）、（Main：主线程、负责执行Javascript，解析HTML/CSS，完全绘制）、（Raster：Raster线程，负责完成某个layer或者某些块的绘制）

区域4：统计面板

Lighthouse

Lighthouse是网页性能分析工具。Web核心指标：

LCP（largest Contentful Paint）：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5内发生。
FID（First Input Delay）：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
CLS（Cumulative Layout Shift）：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。

如下图：

开发调试知识 | 青训营笔记