目 录
第1章 热身运动 1
1.1 关于本书 1
1.2 适用读者 2
1.3 学习Debug技巧的地图 2
1.4 REPL和实时测试工具 2
1.5 前端开发Debug工具的选择 4
1.6 Debug“心法”的建立 4
1.6.1 放大出错的影响 4
1.6.2 治标不治本 5
1.6.3 集中精神并且适度休息 5
1.6.4 不要钻牛角尖 5
1.6.5 适时寻求协助 6
1.6.6 心无旁骛 6
第2章 通用技巧 7
2.1 专注于单一问题 7
2.2 关键词搜索 8
2.3 阅读文件、源代码及规范 8
2.4 单方向寻找 9
2.5 降低变动条件 9
2.6 使用版本控制 9
2.7 善用开发工具 10
2.8 如何减少Bug及降低维护难度 10
2.8.1 静态分析程序代码 10
2.8.2 制定语法规范 11
2.8.3 统一语法格式 11
2.8.4 加入注释 11
2.9 小结 12
第3章 DOM和CSS技巧 13
3.1 基本原则 13
3.2 元素检查技巧 14
3.2.1 检查工具 14
3.2.2 状态锁定 14
3.2.3 暂停执行 16
3.2.4 节点隐藏 17
3.2.5 搜索 17
3.3 存取、修改DOM 18
3.3.1 插入节点 18
3.3.2 移动和删除节点 18
3.3.3 ==$0 18
3.4 CSS基本观察技巧 19
3.4.1 属性简写 19
3.4.2 !important 19
3.4.3 检查计算后的属性 20
3.4.4 默认CSS规则 20
3.4.5 继承属性 21
3.5 CSS高级检查技巧 21
3.5.1 加入边界提示 21
3.5.2 定义的属性值和计算结果不同 22
3.5.3 实际显示大小与计算结果不符 24
3.6 CSS调整技巧 25
3.6.1 添加规则 25
3.6.2 加入Pseudo元素 25
3.6.3 微调数值 26
3.6.4 快速切换Class 26
3.6.5 同时加入多项属性 26
3.7 inline元素的问题 27
3.7.1 display: inline; 27
3.7.2 inline元素下方的空间 27
3.7.3 inline元素之间的空间 28
3.8 找出元素的定位容器 29
3.9 Flex和Grid 30
3.10 margin问题 31
3.10.1 margin重叠 31
3.10.2 注意负数margin 32
3.11 Overflow问题 33
3.11.1 overflow属性值 33
3.11.2 浏览器滚动条的运行方式 34
3.11.3 找出滚动容器 34
3.11.4 position: sticky;无效 35
3.12 检查元素的覆盖顺序 35
3.12.1 寻找堆叠上下文起点 35
3.12.2 创建Stacking context的条件 35
3.13 检查动画 36
第4章 JavaScript技巧 38
4.1 使用Debugger解决问题 38
4.1.1 为什么要使用Debugger 38
4.1.2 Debugger的流程 38
4.1.3 重现问题 39
4.1.4 设置断点 39
4.1.5 控制执行 41
4.1.6 检查状态 42
4.1.7 实时修正 42
4.1.8 熟悉Sources面板和Debugger的用法 43
4.2 使用Source Map 43
4.2.1 原因 43
4.2.2 原理 44
4.3 Console信息的可读性 45
4.3.1 保持简洁 45
4.3.2 更清晰的信息 47
4.4 使用Logpoint插入程序代码 50
4.5 追踪Call stack 51
4.6 事件监听器 52
4.6.1 模拟触发事件 52
4.6.2 检查元素的事件监听器 53
4.6.3 覆写函数 53
4.7 多执行环境的问题 54
4.8 异步问题 55
4.9 比较运算和强制类型转换 57
4.9.1 "0" 57
4.9.2 类型转换被覆写 58
4.9.3 && 和 || 58
4.9.4 不同相等比较方式的差异 59
4.9.5 字符串和数字显示 59
4.9.6 对象属性值 60
第5章 API技巧 62
5.1 分析问题的原因 62
5.1.1 Network错误 62
5.1.2 筛选和搜索 63
5.1.3 更清晰的信息 65
5.1.4 减少干扰 65
5.1.5 模拟限制 67
5.1.6 画面截图 68
5.1.7 请求过慢 69
5.2 CORS错误 70
5.3 Mixed Content 71
5.4 Cookies无效 72
5.4.1 CORS 72
5.4.2 Cookies被阻挡 72
5.4.3 SameSite属性 73
5.5 缓存问题 74
5.5.1 请求记录列表 74
5.5.2 Prefetch和Preload 75
5.5.3 基本缓存机制 76
5.5.4 no-cache 76
5.6 修改请求和响应 77
5.6.1 复制请求 77
5.6.2 编辑、重发请求 77
5.6.3 拦截请求 78
5.6.4 模拟服务器 78
5.7 浏览器相关的问题 79
5.7.1 浏览器参数 79
5.7.2 定制化设置 80
5.7.3 使用无痕模式 81
5.7.4 Puppeteer 81
第6章 JavaScript性能分析技巧 82
6.1 基本分析流程 82
6.1.1 准备 82
6.1.2 记录Activities 83
6.1.3 自上而下找出瓶颈的根源 85
6.1.4 自下而上查看运行时间较长的函数 86
6.2 内存占用量 87
6.2.1 垃圾回收 87
6.2.2 常见原因 88
6.2.3 征兆 89
6.2.4 监测和分析 89
第7章 页面加载流程分析技巧 95
7.1 分析 95
7.1.1 阻塞 96
7.1.2 避免阻塞 97
7.2 实例 98
7.2.1 阻塞渲染 98
7.2.2 避免阻塞渲染 99
7.2.3 阻塞解析 101
7.2.4 避免阻塞解析 102
第8章 浏览器渲染性能分析技巧 103
8.1 渲染流程 103
8.2 JavaScript阶段 104
8.2.1 requestAnimationFrame 104
8.2.2 Worker 104
8.2.3 Throttle 105
8.3 Style Calculation阶段 105
8.4 Layout段 106
8.4.1 布局抖动 107
8.4.2 哪些操作会触发布局 108
8.4.3 哪些操作会强制布局 108
8.5 Paint阶段 108
8.5.1 图层 108
8.5.2 降低图层范围和复杂度 109
8.5.3 图层检查技巧 109
8.5.4 哪些操作会触发绘制 111
8.6 Composite阶段 112
第9章 设备仿真及Debug技巧 113
9.1 设备仿真 113
9.1.1 显示 113
9.1.2 交互 116
9.2 远程调试 117
9.2.1 Android 117
9.2.2 iOS 119
9.3 检测工具 121
9.3.1 Mobile Friendly Test 121
9.3.2 Lighthouse 121
9.3.3 WebPageTest 121
9.3.4 Can I Use 121
9.3.5 BrowserStack 122
第10章 用户体验和无障碍网页 123
10.1 Web Vitals 123
10.1.1 指标测量方式 123
10.1.2 LCP 124
10.1.3 FID 126
10.1.4 CLS 127
10.1.5 其他网页体验指标 128
10.1.6 测量工具 130
10.2 无障碍网页 131
10.2.1 对比度 131
10.2.2 键盘浏览 133
10.2.3 检查Tab顺序 133
10.2.4 tabindex 134
10.2.5 屏幕阅读器 135
10.2.6 检测工具 135
第11章 错误处理技巧 136
11.1 拦截错误 136
11.1.1 try/catch语句 136
11.1.2 异步错误拦截 137
11.1.3 错误拦截时机 138
11.1.4 错误事件 140
11.2 抛出错误 141
11.3 处理错误 142
11.3.1 区分错误严重程度 142
11.3.2 错误分析 143
第12章 Chrome DevTools 144
12.1 打开方式 144
12.1.1 快捷键 145
12.1.2 自动打开 145
12.2 组成 145
12.3 定制化DevTools 146
12.3.1 设置 146
12.3.2 指令菜单 147
12.3.3 调整外观 147
12.4 Chrome DevTools文件 149
第13章 Elements面板 150
13.1 基本介绍 150
13.2 查看DOM结构 151
13.2.1 检查和浏览元素信息 151
13.2.2 搜索元素 152
13.3 编辑DOM 153
13.3.1 编辑元素类型和属性 153
13.3.2 编辑元素内容 154
13.3.3 改变元素顺序 155
13.3.4 剪切、复制、粘贴元素 155
13.3.5 隐藏、删除元素 156
13.3.6 复原、取消复原 156
13.4 在Console面板中存取元素 157
13.4.1 将元素存入变量 157
13.4.2 复制元素的选择器 158
13.5 查看元素CSS 158
13.5.1 Styles分页 158
13.5.2 复制元素CSS 159
13.5.3 Computed分页 160
13.5.4 搜索和筛选CSS 160
13.6 修改元素CSS 162
13.6.1 修改元素的class 162
13.6.2 添加规则 163
13.6.3 修改规则 164
13.6.4 颜色编辑器 165
13.6.5 阴影编辑器 169
13.6.6 角度编辑器 169
13.6.7 贝氏曲线编辑器 169
13.6.8 Box model编辑器 170
13.6.9 字体编辑器 171
13.7 改变元素状态 172
13.8 排版编辑器和Debugger 172
13.8.1 Flex 174
13.8.2 Grid 174
13.8.3 Scroll Snap 175
13.9 DOM断点 175
第14章 Console面板 176
14.1 基本介绍 176
14.2 Console设置 176
14.2.1 Group similar messages in console 177
14.2.2 Eager evaluation 177
14.2.3 Autocomplete from history 178
14.2.4 Evaluate triggers user activation 178
14.2.5 Hide network 179
14.2.6 Preserve log 180
14.2.7 Selected context only 180
14.2.8 Log XMLHttpRequests 181
14.2.9 Show timestamps 182
14.3 Console信息 182
14.3.1 信息级别 182
14.3.2 筛选信息 183
14.4 Console API 186
14.4.1 console.assert 186
14.4.2 console.count 187
14.4.3 console.group 188
14.4.4 console.table 189
14.4.5 console.time 190
14.4.6 console.trace 191
14.4.7 自定义信息样式 191
14.5 Console Utilities API 192
14.5.1 $_ 192
14.5.2 $0~$4 192
14.5.3 $和$$ 193
14.5.4 $x 193
14.5.5 debug 194
14.5.6 monitor 194
14.5.7 monitorEvents 195
14.5.8 getEventListeners 195
14.5.9 queryObjects 196
14.5.10 copy 196
14.5.11 keys和values 197
14.5.12 clear 197
14.6 在Console内执行JavaScript 197
14.6.1 基本特性 198
14.6.2 自动补齐和重复输入 199
14.6.3 Top-level await语法 199
14.6.4 切换JavaScript Context 200
14.6.5 Live Expression 200
第15章 Sources面板 201
15.1 面板组成 201
15.2 文件面板 203
15.2.1 Page分页 203
15.2.2 Filesystem分页 203
15.2.3 Overrides分页 205
15.2.4 Content scripts分页 206
15.2.5 Snippets分页 207
15.3 设置断点 207
15.3.1 概览 208
15.3.2 程序代码断点 208
15.3.3 DOM断点 211
15.3.4 请求断点 212
15.3.5 事件监听器断点 213
15.3.6 例外断点 214
15.3.7 函数断点 214
15.3.8 内容安全政策违规断点 215
15.4 单步执行JavaScript 216
15.4.1 恢复执行 216
15.4.2 越过该行程序代码 217
15.4.3 进入函数 217
15.4.4 退出函数 218
15.4.5 跳转 218
15.4.6 单步执行异步程序代码 219
15.4.7 多线程 221
15.4.8 忽略断点 222
15.5 查看JavaScript的执行状态 222
15.5.1 查看变量值 222
15.5.2 监控自定义执行结果 225
15.5.3 调用堆栈 225
15.6 Sources面板设置 226
15.6.1 忽略文件 226
15.6.2 Source Map 228
第16章 Network面板 229
16.1 基本介绍 229
16.1.1 面板组成 229
16.1.2 记录请求信息 230
16.2 工具栏 230
16.3 设置 232
16.3.1 Use large request rows 232
16.3.2 Group by frame 233
16.3.3 Show overview 233
16.3.4 Capture screenshots 234
16.4 Drawer 234
16.4.1 Network Conditions 234
16.4.2 Network request blocking 235
16.5 筛选请求记录 235
16.5.1 基本筛选方式 235
16.5.2 以属性筛选请求 236
16.6 搜索请求内容 239
16.7 请求记录列表设置 240
16.7.1 排序请求记录 240
16.7.2 自定义字段 240
16.7.3 字段说明 240
16.8 详细请求信息 241
16.8.1 Headers分页 242
16.8.2 Preview分页 243
16.8.3 Response分页 243
16.8.4 Initiator分页 244
16.8.5 Timing分页 245
16.8.6 Messages分页 246
16.8.7 Cookies分页 247
16.8.8 复制请求信息 247
第17章 Performance面板 249
17.1 基本介绍 249
17.1.1 面板组成 249
17.1.2 工具栏 250
17.1.3 设置 252
17.2 Overview图表 253
17.2.1 选择记录区间 253
17.2.2 FPS行 254
17.2.3 CPU行 254
17.2.4 NET行 254
17.2.5 逐帧截图 255
17.3 Activities列表 255
17.3.1 Main列表 255
17.3.2 Network列表 261
17.3.3 Frames列表 261
17.3.4 Timings列表 263
17.3.5 Experience列表 264
17.3.6 GPU列表 265
17.3.7 Raster列表 265
17.3.8 其他列表 265