目    录

第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