获取Javascript变量的所有信息

Question

我并不是JavaScript大师，但作为一名网页开发者，至少需要了解一些基本知识。

通常我会使用alert函数来查看变量的值。

然而，问题在于我经常会得到类似“object HTMLInputElement”这样的结果。对我来说，这几乎没有任何意义。我可以查找它，但我需要依次alert每个子元素，非常麻烦。

我曾尝试使用Firebug调试JavaScript，但出现了非常缓慢的情况。每次开始调试时，Firefox都会卡顿，我不知道为什么。

因此，我想了解是否有其他方法可以获取变量的详细信息。或者是否有一种可用的系统可以使工作更加轻松。

- KdgDev

---

你可以使用 txt = ""; for (i in obj) txt += i + ": " + obj[i]; 的逻辑。 - vbence

Answer 1

我发现Chrome中的开发者工具非常好用，可以根据需求提供足够的细节（通常只需将鼠标悬停在脚本选项卡中的变量上；如果该变量是一个结构化对象，则会出现一个小树形控件，您可以向下钻取）。但是，我也没有你遇到的Firebug问题（或者至少不再经常遇到）。

使用alert进行调试非常浪费时间，并且正如您所发现的那样，令人沮丧。如果可能的话，我建议使用真正的调试器（例如Chrome的Dev Tools；我还听说Opera的调试器也很好用）。

- T.J. Crowder

Answer 2

这应该会有所帮助：

http://www.openjs.com/scripts/others/dump_function_php_print_r.php

- bezmax

---

@WebDevHobo：我从未测试过它，但源代码中的注释说：* 参数：数据-数组、哈希（关联数组）、对象。 - bezmax

Answer 3

检查JavaScript变量最简单的方法是使用调试器。如果Firebug对您不起作用，请尝试使用Google Chrome，它内置了检查器。

顺便说一句 - 不确定您所说的“启动调试会话”是什么意思。如果您已安装Firebug，则应该能够单击浏览器右下角的Firebug图标。转到脚本选项卡，并从下拉列表中选择您想要的任何js文件，在边缘上单击左键设置断点，然后刷新页面。我从来没有遇到过Firebug的问题，它总是非常好用。我强烈建议找出您与其相关的任何问题，这将使您的生活轻松许多倍。

- Richard H

---

我认为“启动调试会话”是指激活“脚本”选项卡，该选项卡默认情况下处于非活动状态，不跟踪JavaScript执行。 - bezmax

当我刷新页面时，一切都会变得一团糟。 - KdgDev

@WebDevHobo - 是针对某个特定网站还是所有网站？如果您发现有任何一个网站无法正常运行，请告诉我，我会尝试解决。 - Richard H

这种情况发生在所有网站上，包括本地主机页面。 - KdgDev

@WebDevHobo 如果我是你，我会尝试卸载Firefox，清除与Firefox相关的所有临时目录（例如在Windows中的“文档和设置”或Linux中的“~/.firefox”），然后从零开始重新安装它。这样做有可能会有所帮助。或者，你甚至可以在http://superuser.com/上询问你的问题。 - bezmax

Answer 4

使用任何浏览器开发工具，包括IE9，您都可以使用console.log在控制台上获取变量输出。这给您提供的信息将因浏览器而异，但是使用Firebug，它允许您在DOM检查器选项卡中探索变量，并完全访问所有属性和函数（甚至可以复制函数内容以粘贴到其他地方）。

例如：

var foo = {};

// Do lots of stuff with foo

if (typeof(console) !== "undefined" && console.log) { // prevent errors when console not open, ideally all console calls should be removed before going into production
    console.log(foo);
}

这种方法的优点是不需要任何断点，因此不会出现缓慢的逐步调试。但它并不能解决所有问题，你通常仍然需要使用调试器。

- roryf

---

"变量控制台未定义。说实话，我以为它会起作用，因为我以前见过它被提到。我不确定我做错了什么。我只是用console.log替换了一个警报。" - KdgDev

你需要打开 Firebug 并启用控制台。 - roryf