在VSCode中能夠視覺化除錯資料的外掛 - addyosmani

banq發表於2020-09-25

VSCode除錯視覺化器是VSCode擴充套件,這對於在除錯Javascript時視覺化執行中值很有用,還能讓視覺化值的資料結構,視覺化的形式有:圖,表,陣列,直方圖和樹。

安裝擴充套件程式後,開啟一些相關的指令碼,然後導航到命令皮膚並轉到Debug Visualizer: New View。此檢視使您可以輸入逐步瀏覽程式碼時視覺化的表示式。
VSCode Debug Visualizer的JavaScript示例包含在主儲存庫中。要開始使用它們,檢查是否具有yarn和node安裝,則:

  • 在本地克隆儲存庫。完成後,導航到demos/js目錄。
  • 執行yarn以安裝依賴項。我需要手動執行yarn add @hediet/debug-visualizer-data-extraction才能使所有功能正常執行。
  • 在VSCode中開啟倉庫,然後選擇一個示例。例如demo_doubly-linked-list.ts

1.debugger在原始碼的某處新增斷點/ 語句(例如,第50行)。
2. 轉到執行>開始除錯,然後選擇一個環境(例如Node.js (preview))。
3. 在命令皮膚中,選擇Debug Visualizer:New View。
現在,您應該能夠進入visualize()提示並在編輯器中看到雙向連結列表的圖解視覺化:

在VSCode中能夠視覺化除錯資料的外掛  - addyosmani

相關文章