項目地址：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/

【本文是51CTO專欄機構“機器之心”的原創譯文，微信公眾號“機器之心( id: almosthuman2014)”】 

戳這里，看該作者更多好文