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

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

1.Chrome DevTools

动态修改元素和样式

• 点击.cls开启动态修改元素的class
• 输入字符串可以动态的给元素添加类名
• 勾选/取消类名，可以动态的查看类名生效效果
• 点击具体的样式可以进行编辑，浏览器内容区域实时预览
• Computed下点击样式里的检讨可以跳转到style面板里的CSS规则

Console

• console.log
• console.warn
• console.error
• console.debug
• console.table（具象化展示JSON和数组数据）
• console.dir（通过类似文件树的方式展示对象属性）
• 占位符

给日志添加样式，可突出重要信息

Sorce Tab

压缩后的代码如何调试

• Source Map

  • mappings字段存储了源文件和Source Map的映射
  • 英文，表示源码及压缩代码的位置管理
  • 逗号，分割一行代码中的内容
  • 分号，代表换行

NetWork

Application

• Application面板展示与本地存储相关的信息

  • Local Storage
  • Session Strorage
  • IndexedDB
  • Web SQL
  • Cookie

Performance（网络性能）

• 概览面板

  • FPS：每秒帧数
  • NET：各个请求花费时间
  • CPU：处理各个任务花费的时间

• 线程面板

  • Frames:帧线程
  • Main:主线程，负责执行JavaScript，解析html/CSS,完成绘制
  • Raster

• 统计面板

Light House

• 累计布局位移（CLS）是衡量用户视觉稳定性的一项重要的以用户为中心的度量标准，因为它有助于量化用户打开页面时，页面布局变化的频率。目前官方建议这个指标应该小于 0.1，这样的 CLS 有助于确保页面的用户体验。
• Largest Contentful Paint (LCP) 用于衡量标准报告视口内可见的最大内容元素的渲染时间。为了提供良好的用户体验，网站应努力在开始加载页面的前 2.5 秒内进行 最大内容渲染 。
• FID（ First Input Delay）即记录用户和页面进行首次交互操作所花费的时间 。FID 指标影响用户对页面交互性和响应性的第一印象。 为了提供良好的用户体验，站点应努力使首次输入延迟小于 100 毫秒。