我想在 chrome 的控制台中显示一个对象的值答案

【问题标题】：I want to display an object's values in chrome's console我想在 chrome 的控制台中显示一个对象的值
【发布时间】：2012-07-09 22:35:18
【问题描述】：

这是我在 Chrome 控制台中缺少的东西。我正在关注一个截屏视频，其中一个 javascript 对象以可浏览的类似 tre 的结构显示，如下所示：

（此处的箭头）对象

例如，当输入这个时，我只得到一个空数组：

jQuery()

【问题讨论】：

这很正常，你要什么回复？
添加一些代码并澄清您的问题。

标签： javascript jquery google-chrome console

【解决方案1】：

如果你想浏览 jQuery 对象中的元素，你必须先选择一些东西。
$() 返回一个空的 jQuery 对象。

另一方面，如果您想浏览创建的对象的方法/属性，您应该使用console.dir 方法，它可以让您更深入地了解您的对象：

console.dir(jQuery());

这是小提琴：http://jsfiddle.net/asYay/

【讨论】：

【解决方案2】：

你输入的对象

jQuery()

是一个空的 jQuery 对象，其表示的语法与空数组相同

[]

jQuery 对象是您从正文中选择的 html 元素的类数组对象。在您的情况下，选择器（您通常会写入函数的函数的第一个参数）是空的，因此没有什么可以搜索 jQuery 并且它返回一个空对象。如果您要传递带有 DOM 元素（例如主体）的参数，它将返回数组中的主体

jQuery('body') //=> Array with the body html element inside

请注意，jQuery 对象中的 HTML 元素通常与 Google 控制台中的标准对象不同。对于标准对象，您将获得其属性为树结构的对象，在它之前有一个箭头以展开它（就像您在截屏视频中看到的那样），使用 HTML 元素，您将获得 DOM node，但没有属性或扩展方法。

要查看差异，请尝试以下操作：

在 Chrome 控制台中显示实例或标准对象：

var object = {
  hi: 'im an object', 
  and_i: 'am represented as a tree like structure', 
  i_can_haz: function() { return 'this is great, it shows all the stuff' }
};

如果你再次输入：

object

您将获得 Chrome 控制台对象表示。

对于 HTML 对象，只需这样做

var object = document.getElementsByTagName('body');

如果你想访问它的属性和功能，请使用 dir 方法

dir(object);

您几乎可以在任何对象上使用 dir 来访问属性

而 object 将是 body 元素的表示。如前所述，jQuery 在选择时所做的只是将这些元素放入一个数组中。

【讨论】：