iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
0
Software Development

前端工程師不能不知道的生產力工具系列 第 28

[Day28] VSCode Plugin - Debug Visualizer

在 VSCode 除錯,除了可以進行基本的中斷點設定,來觀察變數的數值變化以外,現在還有位神人,開發一個能將變數的資料視覺化的工具。而且呈現的圖表跟結構非常多樣,也可以在除錯過程中動態展示資料的變化,相當的神奇。

不過由於他的功能太過強大,因此需要點時間熟悉對應指令,以及環境的建立。一開始可以先去 Playground 玩玩看有哪些圖表呈現。或者可以先 clone 專案下來練習看看。

目前該工具支援度最高的語言是 Javascript 跟 Typescript。我們先用 VSCode 打開 demos/js目錄來試玩看看。

在執行除錯前有幾個前置步驟 -

  1. yarn install安裝依賴
  2. .vscode/目錄新增 launch.json
    {
      // 使用 IntelliSense 以得知可用的屬性。
      // 暫留以檢視現有屬性的描述。
      // 如需詳細資訊,請瀏覽: https://go.microsoft.com/fwlink/?linkid=830387
      "version": "0.2.0",
      "configurations": [
        {
          "type": "node",
          "request": "launch",
          "name": "Launch Program",
          "skipFiles": ["<node_internals>/**"],
          "program": "${workspaceFolder}\\src\\demo_doubly-linked-list.ts",
          "preLaunchTask": "tsc: build - tsconfig.json",
          "outFiles": ["${workspaceFolder}/dist/**/*.js"]
        }
      ]
    }
    
  3. .vscode/tasks.jsontasks列表新增以下物件 -
    {
      "type": "typescript",
      "tsconfig": "tsconfig.json",
      "problemMatcher": ["$tsc"],
      "group": "build",
      "label": "tsc: build - tsconfig.json"
    }
    

完成後,我們到 launch.json 設定的 program路徑 - demo_doubly-linked-list.ts下中斷點。

接著就可以按F5執行除錯功能。跑起來後再按F1開啟指令列,輸入 Debug Visualizer: New View,就能開啟 Debug Visualizer 的顯示頁面。

當跑到中斷點後,在 Debug Visualizer 的輸入列打 visualize(),就能看到 list 的資料結構被視覺化了。

gif

另外不只靜態資料的變數可以顯示,連非同步回傳的資料也可以。把 launch.json 的 program設為 demo_fetch.js,再重新執行除錯。

當跑到中斷點後,在 Debug Visualizer 的輸入列打 json,就能以清楚明瞭的表格查看 API 回傳的資料。

gif

以下的參考資源,還有人整理更多應用跟使用教學,有興趣的可以再前往看看喔!

參考資源


上一篇
[Day27] VSCode Plugin - WakaTime
下一篇
[Day29] VSCode Plugin - Other
系列文
前端工程師不能不知道的生產力工具30

尚未有邦友留言

立即登入留言