VSCode Debug Visualizer是一個(gè)VSCode擴(kuò)展，它允許您在編輯器中可視化數(shù)據(jù)結(jié)構(gòu)。這對(duì)于在調(diào)試期間可視化監(jiān)視值非常有用。我發(fā)現(xiàn)這個(gè)擴(kuò)展可以幫助可視化圖形、表、數(shù)組、直方圖和樹(shù)。

安裝擴(kuò)展之后，打開(kāi)一些相關(guān)的腳本，然后導(dǎo)航到命令面板，并進(jìn)入Debug Visualizer: New View。此視圖允許您輸入在單步執(zhí)行代碼時(shí)可視化的表達(dá)式。它與VS代碼的watch視圖非常相似，其核心區(qū)別在于結(jié)果是可視化的，而不是以文本格式顯示。

如果您選擇了要可視化的文本，那么Debug Visualizer:使用selection as表達(dá)式可以計(jì)算在您打開(kāi)的最后一個(gè)Debug Visualizer窗口中選擇的當(dāng)前文本。

VSCode Debug Visualizer的JavaScript示例包含在主存儲(chǔ)庫(kù)中。要開(kāi)始使用它們，請(qǐng)檢查是否安裝了紗線(xiàn)和節(jié)點(diǎn)，然后:

在本地克隆存儲(chǔ)庫(kù)。完成之后，導(dǎo)航到demos/js目錄。

運(yùn)行紗線(xiàn)來(lái)安裝依賴(lài)項(xiàng)。我需要手動(dòng)運(yùn)行yarn add @hediet/調(diào)試-visualizer-data extraction來(lái)讓一切正常運(yùn)行。

在VSCode中打開(kāi)repo并選擇一個(gè)示例。如demo_doubly-linked-list.ts

在源代碼的某個(gè)地方添加斷點(diǎn)/調(diào)試器語(yǔ)句(例如第50行)。

進(jìn)入運(yùn)行>開(kāi)始調(diào)試并選擇一個(gè)環(huán)境(例如Node.js(預(yù)覽))。

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

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

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