前端必须知道的开发调试知识
这是我参与「第四届青训营 」笔记创作活动的第8天
学习前端开发与调试的必要性
在前端开发的路上无论是web开发、移动端开发等，总会遇到bug或者是需要不断调试的处境，熟练掌握调试 技巧可以让自己开发的时候快速找到bug，解决问题。本文将着重介绍web开发的调试，与常用的调试方法。
浏览器开发者工具（以Edge开发者工具）
打开方式：
- 点开浏览器的设置图标找到辅助功能
- 在辅助功能中找到F12打开开发者工具
- 点开F12打开开发者工具
元素
- 点击.cls开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编译，浏览器内容区域实时浏览
- 已计算下点击样式里的箭头可以跳转到样式面板种的CSS规则
可以用以下2种方式强制激活伪类
- 选中具有伪类的元素，点击：hov
- DOM树右键菜单， 选择强制状态
控制台
控制台一般可以看到警告，报错，日志等
- console.log
- console.warn
- console.error
- console.debug
- console.info
- console.table（具象化的展示JSON和数组数据）
- console.dir（通过类似文件数的方式展示对象的属性）
- 占位符（给日志添加样式，可以突出重要的信息，%s：字符串占位符；%o对象占位符；%c：样式占位符；%d：数字占位符
源代码
- 区域1：页面资源文件目录树
- 区域2：代码预览区域
- 区域3：Debug工具栏 从左到右依次为（暂停（继续）、单步跳过、进入函数、跳出函数、单步执行、激活（关闭）所有断电、代码执行异常处自动）
- 区域4：断点调试器
断点和监视
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开断点列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标hover变量可以查看变量的值
- 在调试器监视右侧点击+可以添加变量的监控，查看该变量的值
作用域和调用栈
- 展开作用域可以查看作用域列表（包含闭包）
- 展开调用栈，可以查看当前JavaScript代码的调用栈
压缩后的代码如何调试
前端代码天生具有开源属性，出于安全考虑，一般javascript代码会经过打包即压缩，这时候我们要借助Source Map
mappings字段存储了源文件和Source Map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码种的内容
- 分号，代表换行
网络
- 区域1：控制面板
- 区域2：过滤面板
- 区域3：概览区域
- 区域4：请求列表面板
- 区域5：总结面板
- 区域6：请求详情面板
应用程序
面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
性能
- 区域1：控制面板
- 区域2：概览面板(FPS:每秒帧数、CPU：处理各个任务花费的时间、NET：各个请求花费时间）
- 区域3：线程面板（Frames：帧线程、Main主线程：负责执行Javascript，解析HTML/CSS，完成绘制、Rasteer：Raster线程，负责完成某个layer或者某些块的绘制
- 区域4：统计面板
得到相关参数能进一步知道代码是否需要优化，优化到什么程度。
Lighthouse
核心Web指标：
- LCP：最大内容绘制，测量加载性能，好的用户体验LCP应该在页面首次开始加载后的2.5秒内产生
- FID：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100ms或更短
- CLS：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应该保持在0.1s或更少
线上及时修改覆盖
- 打开源代码面板下的覆盖
- 点击选择代替文件夹。选择一个本地的空文件夹项目
- 允许授权
- 在page中修改代码，修改完成后保存
- 打开开发者工具，点击右上角的三个小点->更多工具->更改，就能看到所有修改了
总结
本文介绍了调试工具的各个用法，以及一些概念，更主要的还是是需要多用，练熟，找到自己得心应手的调试方法。
