写点什么

VS Code 调试太难?这款可视化代码调试工具值得拥有

  • 2020-02-27
  • 本文字数:2013 字

    阅读完需:约 7 分钟

VS Code调试太难?这款可视化代码调试工具值得拥有

这是一个在调试期间可视化数据结构的 VS Code 扩展,使用它之后,你可以清晰明了的看到不同数据之间的关系。


一个名叫 hediet 的外国程序员开源了一个在调试期间可视化数据结构的 VS Code 扩展——Debug Visualizer。



这个扩展程序可以在 VS Code 中调试任何编程语言,当然,目前最适配的编程语言是 JavaScript 和 TypeScript,另外 C#、Java 和 PHP 也进行了相应的测试。

如何安装使用?

安装此扩展后,使用命令 Open a new Debug Visualizer View 打开新的可视化器视图。在这个视图中,你可以输入一个表达式,该表达式在逐步分析你的代码时会进行评估和可视化,例如


    kind: { graph: true },    nodes: [ { id: "1", label: "1" }, { id: "2", label: "2" } ],    edges: [{ from: "1", to: "2", label: "edge" }]}
复制代码


你可以通过编写自己的函数,从自定义数据结构中提取这些调试数据。

哪些数据可被可视化呢?

很多人可能会问,这个可视化代码调试工具都支持哪些东西可视化呢?基本上你能想到的,它都可以做到可视化。

图形可视化

Graphviz 和 Vis.js 可视化工具可以渲染与 Graph 界面匹配的数据。


interface Graph {  kind: { graph: true };  nodes: NodeGraphData[];  edges: EdgeGraphData[];}
interface NodeGraphData { id: string; label?: string; color?: string; shape?: "ellipse" | "box";}
interface EdgeGraphData { from: string; to: string; label?: string; id?: string; color?: string; dashes?: boolean;}
复制代码


graphviz 可视化工具可以通过使用 SVG 查看器来查看 viz.js 创建的 SVG。


Plotly 可视化

plotly visualizer 可以通过 plotly 来渲染与界面匹配的 JSON 数据。


export interface Plotly {  kind: { plotly: true };  data: Partial<Plotly.Data>[];}// See plotly docs for Plotly.Data.

复制代码


Tree 可视化

树可视化器渲染与 Tree 接口匹配的数据。


interface Tree<TData = unknown> {  kind: { tree: true };  root: TreeNode<TData>;}interface TreeNode<TExtraData> {  id: string | undefined;  name: string;  value: string | undefined;  emphasizedValue: string | undefined;  children: TreeNode<TExtraData>[];  data: TExtraData;  isMarked: boolean;}

复制代码


AST 可视化

AST 可视化工具渲染与 Ast 接口匹配的数据。


interface Ast  extends Tree<{      position: number;      length: number;    }>,    Text {  kind: { text: true; tree: true; ast: true };}
复制代码


除了树视图外,AST 可视化工具还会高亮显示源代码的来源。


Grid 可视化

Grid 可视化工具会渲染与以下接口匹配的数据。


export interface Grid {  kind: { array: true };  columnLabels?: { label?: string }[];  rows: {    label?: string;    columns: {      content?: string;      tag?: string;      color?: string;    }[];  }[];  markers?: {    id: string;
row: number; column: number; rows?: number; columns?: number;
label?: string; color?: string; }[];}
复制代码

Text 可视化

文本可视化工具渲染与 Text 接口匹配的数据。


interface Text {  kind: { text: true };  text: string;  mimeType?: string;  fileName?: string;}
复制代码


mimeType 和 fileName 的文件扩展名用于语法高亮显示。

SVG 可视化

SVG 可视化工具渲染与 Svg 接口匹配的数据。实际的 SVG 数据必须存储在 text 中。


interface Svg extends Text {  kind: { text: true; svg: true };}
复制代码


点图可视化


点图可视化工具渲染与 DotGraph 接口匹配的数据。


interface DotGraph extends Text {  kind: { text: true; dotGraph: true };}
复制代码


Viz.js(Graphviz)用于渲染。

哪些数据可被提取?

该工具中包含有 JavaScript/TypeScript 数据提取器,数据提取器可将任意值转换为可视化数据。这个扩展会自动在被调试者中注入以下数据提取器,当然用户也可以注册自定义数据提取器。

ToString

只需对值调用 .toString() ,就可将数据转换为文本类型。

TypeScript AST

  • 直接可视化 ts.Node

  • Record 和 [ts.Node] 的可视化。如果记录包含 fn 键,则将为每个节点显示它们的值。

