为什么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 = $("<div>").append($("#item").clone()).html();

console.log(s);

$(s).remove();

它不是最漂亮的形式，但结果是你正在寻找的，我相信你可以为它提出一个好的功能......

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

Answer 3

是的，jquery可能有变化，检查他们现在如何处理版本1.9.1中的dom对象

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

如果你以这种方式尝试console.log

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

输出就像

[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 4

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

例如，要使用简单的dom元素样式输出：

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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

    console.log(s);