为什么Google Chrome通过jQuery有不同的console.log（）输出？

Question

当我控制台登录一个jQuery对象，例如。

var s = $("#item"); 
console.log(s); 

我得到这样的

[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…] 

之前（一个月前左右）我还记得，我会得到这样的：

[<div id="item">pas</div>] 

是在Chrome本身这种变化？或者有jQuery的变化？或者我实际上做了一些事情，使输出看起来不同

我觉得这第二个输出更容易阅读，我可以将鼠标悬停在此并将其标记在页面上。现在我得到了太多的信息，它很难看

Answer 1

我想你注意到的是在控制台中评估一个jQuery对象并用console.log()显示它的区别。使用David Thomas的fiddle，在console.log语句上设置一个断点。当它停在断点处，键入$s到控制台，你会看到

[<div id="item">pas</div>] 

然后继续，你会看到console.log()打印的详细对象。

我不确定jQuery或Chrome在做什么导致这种差异。输入$s时的输出似乎是$s.toArray()的结果，而console.log()显示的是真正的jQuery对象。

更多的证据表明，这不是新行为 - 我只是从11月份链接了一个重复的问题。

Answer 2

var s = $("#item").html(); 
console.log(s) 

Answer 3

if div value printed on div .. then plz menstion html(). 

    var s = $("#item").html(); 

    console.log(s); 

Answer 4

尝试...

var s = $("<div>").append($("#item").clone()).html(); 

console.log(s); 

$(s).remove(); 

这不是在其最漂亮的形式，但结果是你在找什么，我相信你能拿出一个很好的功能因为它...

基本上我创建一个div，将#item的副本放入它中，然后将div的innerHTML输出到控制台以显示整个#item元素。 （不只是＃item的innerHTML） 然后我销毁s来清理。

Answer 5

是的，有可能是用jQuery的变化，检查它们是如何与DOM对象版本1.9.1

http://jsfiddle.net/5HJ3L/1/

现在正在处理，如果你以这种方式

var s = $("#item"); 
console.log(s); 

的尝试console.log输出将像

[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…] 
0: div#item 
context: document 
length: 1 
selector: "#item" 
__proto__: Object[0] 

，如果你选择了它观察你会发现在关键0上述阵列所需的输出，所以输出以下行会

console.log(s[0]); 

输出：

<div id="item">pas</div> 

此外，如果你尝试没有jQuery的输出将是你所需要的一个

var e = document.getElementById('item'); 
console.log(e); 

输出：

<div id="item">pas</div> 

PS：这不是对jQuery的，但一个建议，以显示他们将如何通过google-chrome

校正来处理：另外要注意的问题是输出一提的是在array形式，而方式我已建议在string

Answer 6

我得到了预期的结果发送DOM元素，而不是jQuery的控制台。

console.log($("div")[0]) 

Answer 7

您可以控制使用C风格的console.log控制台日志输出的输出方式：https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css

例如，要出去放一个简单的DOM元素风格：

console.log("%o", document.body)