为什么 Google Chrome 通过 jQuery 有不同的 console.log() 输出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16901503/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why Google Chrome has different console.log() output via jQuery?
提问by Zokora
When I console log a jquery object eg.
当我控制台记录一个 jquery 对象时，例如。
var s = $("#item");
console.log(s);
I get something like this
我得到这样的东西
[div#item, context: document, selector: "#item", jquery: "1.9.1", constructor: function, init: function…]
I remember before ( one month ago or so ), I would get something like:
我记得之前（大约一个月前），我会得到类似的信息：
[<div id="item">pas</div>]
Is this change in Chrome itself? Or there was a change in jquery? Or I actually did something to make output look differently
这是 Chrome 本身的变化吗？或者jquery发生了变化？或者我实际上做了一些让输出看起来不同的事情
I find this second output much easier to read and I can hover over this and have it marked on page. Now I get too much infos it's quite hard to read
我发现第二个输出更容易阅读，我可以将鼠标悬停在它上面并将其标记在页面上。现在我得到的信息太多了很难阅读
回答by Barmar
What I think you're noticing is the difference between evaluating a jQuery object in the console and displaying it with console.log(). Using David Thomas's fiddle, set a breakpoint on the console.logstatement. When it stops at the breakpoint, type $sinto the console and you'll see
我认为您注意到的是在控制台中评估 jQuery 对象与使用console.log(). 使用 David Thomas 的fiddle，在console.log语句上设置断点。当它停在断点处时，$s在控制台中输入，您将看到
[<div id="item">pas</div>]
Then continue, and you'll see the verbose object printed by console.log().
然后继续，您将看到console.log().
I'm not really sure what jQuery or Chrome is doing that causes this difference. The output when you type $sseems to be the result of $s.toArray(), while console.log()shows the real jQuery object.
我不太确定 jQuery 或 Chrome 正在做什么导致这种差异。键入时的输出$s似乎是 的结果$s.toArray()，而console.log()显示了真正的 jQuery 对象。
More proof that this isn't new behavior -- I just linked a duplicate question from November.
更多证明这不是新行为的证据——我刚刚链接了 11 月的一个重复问题。
回答by JxAxMxIxN
try...
尝试...
var s = $("<div>").append($("#item").clone()).html();
console.log(s);
$(s).remove();
It's not in its prettiest form but the result is what you're looking for and I'm sure you could come up with a good function for it...
它不是最漂亮的形式，但结果就是你正在寻找的，我相信你可以为它想出一个很好的功能......
Basically I'm creating a div, putting a copy of #item into it, and spewing the div's innerHTML out to the console in order to show the entire #item element. (Not just #item's innerHTML) Then I destroy s to clean up.
基本上，我正在创建一个 div，将 #item 的副本放入其中，然后将 div 的 innerHTML 喷出到控制台以显示整个 #item 元素。（不仅仅是#item 的innerHTML）然后我销毁s 进行清理。
回答by zzlalani
Yes there may be a change with jquery, check how they are now dealing with dom objects in version 1.9.1
是的，jquery 可能会发生变化，请检查他们现在如何处理版本中的 dom 对象 1.9.1
if you try the console.login this manner
如果你console.log以这种方式尝试
var s = $("#item");
console.log(s);
the output will be like
输出将像
[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]
if you check it closely you will find the required output in the above array at key 0, so the output for the following line will be
如果仔细检查，您会在上面的数组中找到所需的输出 key 0，因此下一行的输出将是
console.log(s[0]);
Output:
输出：
<div id="item">pas</div>
also if you try it without jquery the output will be the one you are required
此外，如果您在没有 jquery 的情况下尝试，则输出将是您需要的
var e = document.getElementById('item');
console.log(e);
Output:
输出：
<div id="item">pas</div>
PS:this is not a suggestion against jquery but to show how they will be deal by google-chrome
PS：这不是针对 jquery 的建议，而是展示他们将如何处理google-chrome
Correction:Also note that output mention in the question is in arrayform whereas the ways I have suggested is in string
更正：另请注意，问题中提到的输出是array形式，而我建议的方式是string
回答by Daiwei
You can control the output style of a console log output with c style console.log: https://developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css
您可以使用 c 风格的 console.log 控制控制台日志输出的输出风格：https: //developers.google.com/web/tools/chrome-devtools/console/console-write#styling_console_output_with_css
For example, to out put with a simple dom element style:
例如，输出一个简单的 dom 元素样式：
console.log("%o", document.body)
回答by Paulo Lima
I got the expected result for the console sending the DOM element and not the jquery.
我得到了控制台发送 DOM 元素而不是 jquery 的预期结果。
console.log($("div")[0])
回答by Amol Navsupe
var s = $("#item").html();
console.log(s)
回答by Amol Navsupe
if div value printed on div .. then plz menstion html().
var s = $("#item").html();
console.log(s);
