[论文解读] The Visual Debugger: Past, Present, and Future

Tim Kräuter, Patrick Stünkel+2 more|arXiv (Cornell University)|Mar 6, 2024

Digital Media and Visual Art被引用 2

一句话总结

本文提出 Visual Debugger，这是一个适用于 IntelliJ IDEA 和 Android Studio 的插件，通过在调试过程中以交互式对象图的形式可视化堆栈帧变量，提升程序理解能力。该工具基于基于 WebSocket 的 Visual Debugging API 构建，利用 JCEF 嵌入式网页技术，增强了 IDE 集成，增加了变更高亮和调试历史功能，并通过 Debug Adapter Protocol (DAP) 提出标准化，以实现更广泛的 IDE 支持。

ABSTRACT

The Visual Debugger is an IntelliJ IDEA plugin that presents debug information as an object diagram to enhance program understanding. Reflecting on our past development, we detail the lessons learned and roadblocks we have experienced while implementing and integrating the Visual Debugger into the IntelliJ IDEA. Furthermore, we describe recent improvements to the Visual Debugger, greatly enhancing the plugin in the present. Looking into the future, we propose solutions to overcome the roadblocks encountered while developing the plugin and further plans for the Visual Debugger.

研究动机与目标

• 通过用可视化对象图替代或补充文本变量视图，提升调试过程中的程序理解能力。
• 解决将基于 Web 的可视化调试工具集成到 IntelliJ IDEA 等原生 IDE 中所面临的挑战。
• 通过嵌入式浏览器支持和优化的数据加载机制，提升插件的可用性和性能。
• 通过基于 Debug Adapter Protocol (DAP) 的标准化，实现更广泛的 IDE 兼容性。
• 通过解耦的架构和可重用的可视化组件，支持未来向其他 IDE 和编程语言的可扩展性。

提出的方法

• 将调试与可视化解耦为两个通过基于 WebSocket 的 Visual Debugging API 连接的组件。
• 使用 Java Chromium Embedded Framework (JCEF) 在 IDE 内部嵌入基于 Web 的浏览器，用于渲染对象图。
• 通过 Visual Debugging API 上的事件驱动更新，实现实时同步 IDE 调试器与可视化器。
• 引入视觉增强功能，如颜色编码的变更高亮和调试历史功能，以追踪状态演化。
• 采用 Debug Adapter Protocol (DAP) 作为未来标准，统一不同 IDE 中对调试功能的访问。
• 利用网页技术及可重用的对象图库，确保跨 IDE 和跨语言的可扩展性。

实验结果

研究问题

• RQ1 如何在不破坏现有调试工作流的前提下，将可视化调试有效集成到 IntelliJ IDEA 等主流 IDE 中？
• RQ2 在为原生 IDE 插件构建基于 Web 的可视化组件时，会遇到哪些架构和技术挑战？
• RQ3 诸如变更高亮和调试历史等视觉增强功能，在多大程度上能提升调试过程中的程序理解能力？
• RQ4 插件如何实现与现代跨平台 IDE 的无缝、高效且可维护的集成？
• RQ5 标准化协议如 DAP 在促进可视化调试工具在多样化 IDE 生态系统中更广泛应用方面，发挥什么作用？

主要发现

• Visual Debugger 自发布以来下载量已超过 8,500 次，增长超过三倍，表明用户采纳度高且具有实际价值。
• 通过 JCEF 嵌入浏览器显著提升了用户体验，消除了对外部浏览器的依赖，并实现了更紧密的 IDE 集成。
• 使用颜色编码的视觉提示进行变更高亮，有助于用户快速检测状态修改，尤其是在复杂或大型对象图中。
• 调试历史功能使用户能够追踪变量在调试步骤中的演化过程，支持对程序状态变化的深入理解。
• 插件的解耦式架构使得可视化组件可在不同 IDE 和编程语言中复用，显著提升了长期可扩展性。
• 作者将 DAP 视为未来插件集成的有前景标准，可大幅减少将 Visual Debugger 移植到新 IDE（如 GoLand、Eclipse 或 Visual Studio Code）所需的工作量。