Javascript对象的实时可视化工具

Question

像许多人一样，我的大脑倾向于很好地处理用于阅读、写作和创作的视觉（也称为非文本）信息。

有哪些工具可以让我直观地“看到”我当前运行的 javascript 环境？

一个明显的例子是在屏幕（或 HTML 页面）上放置一个框来表示当前在内存中的每个对象。该框可能包含一个标签，该标签是当前绑定到对象的变量。如果我使用的是 pubsub 库，当它代表的对象“获取”它订阅的消息时，该框可能会瞬间闪烁。单击该框可能会给我一个该对象的所有公共方法的列表，如果代码具有方法签名注释，我会看到其参数的名称。

欢迎在 Javascript 中使用任何与此类似的内容并在当前运行的进程上工作！此外，它必须采用 javscript 库的形式，我可以将其附加到现有代码上，但欢迎在某些 IDE 或浏览器插件中找到此类工具的示例作为说明。

Answer 1

虽然它不使用盒子，但可能会节省屏幕空间，你给萤火虫打了一针吗？虽然它们不是图形框，但它使用可展开/可折叠的文本元素来帮助可视化应用程序。

而且它不仅限于 JS。您可以使用元素选择器来选择 html 元素并查看您的 JS 是如何实际改变 DOM 的。因此，假设在焦点上，您将一些 css 应用于文本框；您可以使用 Firebug 实时查看...

这确实是一个很棒的工具，可以做很多事情。您可以逐行调试您的 JS，将监视放在变量上（查看它们的所有方法和值；查看它们的值如何实时变化，或者在程序运行时自己更改它们！），看看 html 和 js 是如何近乎实时地阅读和影响等等......还有一些插件（或至少曾经是）来帮助调试其他语言，特别是我记得一个动作脚本插件，它让我看到来自 FLASH/SWF 的痕迹对象以及 PHP 插件。

如果你还没有尝试过。你必须。

如果你对低级的东西更感兴趣；就像非常详细地跟踪 HTTP 调用一样；复制慢速连接；伪造你的用户代理（尽管大多数浏览器也可以做到这一点！）然后试试 Fiddler2 ......我不经常使用它，但是当我处理难以解决的 AJAX 或 http 问题时，有很多来回调用，它一直是一个救生员。

希望这会有所帮助。