这是我参与「第五届青训营 」伴学笔记创作活动的第14天。
前端Debug的特点
- 01.多平台
- 浏览器、Hybrid、NodeJs、小程序、桌面应用等.
- 02多环境
- 本地开发环境、线上环境
- 03.多工具
- Chrome devTools、Charles、Spy-Debugger Whistle, vConsole ...
- 04.多技巧
- Console、BreakPoint、sourceMap、代理等
PC端
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等)
- 可以进行编辑,浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到style:
- 面板中的css规则
- 可以用以下2种方式强制激活伪类
- 选中具有伪类的元素,点击:hov
- DOM 树右键菜单,选择ForceState
Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- 可以选择等级,对日志进行分类查看
- console.table
- 具像化的展示JSON和 数组数据
- console.dir
- 通过类似文件树的方式展示对象的属性
- 占位符
- 给日志添加样式,可以突出重要的信息
- %s:字符串占位符;%o:对象占位符; % c:样式占位符;%d:数字占位符
Break Point与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表,勾选/取消可以激活/禁用对应断点
- 暂停状态下,鼠标hover变量可以查看变量的值
- 在调试器 Watch右侧点击+可以添加对变量的监控,查看该变量的值
压缩后的代码如何调试?
- 利用chrome的开发者工具对JavaScript代码打断点调试，是一种常用的前端调试方法。
- 但有时我们需要对压缩后的JavaScript进行调试，因为现在前端大多采用FIS或webpack进行压缩，如果拿不到JavaScript的源代码，就只能对压缩后的代码进行断点分析。
- 点击Sources 面板下方的 pretty print 按钮{}，格式化JavaScript代码，然后再打断点调试即可。
页面卡顿——>查看FPS指标——>寻找性能瓶颈——>优化代码
核心 Web指标
Largest Contentful Paint (LCP):最大内容绘制,测量加载性能。为了提供良好的用户体验,LCP应在页面首次开始加载后的2.5秒内发生。
First Input Delay (FID):首次输入延迟测量交互性。为了提供良好的用户体验,页面的FID应为100毫秒或更短。
Cumulative Layout Shift (CLS):累积布局偏移,测量视觉稳定性。为了提供良好的用户体验,页面的cLs应保持在0.1.或更少
常用开发调试技巧
线上即时修改Overrides
- 打开Sources面板下的的Overrides
- 点击 Select folders for Overrides。选择一个本地的空文件夹目录。
- 在page中修改代码,修改完成后command+s保存
- 打开devTools,点击右上角的三个小点->More tools ->Changes,就能看到所有修改了
