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

banq發表於2020-09-25
VSCode視覺化除錯

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

相關文章