前端必须知道的开发调试知识 ｜ 青训营笔记

用户3129671266263
108 阅读2分钟

前端必须知道的开发调试知识

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

1.Bug和Debug

前端Debug的特点

  • 多平台 浏览器、Hybird、nodejs、小程序、桌面应用
  • 多环境 本地开发环境、线上环境
  • 多工具 chrome devTools、Charles、Spy-Debugger、vConsole
  • 多技巧 Console、BreakPoint、sourceMap、代理

2.Chrome DevTools

2.1动态修改元素和样式

  • 点击.cls开启动态修改元素的class
  • 输入字符串可以动态的给元素添加类名
  • 勾选/取消类名可以动态的查看类名生效效果
  • 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
  • Computed下点击样式里的箭头可以跳转到styles面板中的CSS规则

2.2Console

  • console.log 日志打印 灰色是字符串 蓝色数字number

  • console.warn 输出警告信息（黄色）

  • console.error 输出错误信息（红色）

  • console.debug 调试（蓝色）

  • console.info info函数里放的是调试信息

  • console.table 具象化的展示json和数组数据

  • console.dir 通过类似文件树的方式展示节点的属性

  • 占位符 给日志添加样式，可以突出重要的信息

    • %S 字符串占位符 %O 对象占位符 %C 样式占位符

2.3Sources Tab

Sources面板组成:

  • 区域1：页面资源文件目录树

  • 区域2：代码预览区域

  • 区域3：Debug工具栏，

    • 从左到右依次为：

      • 暂停（继续）
      • 单步跳过
      • 进入函数
      • 跳出函数
      • 单步执行
      • 激活（关闭）所以断点
      • 代码执行异常处自动

  • 区域4：断点调试器

2.4NetWork

  • 区域1：控制面板
  • 区域2：过滤面板
  • 区域3：概览区域
  • 区域4：Request Table面板
  • 区域5：总结面板
  • 区域6：请求详情面板

2.5Application

Appliaction面板展示与本地存储相关的信息：

  • local Storage
  • Session Storage
  • IndexedDB
  • Web SQL
  • Cookie

2.6Performance

  • 区域1：控制面板
  • 区域2：概览面板（FPS：每秒帧数）、（CPU：处理各个任务花费的时间）、（NET：各个请求花费时间）
  • 区域3：线程面板（Frames：帧线程）、（Main：主线程、负责执行Javascript，解析HTML/CSS，完全绘制）、（Raster：Raster线程，负责完成某个layer或者某些块的绘制）
  • 区域4：统计面板

2.7Lighthouse

Lighthouse是网页性能分析工具。 Web核心指标：

  • LCP（largest Contentful Paint） ：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
  • FID（First Input Delay） ：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为100毫秒或更短。
  • CLS（Cumulative Layout Shift） ：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在0.1.或更少。

3.移动端H5调试

主要有这几种方式进行调试：

  • 真机调试
  • 使用代理工具调试
  • 常用工具调试
avatar
文章
阅读
粉丝