新書推薦：
《
元好问与他的时代（中华学术译丛）
》
售價：HK$
87.4
《
汽车传感器结构·原理·检测·维修
》
售價：HK$
109.8
《
怪谈百物语：不能开的门（“日本文学史上的奇迹”宫部美雪重要代表作！日本妖怪物语集大成之作，系列累销突破200万册！）
》
售價：HK$
65.0
《
罗马政治观念中的自由
》
售價：HK$
50.4
《
中国王朝内争实录：宠位厮杀
》
售價：HK$
61.6
《
凡事发生皆有利于我（这是一本读了之后会让人运气变好的书”治愈无数读者的心理自助经典）
》
售價：HK$
44.6
《
未来特工局
》
售價：HK$
55.8
《
高术莫用（十周年纪念版 逝去的武林续篇 薛颠传世之作 武学尊师李仲轩家世 凸显京津地区一支世家的百年沉浮）
》
售價：HK$
54.9
|
| 編輯推薦： |
|
虽然Debug占据了开发者大多数的时间，却较少人着墨于精进Debug技巧。本书从心态、通用方法切入Debug技巧，再深入不同主题，如HTML、CSS、JavaScript、性能分析、用户体验、错误处理、工具等，并搭配范例程序源码进行说明，以协助读者理解并应用到实际的开发和测试场景中，提升解决问题的效率。
|
| 內容簡介： |
|
掌握Debug（调试和故障排除）技术是编程人员重要的能力之一。本书作者将多年积累的开发经验浓缩到本书精心设计的教案中，通过范例网站和程序代码讲解HTML、DOM和CSS、JavaScript、性能分析、用户体验、错误处理等开发过程中遇到的问题的成因和解决方法，帮助读者从心态、通用方法切入Debug技巧，再深入至不同主题。相信读者在阅读本书之后，能够更好地掌握Debug工具，将学到的Debug技能应用到实际的开发和测试工作中，并大幅提升解决问题和开发的效率。 本书适用于前端初学者、前端工程师以及有经验的开发者。
|
| 關於作者： |
|
杨楚玄 软件开发资深工程师 ，在软件开发有多年的开发经验，尤其Web前后端开发，具有丰富的项目开发经验。现任Appier前端工程师，同时担任ALPHA Camp课程讲师。以《你所不知道的各种前端Debug技巧》系列文章参加iT邦帮忙铁人赛Modern Web组获得冠军。参与开源项目，在GitHub上的个人项目拥有超过5000颗星。
|
| 目錄：
|
第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
|
| 內容試閱：
|
对于软件开发者来说，无论采用哪种程序设计语言，都需要花费大量时间在Debug（调试和故障排除）上，初学者时常会因为无法有效地找出问题以及解决问题而感到挫败，而许多人花费大量精力学习新知识及熟悉技术，却忽略了重要的基础之一—Debug技巧。
还记得第一次实习面试时，主考官问我：“你都怎么Debug的？”我一时竟然只能想出一个答案：打开DevTools看log。那时我的Debug原则就是“如果一个console.log找不出问题，就放入更多的console.log”。虽然有时候会觉得自己很傻，但是由于大多时候都能解决问题，便持续使用这个套路。
被问倒后的我开始反省：既然天天都要Debug，为何不加强自己的Debug技巧呢？掌握Debug技巧能够大幅地提升开发效率，而这正是贯穿本书的重点。
之所以写这本书，是因为我在2021年9月参加了以“你所不知道的各种前端Debug技巧”为主题的“iT邦帮忙铁人赛”。早在几年前我就听说过铁人赛，不过理解仅限于参赛者必须连续30天不中断发文，想想自己偶尔也会撰写技术文章，应该没有什么困难，当时有一位朋友参加铁人赛却未能完赛，我甚至感到有些意外。直到实际参赛时，才发现自己实在太天真了，为了能够尽可能地涵盖更多细节及制作流畅易懂的范例，一个月来几乎每天都能看到日出，所幸后来顺利完赛。本书就是基于原本参赛的文章，将技巧讲解部分抽出，并分类为不同的主题，同时加入更多内容及范例，Chrome DevTools用法则独立说明，以便提及更多细节。本书的整体架构经过修改后，变得更加通顺及容易理解，当然随之而来的又是另一段长期睡眠不足的日子。
本书能够顺利出版，首先得感谢当时邀请我参赛的ALPHA Camp团队，其中Tim身为当时的队长，多次拉我“入坑”，甚至在我犹豫不决时直接把我列入参赛名单，对于本书的润色及校稿也帮了大忙，雁婷的鼓励则是我完赛的关键，对于本书也提出了不少宝贵的建议；其次感谢博硕文化的编辑Sammi，为了本书的质量，她跟我进行了多次的讨论以及修改，最终得以整理成册；最后感谢我的家人对于内容的建议，大幅提升了文字的可读性，以及无论听到多少次“快写完了”都依然坚定地支持着我。
本书将从心态、通用方法开始切入Debug技巧，再深入至不同主题，如HTML、CSS、JavaScript、性能分析、用户体验、错误处理、工具等，并搭配范例程序代码进行说明，协助读者理解并应用到实际工作中。相信读者在阅读本书之后，能够更好地掌握Debug技巧并大幅提升开发效率。
为了方便读者学习，现将本书中范例程序的下载网址和参考网站的使用说明汇总在一个电子文档中，请读者扫描下方的二维码获取。若下载有问题，请把问题发送至电子邮箱booksaga@126.com，邮件主题写“Web前端开发Debug技巧”。
杨楚玄
2022年7月
|
|
購物車/收銀台(0) | 在線留言板
| 付款方式
| 運費計算
| 聯絡我們
| 幫助中心 |
加入書簽
HOME
新書上架
