这是我参与「第五届青训营 」伴学笔记创作活动的第 18 天
前端Debug的特点
-
多平台 浏览器、Hybrid、NodeJs、小程序、桌面应用等
-
多环境 本地开发环境、线上环境
-
多工具 Chrome devTools、Charles、Spy-Debugger、console、BreakPoint、sourceMap、代理等Whistle、vConsole.
-
多技巧 Console、BreakPoint、sourceMap、代理等
Chrome devTools
动态修改元素和样式
- 点击.cls 开启动态修改元素的class
- 输入字符串可以动态的给元素添加类名
- 勾选/取消类名可以动态的查看类名生效效果
- 点击具体的样式值（字号、颜色、宽度高度等）可以进行编辑，浏览器内容区域实时预览
- Computed 下点击样式里的箭头可以跳转到styles面板中的css规则
*可以用以下2种方式强制激活伪类
- 选中具有伪类的元素，点击：hov
- DOM树右键菜单，选择Force State
Console
- console.log
- console.warn
- console.error
- console.debug·console.info·console.table 具像化的展示JSON和数组数据
- console.dir 通过类似文件树的方式展示对象的属性
- 占位符 给日志添加样式，可以突出重要的信息
%s：字符串占位符；%o：对象占位符；%c：样式占位符；%d：数字占位符
Sorce Tab
-
区域1：页面资源文件目录树
-
区域2：代码预览区域
-
区域3：Debug 工具栏 从左到右依次为
- 暂停（继续）
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活（关闭）所有断点
- 代码执行异常处自动
-
区域4：断点调试器
Break point与Watch
- 使用关键字debugger或代码预览区域的行号可以设置断点
- 执行到断点处时代码暂停执行
- 展开Breakpoints列表可以查看断点列表，勾选/取消可以激活/禁用对应断点
- 暂停状态下，鼠标 hover变量可以查看变量的值
- 在调试器Watch 右侧点击+可以添加对变量的监控，查看该变量的值
Scope 与Call Stack
- 展开Scope 可以查看作用域列 表（包含闭包）
- 展开Call Stack可以查看当前 javaScript 代码的调用栈
压缩后的代码如何调试？----Source Map
前端代码天生具有“开源”属性，出于安全考虑，上线之前JavaScript代码通常会被压缩，压缩后的代码只有一行，变量使用a、b等替换，整体变得不可阅读。那么压缩后的代码如何调试呢？
mappings 字段存储了源文件和Source Map的映射
- 英文，表示源码及压缩代码的位置关联
- 逗号，分隔一行代码中的内容。 -分号，代表换行。
映射见： www.murzwin.com/base64vIq.h…
source Map 标准： docs.google.com/document/d/…
Network
- 控制面板
- 过滤面板
- 概览区域
- Request Table面板
- 总结面板
- 请求详情面板
Application
Application 面板展示与本地存储相关的信息
- Local Storage
- Session Storage
- IndexedDB
- Web SQL
- Cookie
Performance
- 控制面板
- 概览面板
- FPS：每秒帧数
- CPU：处理各个任务花费的时间
- NET：各个请求花费时间区域3：线程面板
- Frames：帧线程
- Main：主线程，负责执行Javascript，解析HTML/CSS，完成绘制
- Raster:Raster线程，负责完成某个layer或者某些块（tile）的绘制。
- 统计面板
使用的Performance实例：
页面卡顿>>查看FPS指标>>寻找性能瓶颈>>优化代码
googlechrome.github.io/devtools-sa…
LightHouse
核心Web指标
-
Largest Contentful Paint（LCP）：最大内容绘制，测量加载性能。为了提供良好的用户体验，LCP应在页面首次开始加载后的2.5秒内发生。
-
First Input Delay（FID）：首次输入延迟，测量交互性。为了提供良好的用户体验，页面的FID应为10o毫秒或更短。
-
Cumulative Layout Shift（CLS）：累积布局偏移，测量视觉稳定性。为了提供良好的用户体验，页面的CLS应保持在o.1.或更少。
