VSCode Debug Visualizer是一個VSCode擴展，它允許您在編輯器中可視化數據結構。這對于在調試期間可視化監視值非常有用。我發現這個擴展可以幫助可視化圖形、表、數組、直方圖和樹。

安裝擴展之后，打開一些相關的腳本，然后導航到命令面板，并進入Debug Visualizer: New View。此視圖允許您輸入在單步執行代碼時可視化的表達式。它與VS代碼的watch視圖非常相似，其核心區別在于結果是可視化的，而不是以文本格式顯示。

如果您選擇了要可視化的文本，那么Debug Visualizer:使用selection as表達式可以計算在您打開的最后一個Debug Visualizer窗口中選擇的當前文本。

VSCode Debug Visualizer的JavaScript示例包含在主存儲庫中。要開始使用它們，請檢查是否安裝了紗線和節點，然后:

在本地克隆存儲庫。完成之后，導航到demos/js目錄。

運行紗線來安裝依賴項。我需要手動運行yarn add @hediet/調試-visualizer-data extraction來讓一切正常運行。

在VSCode中打開repo并選擇一個示例。如demo_doubly-linked-list.ts

在源代碼的某個地方添加斷點/調試器語句(例如第50行)。

進入運行>開始調試并選擇一個環境(例如Node.js(預覽))。

從命令面板中，選擇Debug Visualizer: New View。

現在，您應該能夠在提示符中輸入visualize()，并在編輯器中看到雙重鏈接列表的可視化圖形.

在您自己的示例中嘗試擴展之前，請注意，您希望可視化的表達式必須計算為一個JSON對象字符串，并與擴展所支持的一個可視化器的模式(數組等簡單數據類型之外)匹配。在下面的例子中，注意“kind”:{“graph”:true}、“kind”:{“plotly”:true}等條目，它們是這個模式的一部分。