最近在網上看到有人在推 vscode-debug-visualizer 這個神器，想了解一下做個對比
介紹
在我們寫代碼得時候，最麻煩的事是出現錯誤很難定位到問題，特別是代碼特別長的時候，錯誤隱藏的很深的時候，不管是 debugger 還是 console.log，亦或用瀏覽器的調試工具打斷點，都是需要慢慢一條一條的排錯。
這些調試方式都是需要我們大腦去思考、去排錯，那有沒有一種方式更方便，能將結果以圖的形式展示給我們看，並且將過程展示給我們看呢？
這里我們介紹一個神器：vscode-debug-visualizer
它提供了一種以圖表的形式展示數據結構形成程的過程，有樹形、表格、曲線、圖等。
這種展示形式，不僅可以幫我們在代碼調試的時候用到，而且在學習數據結構、算法、刷 Leecode 的時候也可以用到，它會讓你很清晰的看到數據生成的過程。
使用方式
安裝
首先在 VS Code 的插件庫中搜索 debug-visualizer, 然后安裝。
使用步驟
- 打開需要調試的代碼文件
- 選擇需要調試的地方打上斷點
- 啟動調試
Ctrl + Shift + P打開命令面板，輸入Debug Visualizer: New View打開一個新的可視化窗口- 在可視化窗口輸入需要展示的數據表達式
- 按
F10開始調試，在可視化窗口中就是展示出數據的圖表
一個可視化窗口只能調試一個文件，可以打開多個窗口同時調試。如果按下 Shift+ F1 或者輸入命令：Debug Visualizer: Use Selection as Expression 就是調試選中的文本
輸入規則
可能到這里大家對可視化窗口中輸入框中輸入的內容有點好奇，這里面到底能輸入什么。圖表展示是必須要用 JSON 數據才能展示，大家可以到 Visualization Playground 這里看看，可以有哪些 JSON 類型的數據
而輸入框里面，我們可以輸入 變量名、數組、函數、JSON 三種類型的數據，然后插件內部會自動換換成對應的圖表 JSON 數據，如果實在轉換不了就會執行 toString
API
我們有兩種方式可以開始調試，一種方式是在輸入框中輸入調試規則代碼，還有一種是在代碼內部寫調試規則代碼。
如果是在輸入框中，我們可以使用插件暴露出來的 hedietDbgVis 全局對象。
hedietDbgVis對外提供了 7 個方法：createGraph、createGraphFromPointers、tryEval、markedGrid、cache、asData、getApi。這幾個都是插件中的 helper。
我們要注意一下，提供出來的幾個 helper 都是針對復雜的數據類型，例如鏈表、雙向鏈表、樹、圖之類的，如果是數據結構相對簡單，出現的情況可能不是很理想。
我想重點講講 createGraphFromPointers，因為其實在 createGraphFromPointers 中執行了 createGraph，兩個函數是一樣的，只是在 createGraphFromPointers 中做了一些數據處理
createGraphFromPointers
這個主要是用來畫圖表的，提供兩個參數，一個是代碼中的變量，如果你的代碼結構如下
class LinkedList {
constructor() {
this.head = null;
}
}
class Node {
constructor(data, next = null) {
(this.data = data), (this.next = next);
}
}
LinkedList.prototype.insertAtBeginning = function(data) {
let newNode = new Node(data);
newNode.next = this.head;
this.head = newNode;
return this.head;
};
const list = new LinkedList();
list.insertAtBeginning("4");
list.insertAtBeginning("3");
list.insertAtBeginning("2");
list.insertAtBeginning("1");
我們的調試代碼的寫法是：
hedietDbgVis.createGraphFromPointers(
hedietDbgVis.tryEval([
"list.head",
"newNode",
"node",
"previous",
this.constructor.name === "LinkedList" ? "this.head" : "err",
]),
n => ({
id: n.data,
color: "lightblue",
label: `${n.data}`,
edges: [{ to: n.next, label: "next" }].filter(i => !!i.to),
})
)
大家可以看到 createGraphFromPointers 傳入兩個參數，第一個參數是需要將代碼中的那些變量傳遞到圖表中，第二個參數是獲取第一個參數中的數據作為圖表的配置。例如上面的意思：
id: n.data 獲取第一個參數中每一項中的 data
color: "lightblue" 圖表顏色
label: `${n.data}` 圖表上顯示什么內容
edges: [{ to: n.next, label: "next" }].filter(i => !!i.to)
這個就是圖表下一個節點顯示什么內容，如果加了這個，這個數據中的每一項肯定是對象了
getDataExtractorApi
還有這個函數，主要是用來自定義數據提取的，因為 createGraphFromPointers 已經定死了用的是 Graph 類型的圖表，如果我們不想用這個圖表怎么弄？就可以用到 getDataExtractorApi
結論
使用了差不多兩天的時間，實際上給我的感覺並不是很好：
- API 文檔不詳細，很多都沒說，要自己研究
- 提供出來展示的形式很少，大部分用的就是折線圖和關系樹圖
- 由於提供的圖較少，因此我們可以調試的類型不是很多，大部分就是數組，數組嵌套對象
這個神器在用折線圖表現數組的時候確實非常直觀，非常推薦大家在做一些矩陣或者做一些三維計算的時候，還有一些動態規划算法的時候，可以用到，比較直觀
還有關系樹圖用來學習鏈表、雙向鏈表、圖、樹的算法和數據結構的時候，完全就是神器，以前要自己大腦去畫圖，現在直接看就行了
也可能是我才疏學淺，了解的不夠多，如果大家有新的發現，可以給我留言