介紹

在我們寫程式碼得時候，最麻煩的事是出現錯誤很難定位到問題，特別是程式碼特別長的時候，錯誤隱藏的很深的時候，不管是 debugger 還是 console.log，亦或用瀏覽器的除錯工具打斷點，都是需要慢慢一條一條的排錯。

這些除錯方式都是需要我們大腦去思考、去排錯，那有沒有一種方式更方便，能將結果以圖的形式展示給我們看，並且將過程展示給我們看呢？

這裡我們介紹一個神器：vscode-debug-visualizer

它提供了一種以圖表的形式展示資料結構形成程的過程，有樹形、表格、曲線、圖等。

這種展示形式，不僅可以幫我們在程式碼除錯的時候用到，而且在學習資料結構、演算法、刷 Leecode 的時候也可以用到，它會讓你很清晰的看到資料生成的過程。

使用方式

安裝

首先在 VS Code 的外掛庫中搜索 debug-visualizer, 然後安裝。

使用步驟

• 開啟需要除錯的程式碼檔案
• 選擇需要除錯的地方打上斷點
• 啟動除錯
• Ctrl + Shift + P 開啟命令面板，輸入 Debug Visualizer: New View 開啟一個新的視覺化視窗
• 在視覺化視窗輸入需要展示的資料表示式
• 按 F10 開始除錯，在視覺化視窗中就是展示出資料的圖表