如何检查 jQuery 对象？

Question

在 jQuery 1.4.4 中，如果我在 Google Chrome 的控制台中执行此操作：

var divs = $('div');

...我返回的似乎是 DOM 元素数组。但我知道它一定是一个 jQuery 对象，因为我可以在它上面链接 jQuery 方法：

divs.hide('slow').show('slow'); // etc

我想看到的是 jQuery 对象，带有列出其所有方法的 .fn 属性，等等。我'我很确定我以前能够看到这一点。

如果我创建自己的对象，如下所示：

var foo = {species: 'marmot', flavor: 'lemon'}

...我可以在控制台中深入了解它的属性。

如何在控制台中检查 jQuery 对象？

另外，到底做了什么魔法才能使它看起来像一个数组？

更新 - 它确实改变了

如果我加载旧版本的 jQuery - 例如，将其复制并粘贴到控制台的空白选项卡中：

http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js

...而我然后执行以下操作：

var divs = $('div');

...我确实返回了 jQuery.fn.jQuery.init，我可以在控制台中深入研究它。所以从那时起，事情肯定发生了变化。

Answer 1

我相信此网站描述了您正在寻找的内容详细但总结一下（来自链接）：

关于 jQuery 的有趣的事情
对象是，而它的数据类型是
一个对象，它具有类似数组的
特点：

• 它的属性名称（至少引用 DOM 元素的属性名称）是
  数字
• 它有一个长度属性

并且： $('div').toSource(); 编辑： 仅适用于 FF
应该是您想要显示对象属性的内容。

对于 Chrome：

基本上，您会转到 Chrome 中的 Javascript 控制台。单击“脚本”选项卡 (#1)。在您要检查的代码处放置一个断点 (#2)。然后运行脚本，当它在该位置中断时，检查范围变量 (#3)。特别是 __proto__ 部分。

Answer 2

这并不能以非常令人满意的方式回答您的问题，但它可能会帮助您，具体取决于您的需求：

我注意到，如果您使对象不那么“类似于数组”，那么 Chrome 会像它一样记录它非数组对象（即具有可扩展的属性树）。

使其不像数组的一种方法是为 length 属性指定一个非数字值：

var divs = $('div');
divs.length = "foo";
console.log(divs);

ps 您可能希望将对象的 length 设置回其原始值再次使用之前的值。

Answer 3

我在网上发现了一次这个检查功能，然后就再也没有回头。虽然它不是 jQuery :/

function inspect(obj, maxLevels, level)
{
  var str = '', type, msg;

    // Start Input Validations
    // Don't touch, we start iterating at level zero
    if(level == null)  level = 0;

    // At least you want to show the first level
    if(maxLevels == null) maxLevels = 1;
    if(maxLevels < 1)     
        return '<font color="red">Error: Levels number must be > 0</font>';

    // We start with a non null object
    if(obj == null)
    return '<font color="red">Error: Object <b>NULL</b></font>';
    // End Input Validations

    // Each Iteration must be indented
    str += '<ul>';

    // Start iterations for all objects in obj
    for(var property in obj)
    {
      try
      {
          // Show "property" and "type property"
          type =  typeof(obj[property]);
          str += '<li>(' + type + ') ' + property + 
                 ( (obj[property]==null)?(': <b>null</b>'):('')) + '</li>';

          // We keep iterating if this property is an Object, non null
          // and we are inside the required number of levels
          if((type == 'object') && (obj[property] != null) && (level+1 < maxLevels))
          str += inspect(obj[property], maxLevels, level+1);
      }
      catch(err)
      {
        // Are there some properties in obj we can't access? Print it red.
        if(typeof(err) == 'string') msg = err;
        else if(err.message)        msg = err.message;
        else if(err.description)    msg = err.description;
        else                        msg = 'Unknown';

        str += '<li><font color="red">(Error) ' + property + ': ' + msg +'</font></li>';
      }
    }

      // Close indent
      str += '</ul>';

    return str;
}

console.log(obj) 也很酷，但我最近发现了另一个非常酷的函数。
尝试 console.dir(obj)，然后在控制台中您将看到您的 obj 将是一个不错的小节点类型结构，您将能够查看所有深度级别。
尝试

console.dir(String)
// or  
obj = {'this' : 'that', 'one' : [2,3,4,5], 'A' : {} }; console.dir(obj)