这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
BUG 与 Debug
产生
from a real bug
特点
- 多平台 浏览器、Hybrid、NodeJs、小程序、桌面应用
- 多环境 本地开发环境、线上环境
- 多工具 Chrome devTools、Charles、Spy-Debugger、Whistle、vConsole
- 多技巧 Console、BreakPoint、sourceMap、代理
Chrome devTools
Elements
- 观察及修改元素 DOM
- styles 分面板查看及修改元素 class 及 style
- computed 分面板下查看起效的样式
- 点击 .cls 可以强制赋予伪类状态
Console
- console.log
- console.warn
- console.error
- console.debug
- console.info
- 可在左侧边栏根据不同等级console筛选消息
- console.table 类似表格方式展示对象数据
- console.dir 类似文件树方式展示对象属性（打印 HTML 元素时以 JS 对象形式显示）
- 占位符
Source
-
页面资源文件目录树
-
页面代码预览区
-
DEBUG工具栏
- 暂停
- 单步跳过
- 进入函数
- 跳出函数
- 单步执行
- 激活所有断点
- 代码执行异常处自动暂停
-
断点调试器
- Watch 监视变量值
- Break Point 控制断点
- Scope 查看作用域及闭包
- Call Stack 可查看当前js代码调用栈
- XHR/fetch Breakpoints 设置网络请求断点
- DOM Breakpoints 设置DOM元素变化断点
- Global Listeners 全局事件监听器
- Event Listener Breakpoints 事件监听器断点
- CSP Violation Breakpoints CSP 断点
-
断点
- 创建断点使用 debugger 关键字，代码预览区点击行号
- 执行至断点处暂停执行
- Breakpoints 可查看断点列表，可通过激活或禁用断点
- 暂停状态下 hover 变量可观察变量的值
-
压缩后代码调试，使用 Source Map
-
Source Map 存储源文件和 source map的映射，方便开发
Network
-
控制面板
- no throttling可以选择模拟网络质量类型
-
过滤面板
- 可过滤不同类型请求
-
概览面板
- 瀑布流
-
请求列表面板
-
总结面板
- 请求总数、请求及响应总大小
-
请求详情面板
Application
显示本地存储相关内容
- local storage
- session storage
- indexedDB
- web SQL（已基本废弃使用）
- cookies
Performance
-
控制面板
-
概览面板
- FPS 每秒帧数
- CPU 处理各任务花费时间
- NET 各请求花费时间
- Heap 内存中堆大小
-
线程面板
- Frames 帧线程
- Main 主线程，负责执行js，解析HTML、CSS，完成绘制
- Raster 负责绘制某个layer或者title绘制
-
统计面板
Lighthouse
帮助测试网页各类指标并给出相应的反馈建议
- LCP 最大内容绘制，加载性能
- FID 首次输入延迟，交互性
- CLS 累积布局偏移，累积布局偏移
移动端H5调试
真机调试
-
手机电脑联合调试
-
vConsole
- 日志 Logs
- 网络 Network
- 节点 Element
- 存储 Storage
- 手动执行&命令行
-
使用代理工具调试
- charles、fiddler、spy-debugger、whistle
Node.js 调试
Node和浏览器联合（Inspector Protocol + Chrome Devtool）
VScode 调试（Inspector Protocol + VScode）
