前端必须知道的开发调试知识 | 青训营笔记
这是我参与「第四届青训营 」笔记创作活动的第10天
BUG
什么是BUG
- 产品说明书中规定要做的事情，而软件没有实现。
- 产品说明书中规定不要做的事情，而软件确实现了。
- 产品说明书中没有提到过的事情，而软件确实现了。
- 产品说明书中没有提到但是必须要做的事情，软件确没有实现。
- 软件很难理解，很难使用，速度超慢，测试人员站在最终用户的角度看到的问题是平常的但不是正确的。
Debug
消除故障或排除程序故障。
Debug特点：
- 多平台：如浏览器、NodeJs、Hybrid、小程序等。
- 多环境：本地开发环境、线上环境。
- 多工具：Chrome、devTools、Charles、Spy-Debugger等。
- 多技巧：Console、BreakPoint、sourceMap、代理等。
Chrome DevTools
Chrome DevTools（Chrome 开发者工具） 是内嵌在 Chrome 浏览器里的一组用于网页制作和调试的工具。
Elements面板
在 Elements 面板中可以通过 DOM 树的形式查看所有页面元素，同时也能对这些页面元素进行所见即所得的编辑
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看生效效果
- 点击具体的样式值（字号、颜色、宽度高度等），可以进行编辑，浏览器内容区域实时预览。
- Computed下点击样式里的箭头可以跳转到styles面板中的css规则。
Console
一方面用来记录页面在执行过程中的信息（一般通过各种 console 语句来实现），另一方面用来当做 shell 窗口来执行脚本以及与页面文档、DevTools等进行交互
- 普通打印：
console.log - 效果同普通打印：
console.debug、console.info - 警告打印：
console.warn - 错误打印：
console.error - 将数据以表格形式展示：
console.table
Sources
Sources 面板主要用来调试页面中的 JavaScript -** Network**：在 Network 面板中可以查看通过网络来请求来的资源的详细信息以及请求这些资源的耗时。
- 最左侧栏是页面资源文件目录树
- 中间拦是代码预览区域
- 最右侧栏上方导航栏是Debug工具栏，从左到右依次为：暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所以断点、代码执行异常处自动
- 最右侧栏下方是断点调试器
NetWork
Network面板可以记录页面上的网络请求的详情信息，从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间、Request和Response等），可以根据这个进行网络性能优化。
Performance
在 Performance 面板可以查看页面加载过程中的详细信息，比如在什么时间开始做什么事情，耗时多久等等。这个跟上面的 Network 有什么区别呢？在 Performance 面板中，你不仅可以看到通过网络加载资源的信息，还能看到解析 JS、计算样式、重绘等页面加载的方方面面的信息。
Application
记录网页加载的所有资源，包括存储信息、缓存信息以及页面用到的图片、字体、脚本、样式等信息。
Lighthouse
谷歌网页性能分析工具。
Web核心指标：
- LCP（largest Contentful Paint） ：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5内发生。
- FID（First Input Delay） ：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
- CLS（Cumulative Layout Shift） ：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1或更少。
Security
用于检测当面页面的安全性
- Memory
主要显示页面 JS 对象和相关联的 DOM 节点的内存分布情况。
个人总结
今天主要讲的是前端开发调试的一些基础知识，我主要学习了如何通过浏览器自带的调试工具来debug。对于我来说，通过今天的学习，我学会了如何动态的调样式，如何通过断点等方法来排除错误的等一些调试方法。
