写点什么

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:554774

评论

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

淘宝内测新内容社区淘宝逛逛:邀请B站UP主入驻打造流量池

石头IT视角

低代码开发平台的敏捷之力

雯雯写代码

敏捷开发 低代码 信息化

LeetCode题解:90. 子集 II,迭代,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

目标检测之YOLOv1

Dreamer

Amdocs收购OPENET:关于5G应用落地的思考

VoltDB

大数据 数据分析 5G 物联网

React Ref 如何使用(译)

西贝

Java 翻译 React Hooks Ref

震惊!线上四台机器同一时间全部 OOM,到底发生了什么?

AI乔治

Java 架构

阿里五位大佬总结的操作系统+程序员必知硬核知识大全离线版pdf火了,在Github上获赞89.3K+,现已开源!

996小迁

架构 面试 操作系统 计算机

JVM垃圾回收与一次线上内存泄露问题分析和解决过程

AI乔治

Java 编程 架构 JVM 内存泄漏

高频面试题:秒杀场景设计

艾小仙

Java 面试 高并发 秒杀

《Among Us》火爆全球,实时语音助力派对游戏开启第二春

ZEGO即构

语音 游戏 RTC

LeetCode题解:90. 子集 II,迭代+位运算,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

Appium常用操作之「微信滑屏、触屏操作」

清菡软件测试

Java先驱者发布最新Java全栈面试“秘籍”,助力你吃透Java新特性!

Java架构追梦

Java 学习 编程 架构 面试

让容器应用管理更快更安全,Dragonfly 发布 Nydus 容器镜像加速服务

阿里云基础软件团队

云原生

零基础IM开发入门(四):什么是IM系统的消息时序一致性?

JackJiang

嵌入式的我们为什么要学ROS

良知犹存

ROS

跟Kafka学技术系列之时间轮

AI乔治

Java 编程 架构

SpringBoot-技术专题-Websocket消息推送和广播消息推送

洛神灬殇

SpringBoot- 技术专题 -Websocket+Nginx出现404问题

洛神灬殇

Java9 新特性 - 下篇

hepingfly

Java 新特性

SpringBoot-技术专题-war包项目外置配置文件

洛神灬殇

移动端堆栈关键行定位的新思路

移动研发平台EMAS

移动应用 应用崩溃 崩溃分析

让你怀疑人生的重载和重写的区别

艾小仙

Java 编程语言

微信小程序接口测试时appid为空如何解决

测试人生路

微信小程序 接口测试

云原生时代下数据库管理工具的变革

BinTools图尔兹

数据库 sql 云原生 数据治理 工具软件

谈谈项目中主动full gc的一些问题

AI乔治

Java 编程 架构 JVM GC

音视频社交的应用和优势

anyRTC开发者

音视频 WebRTC 语音 直播 RTC

百万年薪技术大佬的读书之旅

四猿外

Java 书籍推荐 书单 书单推荐 书籍

AI 科学家带你快速 Get 人工智能最热技术

京东科技开发者

人工智能

腾讯安全披露多个0day漏洞,Linux系统或陷入“被控”危机

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