这是我参与「第五届青训营」伴学笔记创作活动的第 14 天

前端开发调试-PC端调试

1、前端 Debug 的特点

多平台

浏览器、Hybrid、NodeJS、小程序、桌面应用等

多环境

本地开发环境、线上环境

多工具

Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole ...

4多技巧

Console、Breakpoint、sourceMap、代理等

2、Chrome DevTools

Elements、Console、Sorce、Performance、Network

3、动态修改元素和样式

点击.cls开启动态修改元素的class

输入字符串可以动态的给元素添加类名

勾选/取消类名可以动态的查看类名生效效果

点击具体的样式值（字号/颜色/宽度/高度）可以进行编辑，浏览器内容区域实时预览

Computed下点击样式里的箭头可以跳转到styles面板中的css规则

4、Console

console.log：变量输出。字符串是白色，数字是蓝色
console.warn警告，黄色
console.error报错，红色
console.debug：调试，蓝色的字
console.info：一般信息，类似console.log
console.table ：具象化展示JSON和数组数据
console.dir：通过类似文件树的方式展示对象的属性
console.time - console.timeEnd：计算代码运行时间

占位符：给日志增加样式，可以突出重要的信息

%s：字符串
%o：对象
%c：样式
%d：数字

5、Sorce Tab

区域1：页面资源文件目录树

区域2：代码预览区域

区域3：Debug工具栏

暂停\继续
单步跳过
进入函数
跳出函数
单步执行
激活（关闭）所有断点
代码执行异常处自动

区域4：断点调试器

6、Scope与Call Stack

展开Scope可以查看作用域列表（包含闭包）

展开Call Stack可以查看当前javasScript代码的调用栈

7、调试压缩后的代码

前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用'a','b'等替换，整体变得不可阅读。

8、Source Map

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

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

9、Network

区域1：控制面板

区域2：过滤面板

区域3：概览区域

区域4：Request Table 面板

区域5：总结面板

区域6：请求详情面板

10、Application

Application 面板展示与本地存储相关的信息
Local Storage
Session Storage
IndexedDB
Web SQL
Cookie

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

11、Performance

区域1：控制面板

区域2：概述面板

FPS：每秒帧数
CPU：处理各个任务花费的时间
NET：各个请求花费时间

区域3：线程面板

Frames：帧线程
Main：主线程，扶着执行 Javascript ，解析 HTML/CSS 完成绘制
Raster：Raster 线程，负责完成某个 layer 或者某些块（tile）的绘制

区域4：统计面板

12、Lighthouse

核心 Web指标

Largest Contentful Paint (LCP)∶最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5秒内发生

First Input Delay (FD)：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的 FID 应为100毫秒或更短

Cumulative Layout Shift (CLS)：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少

前端开发调试-PC端调试 ｜ 青训营笔记