这是我参与【第五届青训营】伴学笔记创作活动的第16天。
Bug与Debug
- 多平台 浏览器、Hybrid、NodeJs、小程序、桌面应用等。
- 多环境 本地开发环境、线上环境
- 多工具 Chrome devTools、Charles、Spy-Debugger、Whistle, vConsole ...
- 多技巧 Console、BreakPoint、sourceMap、代理等
Chro ome DevTools
Elements Console Source Performance Network
动态修改元素和样式
- 点击 .cls 开启动态修改元素的 class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值(字号、颜色、宽度高度等)可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到 styles面板中的 css 规则
可以用以下2种方式强制激活伪类 - 选中具有伪类的元素，点击:hov
- DOM 树右键菜单，选择 Force State
Sorce Tab
-
区域1:页页面资源文件目录树
-
区域2:代码预览区域
-
区域3:Debug 工具栏从左到右依次为
- 暂停(继续)
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活(关闭)所有断点
- 代码执行异常处自动
-
区域4:断点调试器
Break Point
- 使用关键字 debugger 或 代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开 Breakpoints 列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover 变量可以查看变量的值
- 在调试器 Watch 右侧点击 + 可以添加对变量的监控，查看该变量的值
v
mappings 字段存储了源文件和 Source Map 的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容。
- 分号，代表换行。
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB Web SQL
- Cookie**
NetWork
- 区域1:控制面板
- 区域2:概览面板
- FPS:每秒帧数
- CPU:处理各个任务花费的时间
- NET:各个请求花费时间
- 区域3:线程面板
- Frames:帧线程
- Main:主线程，负责执行Javascript,解析HTML/Css, 完成绘制
- Raster:Raster线程，负责完成某个 layer或者某些块(tile)的绘制。
- 区域4:统计面板
核心 Web 指标
- Largest Contentful Paint (LCP):最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP 应在页面首次开始加载后的2.5 秒内发生。
- First Input Delay(FID): 首次输入延迟测量交互性。为了提供良好的用户体验，页面的 FID 应为100 毫秒或更短。
- Cumulative Layout Shift (CLS): 累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的 CLS 应保持在 0.1. 或更少。