As Is 数据提取器

将数据直接输入到可视化工具。

使用方法 getDebugVisualization

调用 .getDebugVisualization(),就可将数据转换为可视化工具的直接输入。

Plotly y-Values

使用 plotly 绘制数字数组。

对象图

构造一个图形,其中包含从表达式求值到的对象可到达的所有对象。使用广度搜索构造图,在 50 个节点后停止。

Array Grid

可以为数组数据创建 Grid visualization。

其它事项

该扩展支持多行表达式,例如点击 shift+enter 可添加新行,点击 ctrl+enter 可计算表达式。当只有一行时, enter 是提交当前表达式,当有多行时,enter 插入另一个换行符。



经过该扩展程序开发者的测试,可与 TypeScript / JavaScript 库一起很好地工作。


GitHub 开源地址:


https://github.com/hediet/vscode-debug-visualizer/tree/master/extension


2020-02-27 14:555430

评论

发布
暂无评论
发现更多内容

柔性电子拥有改变地球的能力吗?

脑极体

GitMaster 更新v1.9.0,支持Gitea,Gist拥抱黑暗模式

neo

gitlab tree gitee GitHub、

软件开发丨关于软件重构的灵魂四问

华为云开发者联盟

软件 开发者 软件开发 代码 软件重构

温故知新——Spring AOP(二)

牛初九

spring aop ioc

我也没想到 Springboot + Flowable 开发工作流会这么简单

程序员小富

java 14

币期权DAPP 8月28日全球同步耀世上线,掀起币圈追捧热潮

InfoQ_967a83c6d0d7

CRM企业到底该不该做PaaS?

ToB行业头条

PaaS SaaS CRM

从6大应用场景,看边缘计算落地生根

BoCloud博云

容器 边缘计算 PaaS 云平台 博云

莱卡、宾利都在用,英特尔oneAPI渲染工具带来高质量视觉体验

E科讯

mPaaS 客户端证书错误避坑指南

阿里云金融线TAM SRE专家服务团队

有为而治:平衡吞噬世界的系统之熵

IT民工大叔

LeetCode题解:155.最小栈,使用两个栈,详细注释

Lee Chen

大前端 LeetCode

微服务架构下,DLI的部署和运维有何奥秘?

华为云开发者联盟

Docker 大数据 Serverless 数据湖 DLI

分享一个阿里云轻量级开源前端图编排,流程图js组件——butterfly-dag

InfoQ_39ba186c207f

Java 流程图 flow canvas html/css

涵盖多场景区块链与政务结合 应用前景广阔

CECBC

区块链 互联网 数字政务

硬核科技:莱克立式吸尘器,引领家居清洁“新态度”

InfoQ_967a83c6d0d7

ShardingSphere简介+实战

云淡风轻

ShardingJDBC

数据挖掘学习指南(转载)

Jackchang234987

数据挖掘 产品经理

华为云会议的前世今生

华为云开发者联盟

直播 云服务 华为云 视频编码 视频会议

新金融分布式架构之SOFAStack解决方案

阿里云金融线TAM SRE专家服务团队

开发者的福音,LR.NET模块化代码生成器

Philips

敏捷开发 快速开发 模块化流程 代码质量 .net core

屏幕共享接入指南

anyRTC开发者

WebRTC 在线教育 直播 RTC

“全球+”浪潮下,企业出海选择合适的“技术船舶”成关键

华为云开发者联盟

网络 华为云 企业出海 网络加速 宽带

全民加速节:动态加速在在线教育应用上的最佳实践

阿里云Edge Plus

在线教育 CDN

oeasy教您玩转linux010106这儿都有啥 ls

o

GrowingIO AWS 成本优化之路

GrowingIO技术专栏

AWS 成本优化

学习Python真的能找到工作吗?

代码制造者

Python 程序员 编程语言 低代码 零代码

【写作群星榜】8.15~8.28 写作平台优秀作者 & 文章排名

InfoQ写作社区官方

写作平台 排行榜 热门活动

云原生技术采用增加,全球60%后端开发人员都在使用容器 | 趋势分享

BoCloud博云

云计算 容器 云原生 PaaS 博云

MySQL redo与undo日志解析

Simon

MySQL Redo MySQL日志

不得不了解系列之限流

梦朝思夕

限流

VS Code调试太难?这款可视化代码调试工具值得拥有_语言 & 开发_hediet_InfoQ精选文章