來自機器之心

有沒有一種更優雅的 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://github.com/hediet/vscode-debug-visualizer

參考鏈接：https://www.reddit.com/r/programming/comments/f88zom/i_made_an_extension_for_visual_debugging_in_vs/

由于微信平臺算法改版，公號內容將不再以時間排序展示，如果大家想第一時間看到我們的推送，強烈建議星標我們和給我們多點點【在看】。星標具體步驟為：（1）點擊頁面最上方“小詹學Python”，進入公眾號主頁。 （2）點擊右上角的小點點，在彈出頁面點擊“設為星標”，就可以啦。 感謝支持，比心。

總結

以上是生活随笔為你收集整理的实时可视化 Debug：VS Code 开源新工具，一键解析代码结构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。