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