在VSCode中能夠視覺化除錯資料的外掛 - addyosmani
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 外掛配置（中）VSCode
- 在VSCode中直接檢視Excel、CSV檔案的外掛VSCodeExcel
- 譯 Tim Rose 的kibana外掛教程-消費資料的視覺化外掛ROS視覺化
- 一個能夠讓你快速從html結構生成css結構的vscode外掛HTMLCSSVSCode
- vscode 外掛 PHP Intelephense 造成的錯誤提示VSCodePHPIntel
- VSCode中類似Postman的外掛VSCodePostman
- VScode外掛VSCode
- VScode 好用的外掛VSCode
- vscode 外掛視覺化製作和管理腳手架及原理解析VSCode視覺化
- （在模仿中精進資料視覺化03）OD資料的特殊視覺化方式視覺化
- chatgpt-vscode：在VSCode中使用ChatGPT的擴充套件外掛ChatGPTVSCode套件
- 使用 vscode 外掛視覺化製作和管理腳手架及原理解析VSCode視覺化
- 推薦一個很好用的vscode外掛：一個可以給出vuex中store定義資訊的vscode外掛VSCodeVue
- vscode常用外掛VSCode
- vscode外掛分享VSCode
- vscode外掛整理VSCode
- 能讓你開發效率翻倍的 VSCode 外掛配置（上）VSCode
- 頂針的 VScode 外掛VSCode
- 強大視覺特效合成外掛視覺特效
- vscode外掛列表及配置資訊VSCode
- 視覺化中的資料視覺化
- 在資料二十條中我們能夠發現什麼
- VSCode中6個AI頂級外掛VSCodeAI
- VScode外掛推薦VSCode
- VSCode外掛之BeautifyVSCode
- VSCode 外掛測試VSCode
- vscode常用python外掛VSCodePython
- 使用 VSCode Remote 外掛VSCodeREM
- vscode 外掛配置指北VSCode
- vscode外掛使用包VSCode
- VSCODE 外掛推薦VSCode
- vscode中隱藏節點模組的外掛VSCode
- IBM i Notebook的Vscode外掛IBMVSCode
- 在VsCode中幫你自動完成CSS變數的外掛：CSS Var CompleteVSCodeCSS變數
- vscode外掛報錯: problemmatcher 引用無效: $esbuild-watchVSCodeUI