iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 1
18
Modern Web

你所不知道的各種前端 Debug 技巧系列 第 1

[Day 01] 既然天天都要 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 流程,筆者認為這是非常有價值的經驗分享。而對內容有任何疑問,或有發現任何錯誤,也請不吝提出,謝謝。


下一篇
[Day 02] 你所知道的 Chrome DevTools
系列文
你所不知道的各種前端 Debug 技巧30

2 則留言

0
Yenting
iT邦新手 5 級 ‧ 2020-09-14 23:18:46

終於等到了~ 好期待之後的文章XD

pjchender iT邦新手 5 級 ‧ 2020-09-14 23:48:00 檢舉

期待!!

0
harry xie
iT邦新手 4 級 ‧ 2020-09-15 10:47:17

學長好哈哈哈!!

我要留言

立即登入留言