掌握Debug（调试和故障排除）技术是编程人员重要的能力之一。本书作者将多年积累的开发经验浓缩到本书精心设计的教案中，通过范例网站和程序代码讲解HTML、DOM和CSS、JavaScript、性能分析、用户体验、错误处理等开发过程中遇到的问题的成因和解决方法，帮助读者从心态、通用方法切入Debug技巧，再深入至不同主题。相信读者在阅读本书之后，能够更好地掌握Debug工具，将学到的Debug技能应用到实际的开发和测试工作中，并大幅提升解决问题和开发的效率。 本书适用于前端初学者、前端工程师以及有经验的***。

第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