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

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

缘起

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

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

系列内容

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

每天都会开启浏览器的Devtools

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

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

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

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

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

讲讲DevTools 之外的Debug 方式

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

上网搜寻

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

询问周遭

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

不要钻牛角尖

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

放松身心

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

问题与讨论

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