機器之心報導
參與：思、jamin
DeBug 太枯燥？讓 VS Code 畫個圖，自動幫你理清數據結構與代碼思路，這就是 Reddit 2K 多點讚的開源新工具。
項目地址：https://github.com/hediet/vscode-debug-visualizer
寫代碼，難免會遇到各種神奇的問題，代碼短我們在腦海中「運行」一遍也就差不多能找出原因。但代碼要是比較長，錯誤就會隱藏比較深了，這個時候，不論你是採用 print() 大法，還是善用 assert 語句，或者乾脆設置斷點，DeBug 總是一條慢慢排除的道路。
之前機器之心曾介紹過極簡 DeBug 工具 PySnooper ，我們只需要向感興趣的函數增加一個裝飾器，就能得到該函數的詳細 log，包含哪行代碼能運行、什麼時候運行以及本地變量變化的確切時間等等。這個 GitHub 12.3K Star 量的 DeBug 工具，輸出風格是這樣色的：
左邊是運行信息，右邊是對應 NumPy 代碼。
這種複雜的 DeBug 工具，看起來就比較勸退。此外，在 PyCharm 上使用斷點調試，它輸出的也是各種變量的定義與值，同樣是一堆詳細信息。
那麼能不能有一種更優雅的 DeBug 方式，以更簡潔的信息快速幫我們找到代碼的問題所在？這就是 VS Code 最新推出的可視化 DeBug，它能以圖的方式快速展示數據結構。
我們先看看效果，如下動圖將斷點設置為第 32 行定義雙向鍊表，隨後一行行運行代碼就會在右圖展現出對應的數據結構圖。
這種可視化非常優雅，而且該工具也會根據數據結構以不同的方式展現，例如樹形、表格、曲線和圖等。如下動圖展示幾種不同的可視化方式：
效果上確實非常驚艷，它與之前的 DeBug 方式採用完全不同的展現形式。目前該 VS Code Debug Visualizer 在 JavaScript/TypeScript 上有比較好的效果，在 C#、Java 和 PHP 上也正在積極測試，其它語言也還都能用。
正確的使用姿勢
安裝此擴展程序後，使用命令< Open a new Debug Visualizer View >打開新的可視化視圖。在此視圖裡，設置斷點逐步執行後，表達式的執行與動態可視化都會展示在裡面。右上角的刷新鍵可將當前的可視化工具視圖彈出到新的瀏覽器窗口，同時還可以通過展開詳細信息的窗口去選擇數據提取器以及可視化調試器。
可視化調試器使用的是特定的 JSON 數據，相關支持的 JSON 數據模式可參考原 GitHub 項目。
當前的可視化表達式應該是作為 JSON 對象字符串來進行運算的，並與所支持的可視化調節器相匹配。而這個 JSON 字符串可能被單引號或者雙引號所包含（也有可能沒有引號），因此不能忽略轉義符。
舉一個案例：
"{ "kind": { "text": true }, "text": "some text\nmore text" }".
對於 TypeScript/JavaScript 等語言，因為已經集成了數據抽取器，因此可以直接自動可視化。而其它沒有數據抽取器的語言，就需要自定義數據結構與可視化器之間的關係了
多種可視化器皆可定製
該擴展還內置了其他可自定義的可視化調節器，尤其在 debug 時使用起來非常直觀，可以根據面對不同的處理對象，可選擇更易於理解的可視化方式。比如圖表可視化，Plotly 可視化，Tree 可視化，網格可視化，文本可視化等等。在其種類非常豐富的同時，操作性也較為簡便，效果非常直觀，小編選取了幾種類型作為案例：
Plotly 可視化
AST 可視化
在使用 AST 可視化還會呈現原始碼，在選擇其節點時，還會突出顯示原始碼中的跨度。
Python 怎麼解？
我們讀者最常用的就是 Python 語言，然而遺憾的是，Debug Visualizer 並不支持 Python 數據結構的自動可視化。不過，Python 開發者還是非常熱情的，他們嘗試手動添加自定義可視化功能。
項目維護者正在討論添加對 Python 的支持。
那麼如果要手動調用 Debug Visualizer，開發者在 Demo 中新提交了一個 Python 示例。我們需要以 JSON 格式來表示數據，並完成自定義可視化，注意該 JSON 需要滿足 Debug Visualizer 的格式定義。
如果在循環語句中設置斷點，那麼就可以導入 json_graph 來可視化結果，如下所示為 10 個節點的可視化展示。
在 Reddit 社區上，也有很多開發者在討論 Python 是不是能用，有沒有更便捷的方式自動可視化 DeBug，而不是在 DeBug 前還需要手動先配置一番。
VS Code Debug Visualizer 確實非常酷，但支持 Python 的它會更有意思。現在不論是項目維護者還是其它開發者，都在關注這個問題，期待過一段時間它能完美支持 Python。
參考連結：https://www.reddit.com/r/programming/comments/f88zom/i_made_an_extension_for_visual_debugging_in_vs/