这是我参与「第四届青训营 」笔记创作活动的第1天
这篇文章是青训营-前端《前端必须知道的开发调试知识》的课堂笔记。
前端Debug的特点：
- 多平台：浏览器，Hybrid,Node.js,微信小程序，桌面应用……
- 多环境：本地开发环境，线上环境……
- 多工具：Chrome devToos,Spy-Debugger,Whistle,vConsole，Charles……
- 多技巧：Console,BreakPoint,sourceMap，代理……
Chrome Devtools
Elements
-
动态修改元素和样式
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则
-
强制激活伪类
- 选中元素，点击:hov
- 或者在DOM树中右键，选择Force State
Console
- console有以下几大类：
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table(具象化的展示JSON和数组数据)
- console.dir(通过类似文件树的方式展示对象的属性)
占位符：给日志添加样式，可以突出重要的信息
%s:字符串占位符，%o:对象占位符，%c:样式占位符，%d:数字占位符），例如
console.log('%s %o,%c%s','hello',{name:'tome'},'color:red','Welcome');
Scope与Call Stack
- 展开Scope可以查看作用域列表，包括闭包
- 展开Call Stack可以查看当前JavaScript代码的调用栈
代码压缩后调试
前端代码天生具有开源属性，出于安全考虑，上线之前，JavaScript代码通常会被压缩，压缩后的代码只有一行，变量名会被替换。
Source Map
它本质上是一个信息文件，里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置，是源代码和生产代码的映射。
它解决了在打包过程中，代码经过压缩，去空格以及 babel 编译转化后，由于代码之间差异性过大，造成无法debug的问题。
- 英文，表示源码以及压缩代码的位置关联
- 逗号，表示分割一行代码中的内容
- 分号，代表换行
模拟网络速度来进行调试
在我们使用接口请求数据的时候，由于现在的网速很快，我们很难看清请求数据的过程，那么在我们调试器中的No throtting中可以模拟Slow 3G网络，来让开发者看清接口数据请求的过程，从而进行调试。
Performance
googlechrome.github.io/devtools-sa…
Lighthouse
- Largest Contentful Paint (LCP):最大内容绘制，测量加载生性能。为了提供良好的用户体验，LC应在页面首次开始加载后的2.5秒内发生。
- First Input Delay (FID)∶首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- Cumulative Layout Shift (CLS)∶累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。
移动端H5的调试
- ios
- 使用Lightning数据线将iPhone与mac相连进行调试
- Android
- 使用usb数据线将手机与电脑连接进行调试
- 前端调试面板VConsole
gitee.com/Tencent/vCo…
