像许多人一样，我的大脑往往能够很好地处理视觉(又称非文本)信息，以进行阅读、写作和创作。
有哪些工具可以以某种方式让我直观地“查看”当前运行的 javascript 环境？
一个明显的例子是在屏幕(或 HTML 页面)上放置一个框来表示当前内存中的每个对象。该框可能包含一个标签，该标签是当前绑定(bind)到该对象的变量。如果我使用 pubsub 库，当它代表的对象“获取”它所订阅的消息时，该框可能会短暂闪烁。单击该框可能会显示该对象的所有公共(public)方法的列表，如果代码具有方法签名注释，我会看到其参数的名称。
任何与 Javascript 类似且适用于当前正在运行的进程的东西都是受欢迎的!另外，它必须采用 javscript 库的形式，我可以将其附加到现有代码上，但欢迎在某些 IDE 或浏览器插件中找到此类工具的示例作为说明。
最佳答案
虽然它不使用盒子，可能会节省屏幕空间，但你尝试过 Firebug 吗？尽管它们不是图形框，但它使用可展开/可折叠的文本元素来帮助可视化应用程序。
而且它不仅限于 JS。您可以使用元素选择器来选择 html 元素并查看 JS 实际上如何更改 DOM。因此，假设在焦点上，您将一些 css 应用于文本框；您可以使用 Firebug 实时看到...
这确实是一个很棒的工具，可以做很多事情。你可以逐行调试你的JS，在变量上放置监视(以查看它们所有的方法和值；查看它们的值如何实时变化，或者在程序运行时自己更改它们!)，看看html和js是如何的近乎实时地读取和影响等等...还有插件(或至少曾经是)来帮助调试其他语言，特别是我记得有一个 ActionScript 插件，它可以让我看到来自 FLASH/SWF 的痕迹对象发生时的情况以及 PHP 插件。
如果你还没有尝试过。你必须这样做。
如果你对底层的东西更感兴趣；如以下 HTTP 调用的详细信息所示；复制慢速连接；伪造你的用户代理(大多数浏览器都可以在没有这个的情况下完成!)然后尝试一下 Fiddler2...我不经常使用它，但是当我处理难以排除故障的 AJAX 或 http 内容时，经过大量来回调用，它成为了救星。
希望这有帮助。
关于javascript - Javascript 对象实时可视化工具，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19191019/