將想觀察的變數印出

• print('hello world')
• console.log('hello world')
• System.out.print("hello world")

這是我們最熟悉的debug方式，也正是如此作為初學的我們很容易忽略一個更好的的除錯方式 - 「debug mode」。

Debug Mode in VS Code

以常見的VS Code來說，官方有好幾個頁面是在介紹debug mode的

• intro debug mode
• Python debugging in VS Code
• Debugging TypeScript

Debug Mode in 瀏覽器

瀏覽器也有debug mode，妥善使用瀏覽器的開發者工具是前端工程師的必備技能之一!!

• Chrome - Debug JavaScript
• Edge - Get started debugging JavaScript

大部分Debug Mode會有的幾顆按鈕

最少都會有四個按鈕

• 結束目前的中斷點，尋找下個中斷點
• 執行目前這行然後到下一行等待新的指令
• 執行目前這行的function
• 跳出目前執行的function，回到上個Stack

以瀏覽器來舉例

可以先記住快捷鍵，看文字敘述一定對debug mode沒感覺

影片支援

• YT搜尋debug mode chrome
• YT搜尋debug mode vscode

後記:
會寫這一篇是因為我有很多學生快結訓都還不太熟悉使用debug工具，每次他們看我debug都像是發現新大陸一樣，但其實這些工具一直都在旁邊等著我們去使用，所以有空閒的話還是很值得投資學習這項工具的，畢竟身為軟體工程師誰能不寫出幾個精美的bug呢?

圖片來源: https://www.pexels.com/zh-tw/photo/979927/