监视变量（调试）窗口的设计答案

【问题标题】：Design of the watch variable (debug) window监视变量（调试）窗口的设计
【发布时间】：2019-03-10 13:00:48
【问题描述】：

我已经实现了一种脚本语言，它支持 .NET 对象的创建和使用。

为了方便使用，我想实现一个用户界面用于在内存中查找变量。

我在 Visual Studio 中检查了调试/监视变量窗口在 Eclipse 中，它们似乎都使用相同的模式 - 变量属性关系的树视图表示，这很好，但需要很多“扩展节点”点击查找特定属性或字段的值。

如果所有属性都可以轻松解决点击次数过多的问题并且字段会自动扩展-但这可能会导致另一个问题 - 将使用过多的屏幕空间只显示一个变量。

你能推荐任何好的（或不寻常的）调试/视图/变量监视 UI 实现吗？除了我曾经见过的（Visual Studio、Eclipse）。

我们的想法是能够直观地掌握对象的状态一眼（或尽可能靠近）。

【问题讨论】：

标签： user-interface debugging watch

【解决方案1】：

这可能与您在 Visual Studio/Eclipse 中的类似，但WebKit（和Safari 4）的最新版本提供了一种在 Web Inspector 的控制台窗格中查看 JavaScript 对象的好方法：

_{（来源：quintusquill.com）}

另外，Dashcode's 调试器中的“Stackframes & Variables”面板非常易于使用：

_{（来源：quintusquill.com）}

最后，您是否考虑过添加搜索框？如果用户需要找到隐藏在对象深处的特定属性（并且他们知道它的名称），这将非常有用。

史蒂夫

【讨论】：

感谢史蒂夫如此详细的回答。是的，包括一个搜索框肯定在我的列表中——但问题出现了——如何处理使用的类型？ 1. 突出显示找到的位 2. 过滤掉其他所有内容 3. 使用更智能的过滤（给定数据结构的根->父->子性质）？

【解决方案2】：

您可以使这项工作类似于在调试模式下将鼠标悬停在 Visual Studio 编辑器中的实时变量上时发生的情况：您将获得一个工具提示，显示该对象的所有属性的名称和值，并且将鼠标悬停在任何该列表中的项目也会为这些对象的详细信息提供额外的弹出窗口。这样，您只需移动鼠标即可深入了解并获得所需的内容。能够将这些视图中的任何一个锁定到您的监视窗口中也将是一个好处。希望这会有所帮助！

【讨论】：

【解决方案3】：

一种预览可以提供帮助，当一个对象被展开时，用户可以检查哪些属性是有趣的

- a
  [ ] prop1 : value1
  [*] prop2 : value2
  [ ] prop3 : value3

用户会看到

+ a : { prop2 : value2 }

您可以让用户根据类自定义感兴趣的属性。

【讨论】：

【解决方案4】：

我完全同意 - 树视图一定是世界上使用最错误的 GUI 控件。不幸的是，我不知道有任何调试器做得更好:-(

【讨论】：