在Chrome开发工具控制台中记录jQuery对象时显示元素？ [英] Show Elements when logging jQuery object in Chrome Dev Tools console?

问题描述

Chrome开发工具最近似乎发生了一些变化。使用 console.log 记录jQuery对象用于在控制台中显示DOM节点的元素。像这样：

  [< a href =＃employees> Employees< / a>] 
  

现在它变成了一个像这样的可点击对象：

<$


















$ b $ [&有没有办法回到旧式的对象记录或甚至是一种不同的方法来调用 console ？

我目前使用的版本 23.0.1271.64 。如果您希望console.log（）吐出DOM元素，那么您就可以使用它来创建一个新的DOM元素。您不需要确定哪个版本带来了改变。

需要记录DOM元素而不是jQuery对象。 DOM元素始终可以作为jQuery选择器的第0个元素访问。因此，从jQuery选择器访问实际DOM元素的方式如下所示：

  $（＃someSingleDOMObjectSelector） [0] 
  

为了让DOM元素以您喜欢的方式出现在日志中， （$（＃someSingleDOMObjectSelector）[0]）;

  console.log（$（＃someSingleDOMObjectSelector）[0]）; 
  

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

  $（'。someMultipleDOMObjectSelector'）。each（function（）{
 //console.log($(this ）[0]）; //或 - > 
 console.log（this）; 
}）;至于Chrome的开发工具为什么这样做，我只能猜测它已经完成了，因为它使得更多感觉将jQuery对象记录为对象。
 
It seems like something has changed lately with Chrome Dev Tools. Logging a jQuery object with console.log used to show the Element of the DOM node in the console. Something like this: 
[<a href="#employees">Employees</a>]
Now it has changed to a clickable object like this:
[<a>, context: <a>]
Is there a way to go back to the old style of object logging or even a different method to call on console?

I'm currently using version 23.0.1271.64. Not sure exactly which version brought the change.
解决方案
If you want console.log() to spit out the DOM element, you need to log the DOM element and not the jQuery object. The DOM element is always accessible as the 0th element of the jQuery selector. So, the way you would access the actual DOM element from a jQuery selector is like this:
   $("#someSingleDOMObjectSelector")[0]
And to get the DOM element to appear in the log the way you would like, you would do this:
   console.log($("#someSingleDOMObjectSelector")[0]);
And for jQuery selectors which contain/return multiple DOM elements, you could loop them, like this:
   $('.someMultipleDOMObjectSelector').each(function(){
           //console.log($(this)[0]); //or -->
           console.log(this);
   });
As to why Chrome's dev tools do this, I can only guess that it is done because it makes more sense to log a jQuery object as an object.

                        
这篇关于在Chrome开发工具控制台中记录jQuery对象时显示元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！