在Chrome Dev Tools控制台中记录jQuery对象时显示元素？

Question

最近Chrome Dev Tools似乎发生了一些变化.记录一个jQuery对象,console.log用于在控制台中显示DOM节点的Element.像这样的东西:

[<a href="#employees">Employees</a>]

现在它已经改为像这样的可点击对象:

[<a>, context: <a>]

有没有办法回到旧式的对象日志记录甚至是不同的方法来调用console？

我目前正在使用版本23.0.1271.64.不确定哪个版本带来了变化.

Answer 1

如果希望console.log()吐出DOM元素,则需要记录DOM元素而不是jQuery对象.DOM元素始终可以作为jQuery选择器的第0个元素访问.那么,从jQuery选择器访问实际DOM元素的方式如下:

   $("#someSingleDOMObjectSelector")[0]

要使DOM元素以您希望的方式显示在日志中,您可以这样做:

   console.log($("#someSingleDOMObjectSelector")[0]);

对于包含/返回多个DOM元素的jQuery选择器,您可以循环它们,如下所示:

   $('.someMultipleDOMObjectSelector').each(function(){
           //console.log($(this)[0]); //or -->
           console.log(this);
   });

至于为什么Chrome的开发工具会这样做,我只能猜测它已经完成,因为将jQuery对象记录为对象更有意义.

Answer 2

我发现这有用:

console.log.apply(console, $("a"));

此外,如果您console.log = inspect;从控制台内部运行,事情将以旧方式输出,但如果您只是从代码中执行此操作,它就不起作用,它必须来自控制台.