开发期间必知道的事情 | 青训营笔记

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

开发期间必知道的事情

Bug

前端debug的特点

多平台
多环境
多工具
多技巧

在浏览器下方有多个调试代码的功能和地方

以下进行逐个功能的讲解：

Elements

用force static 调试伪类状态或者侧栏把伪类打开

Console

主要是对代码进行打印，找到错误


console.log("Hello")

console.warn("Hello")

打印提示

consolw.error("Hello")

打印错误

console.debug("Hello")

console.info("Hello")

Source

可以显示源代码

想要在暂停的地方写下debugger 进行打断点、
或者直接点行号进行打断点

Scope 可以查看作用域列表(包含闭包)

Call Stack 可以查看当前js代码的调用栈

NetWork

可以看到接口的运行状态和请求时间
同时可以在不同的网络环境下进行检测
定位后端接口，以及后端返回值

Applicant

与存储相关主要是与存储相关的功能

$KP{I6A}R$D_TK{RXY0}~8.png$ 进行缓存清除

Perfoemance

HXF2L4TAI5JW}CN})841OT2.png

在各个面板有不同的功能

可以查看运动的渲染情况，刷新频率，动画的帧数

LightHouse

可以查看性能相关的评分系数等

对于每个指标都有相应的计算值

核心指标 LCP FID CLS

移动端调试

真机调试主要是将手机与电脑相关联

Vconsole 进行调试

常用代理工具 Charles Progress 适合查看，控制网络请求，分析数据

nodejs调试

保存即时修改的代码

按以下步骤进行

总结

本节课收获了很多调式前端代码的方法，可以进行多种方式进行debug，可以使我在前端代码时有了多条解决困难的思路和方法，收获颇深

前端开发期间必知道的事情 | 青训营笔记