前   言

对于软件开发者来说，无论采用哪种程序设计语言，都需要花费大量时间在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月