【Debug】既然天天都要Debug，何不从Debug技能着手呢?第一天

相信Debug 是开发者每天必经的过程&＃xff0c;能否顺利Debug 决定了开发者一整天的心情&＃xff0c;即使如此却较少看到开发者着墨在Debug 技巧上&＃xff0c;因此接下来的30 天中&＃xff0c;我将会介绍各种前端Debug 技巧&＃xff0c;还有我常用的小技巧&＃xff0c;解救那些时常陷于Debug 之苦却难以脱身的网页开发者们。

缘起

一切的开始&＃xff0c;就在第一次面试实习机会时&＃xff0c;主考官问我&＃xff1a;「你都怎么Debug&＃xff1f;」我一时竟然只能想出一个答案&＃xff1a;「开DevTools 看console.log。」那时候我的Debug原则就是「如果一个console.log 找不出问题&＃xff0c;就放入更多的console.log&＃xff01;」虽然有时候会觉得自己很傻&＃xff0c;不过大多时候还是能找出问题&＃xff0c;便持续使用这个套路一路向前。

被问倒之后我开始反省自己的Debug 方式&＃xff0c;明明每天都在使用DevTools&＃xff0c;却总是只用到console.log&＃xff0c;赶紧上网搜寻别人都是怎么解决问题的&＃xff0c;看过一篇又一篇的文章后&＃xff0c;惊觉自己对DevTools 的理解只是冰山一角&＃xff0c;有太多好用的功能我竟然浑然不知&＃xff0c;从此开启了我对DevTools 的摸索之路。

系列内容

这系列文章的内容主要围绕在前端相关的Debug 技巧&＃xff0c;只要你有网页开发经验&＃xff0c;尤其&＃xff1a;

每天都会开启浏览器的Devtools

常常需要刻UI 以及撰写许多HTML、CSS

以Javascript 维生
需要进行前端性能、SEO 优化

都非常推荐阅读&＃xff0c;这项目的内容将会以Chrome DevTools 为主&＃xff0c;包含各个功能面板以及实用技巧及带入实际的Debug 情境协助理解&＃xff0c;大部分的情境都是来自于笔者自己在开发过程中遇到的问题&＃xff0c;或是曾经看过觉得十分有趣的例子&＃xff0c;建议读者可在阅读文章时候搭配Demo 实际操作&＃xff0c;帮助记忆及理解。

此外本系列大部分的章节是独立的&＃xff0c;阅读顺序并不会造成太大的影响&＃xff0c;除了Chrome DevTools 之外&＃xff0c;还会提到关于Web Vitals、SEO 等网页指标的Debug 工具、与其他浏览器DevTools 的比较以及效能优化的议题&＃xff0c;尽可能的涵盖各种前端Debug 情境。

以上为Core Web Vitals&＃xff0c;是Google 在2020 年提出的核心网页体验指标

讲讲DevTools 之外的Debug 方式

Debug 时除了使用DevTools 之外&＃xff0c;还有许多解决问题的方式&＃xff0c;以下列出笔者自身的一些经验。

上网搜寻

许多问题可以靠Google 快速找到答案&＃xff0c;当然也会有碰壁的时候&＃xff0c;笔者刚在编程之路起步时&＃xff0c;常常无法解决问题&＃xff0c;然而经过一段时间后明显发觉Google 的能力提升了&＃xff0c;能从更多的面向、资源去寻找答案&＃xff0c;例如比起从Stack Overflow找到直接的答案&＃xff0c;主动阅读MDN 文件、官方说明的FAQ 和Caveats、GitHub Issues 甚至是规范等时常会包含许多有用的信息。

询问周遭

向有经验的人、社群提问也是非常有效的方式&＃xff0c;但前提是已经做过功课、走过研究的步骤&＃xff0c;千万不要却步于提问&＃xff0c;只要做好充足的准备&＃xff0c;大部分的人都很乐于协助解决问题。另外提出明确的问题和足够的信息才能让大家对症下药&＃xff0c;例如碰到难解的Bug 时&＃xff0c;若其他人能够重现相同的错误&＃xff0c;几乎100% 能够解决问题。

不要钻牛角尖

若发现无论怎么搜寻都难以找到解法&＃xff0c;甚至都只有无关的信息&＃xff0c;非常有可能是搜寻方向错了&＃xff0c;例如实际出错的部分不是正在搜寻的套件&＃xff0c;可能只是单纯程式码拼错、手误&＃xff0c;才会出现特别的错误信息。笔者就曾经因为不小心按到Tab&＃xff0c;让编辑器自动加入一些语法&＃xff0c;程式开始奇怪的错误&＃xff0c;找了一整天才发现问题所在。

放松身心

此外笔者认为放松也是Debug 重要的一环&＃xff0c;当已经卡在某个Bug 几个小时&＃xff0c;试试放松一下心情&＃xff0c;离开键盘散步、买杯饮料&＃xff0c;笔者就有不少次在洗澡的时候突然想到问题的解法呢&＃xff01;

问题与讨论

最后&＃xff0c;对内容中提到的Debug 情境有不同甚至更好的解决方式、思维&＃xff0c;都非常欢迎提出讨论&＃xff0c;借此来交流一下Debug 流程&＃xff0c;笔者认为这是非常有价值的经验分享。而对内容有任何疑问&＃xff0c;或有发现任何错误&＃xff0c;也请不吝提出&＃xff0c;谢谢。