与许多人一样，我的大脑倾向于使用视觉（即非文本）信息进行阅读，写作和创作。
有哪些工具可以让我直观地“看到”我当前运行的javascript环境？
一个明显的例子是在屏幕上放置一个框（或HTML页面）来表示当前在内存中的每个对象。该框可能包含一个标签，该标签是当前绑定到该对象的变量。如果我正在使用pubsub库，那么当它所代表的对象“获取”它所订阅的消息时，该框可能会暂时闪烁。单击该框可能会为我提供该对象的所有公共方法的列表，如果代码具有方法签名注释，我会看到其参数的名称。
欢迎使用Javascript中的任何与此类似的东西并在当前正在运行的进程中工作！此外，它必须是javscript库的形式，我可以使用现有的代码，但欢迎在某些IDE或浏览器插件中找到此类工具的示例作为插图。
答案 0 :(得分：0)
虽然它不使用盒子，可能会节省屏幕空间，你有没有给firebug一个机会？虽然它们不是图形框，但它使用可扩展/可折叠文本元素来帮助可视化应用程序。
并不仅限于JS。您可以使用元素选择器来选择html元素，并查看JS实际上如何改变DOM。所以，让我们说焦点，你将一些CSS应用于文本框;你可以使用Firebug实时看到它......
它确实是一个很棒的工具。您可以逐行调试JS，将监视放在变量上（查看它们的所有方法和值;查看它们的值如何实时更改，或者在程序运行时自己更改它们！），看看html和js是怎样的近乎实时读取和影响以及更多...还有插件（或至少曾经是）来帮助调试其他语言，特别是我回想起一个动作脚本插件让我看到来自FLASH / SWF的痕迹发生的对象和PHP插件。
如果你还没有尝试过。你必须。
如果你对低级别的东西更感兴趣;如下面的HTTP调用非常详细;复制缓慢的连接;伪造你的用户代理（虽然可以从大多数浏览器中完成！）然后给Fiddler2一个尝试......我不经常使用它但是当我处理难以解决的AJAX或http的东西时有很多来回呼叫，它一直是一个救生员。
希望这有帮助。