在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()提示並在編輯器中看到雙向連結列表的圖解視覺化:
相關文章
- 自定義視覺化除錯工具視覺化除錯
- 資料視覺化在智慧社群中能夠發揮什麼作用?視覺化
- 資料視覺化在智慧園區中能夠發揮什麼作用?視覺化
- iOS 測試工具reveal視覺化除錯工具的使用iOS視覺化除錯
- 能讓你開發效率翻倍的 VSCode 外掛配置(中)VSCode
- 譯 Tim Rose 的kibana外掛教程-消費資料的視覺化外掛ROS視覺化
- 在VSCode中直接檢視Excel、CSV檔案的外掛VSCodeExcel
- Maven讓資原始檔處理外掛能夠解析資原始檔中的Maven屬性Maven
- 一個能夠讓你快速從html結構生成css結構的vscode外掛HTMLCSSVSCode
- (在模仿中精進資料視覺化03)OD資料的特殊視覺化方式視覺化
- VSCode中類似Postman的外掛VSCodePostman
- 視覺化中的資料視覺化
- 強大視覺特效合成外掛視覺特效
- 在資料二十條中我們能夠發現什麼
- vscode 外掛視覺化製作和管理腳手架及原理解析VSCode視覺化
- VScode外掛VSCode
- vscode 外掛 PHP Intelephense 造成的錯誤提示VSCodePHPIntel
- 使用 vscode 外掛視覺化製作和管理腳手架及原理解析VSCode視覺化
- 能讓你開發效率翻倍的 VSCode 外掛配置(上)VSCode
- vscode中隱藏節點模組的外掛VSCode
- vscode外掛分享VSCode
- vscode外掛整理VSCode
- vscode常用外掛VSCode
- chatgpt-vscode:在VSCode中使用ChatGPT的擴充套件外掛ChatGPTVSCode套件
- 頂針的 VScode 外掛VSCode
- (在模仿中精進資料視覺化09)近期基金漲幅排行視覺化視覺化
- VSCode中6個AI頂級外掛VSCodeAI
- 資料視覺化在展廳中可以體現的優勢視覺化
- (在模仿中精進資料視覺化01) 全國38城居住自由指數視覺化視覺化
- VScode外掛推薦VSCode
- 使用 VSCode Remote 外掛VSCodeREM
- VSCode外掛之BeautifyVSCode
- vscode外掛使用包VSCode
- vscode 外掛配置指北VSCode
- VSCode 外掛測試VSCode
- VSCODE 外掛推薦VSCode
- Flutter中的資料視覺化charts家族Flutter視覺化
- 翻譯 Tim Rose 的kibana外掛教程-簡單視覺化外掛ROS視覺化