浅识前端开发调试|青训营笔记

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

前端必须知道的开发调试问题

1. Bug与DeBug

   • 世界上第一个bug是在哈佛大学实验室出现了错误，最后原因是由于一直虫子
   • 前端Debug的特点
     • 多平台
       • 浏览器、NodeJs、小程序
     • 多环境
       • 本地开发、线上环境
     • 多工具
       • chrome、devTools
     • 多技巧
       • Console、sourceMap、代理

2. chrome DevTools

   1. elements
      • 点击.cls开启动态修改元素的class
      • 输入字符串可以动态的给元素添加类名
      • 勾选/取消类名可以动态的查看类名生效效果
      • 点击具体样式值(字号、颜色、宽度高度等)可以进行编辑、李安澜起内容区域实时预览
      • computer下点击样式里的箭头可以跳转到styles画板中的css规则
   2. console
      • log
      • warn
      • error
      • debug
      • info
      • table（具象化JSON和数组数据）
      • dir（通过类似文件树的方式展示对象属性）
   3. source
      • 页面资源文件目录树
      • 代码预览区
      • debug工具栏
        • 暂停
        • 单步跳过
        • 进入函数
        • 跳出函数
        • 单步执行
        • 关闭所有断点
        • 代码执行异常处自动
      • 断点调试器
      • 压缩后的代码如何调试
        • Source Map
   4. network
      • 控制面板
      • 过滤面板
      • 概览区域
      • Request table面板
      • 总结面板
      • 请求详情面板
   5. Application
      • 本地存储相关知识
      • local storage
      • session storage
      • indexedDB
      • web sql
      • coolie
   6. performance
      • 控制面板
      • 概览面板
        • FPS 每秒帧数
        • CPU 出来个个人内务花费的时间
        • NET 各个请求花费时间
      • 线程面板
        • Frames 帧线程
        • Main 主线程 负责执行JavaScript，解析HTML/CSS,完成绘制
        • Raster Raster线程,负责完成某个layer或者某些块的绘制
      • 统计面板
      • 实例
        • demo
        1. 页面卡顿
        2. 查看FPS
        3. 寻找性能瓶颈
        4. 优化代码
   7. Lighthouses
      • LCP (最大内容绘制，测量加载性能，为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5s内发生)
      • FID（首次输入延迟，测量交互性，为提供良好的用户体验页面FID应该100ms及以下）
      • CLS（积累布局偏移，测量视觉稳定行，为了提供良好的用户体验，页面CLS应该保持0.1及以下）

3. 移动端H5调试

   1. 真机调试
      • VConsole
   2. 代理调试
      • charles
      • progress
      • whistle

总结

为了写好代码，调试程序势必不可少的步骤，一定要好好学啊！！！Try to be better