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

1 前端Debug的特点

1.1 多平台

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

1.2 多环境

本地开发环境、线上环境。

1.3 多工具

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

1.4 多技巧

Console、BreakPoint、sourceMap、代理、等。

2 Chrome devTools

2.1 Elements（元素页）

点击.cls按钮开启动态修改元素的class
输入字符串可以动态的给元素添加类名
勾选/取消类名可以动态的查看类名生效效果
点击具体的样式值可以进行编辑，浏览器内容区域实时预览
Computed下点击样式里的箭头可以跳转到Styles面板中的css规则
可以用以下2种方式强制激活伪类：

1. 选中具有伪类的元素，点击:hov
2. DOM树右键菜单，选择Force State

2.2 Console（控制台）

console.log
console.warn
console.error
console.debug
console.info
console.table

- 以表格形式具像化的展示JSON或数组数据

console.dir

- 通过类似文件树的方式展示对象的属性（适用于打印DOM对象）

占位符（可以给日志设置样式，可以突出重要的信息）

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

console.log('%s %o, %c%s', 'hello', {name: 'tom', age: 18}, 'font-size: 24px; color: red;', 'Welcome to Bytedance!')

console.time

2.3 Sources（源代码）

区域一：页面资源文件目录树
区域二：代码预览区
区域三：Debug工具栏
区域四：断点调试器

附：如何调试压缩混淆的代码

Source Map

考虑到安全性以及部署包体积过大的问题，source map映射文件一般不会发布在生产环境中，可以通过部署在监控平台来单独捕获错误异常

在webpack配置中：

devtool: 'source-map'

2.4 Network（网络请求）

2.5 Application（应用存储）

2.6 Performance（性能）

区域一：控制面板
区域二：概览面板
区域三：线程面板
区域四：统计面板

demo：

www.googlechrome.github.io/devtools-sa…

解决性能问题思路：

页面卡顿->查看FPS指标（帧率）->寻找性能瓶颈->优化代码

2.7 Lighthouse

核心Web指标：

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

3 移动端H5调试

3.1 真机调试

3.2 VConsole

3.3 使用代理工具调试

常用代理工具：

4 NodeJs调试

4.1 Inspector Protocol+Chrome Devtool

4.2 Inspector Protocol + VS Code

5 调试技巧

5.1 线上即时修改Overrides

5.2 运用代理解决开发阶段的跨域问题

5.3 启用本地Source Map

5.4 使用代理mock数据