[Day28] VSCode Plugin - Debug Visualizer

• Github 连结
• VSCode Marketplace
• Playground
• 推荐程度：⭐⭐⭐

在 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.json的tasks列表新增以下物件 -

   {
     "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 的资料结构被视觉化了。

另外不只静态资料的变数可以显示，连非同步回传的资料也可以。把 launch.json 的 program设为 demo_fetch.js，再重新执行除错。

当跑到中断点後，在 Debug Visualizer 的输入列打 json，就能以清楚明了的表格查看 API 回传的资料。

以下的参考资源，还有人整理更多应用跟使用教学，有兴趣的可以再前往看看喔!

参考资源

• Visualize Data Structures in VSCode
• Plotly JavaScript Open Source Graphing Library