console.log在 Google Chrome 中使用时遇到问题。突然，当我输出一个元素时，$(this)它的显示如下：
[<div>, context: <div>]
或者
[jQuery.fn.jQuery.init[1]]
在控制台中。（两者都来自同一行console.log($(this))：）
这个问题昨天不知从何而来。代码没有问题。我在另一台计算机上记录了完全相同的内容，它的显示如下：
[<div class='element'></div>, ...]
更新：新的 Chrome 版本改变了输出console.log()
有谁知道我怎样才能恢复到 Google Chrome 控制台的原始设置？
要回答这个问题：
没有设置来获取 console.log() 的先前输出。您可以：
console.log()通过添加自己的覆盖function log()根据 user916276，console.log(jQuery-Object) 的输出发生了变化：
// output of console.log($jQuerObject)
[<div class='element'></div>, ...] // in chrome <= 23
[<div>, context: <div>] // in chrome 24
用户brentonsrine让我意识到我的 context.outerHTML 并不总是有效。
我用一个新示例更新了我的代码。似乎存在jqObject.context.outerHTML取决于您如何将 jQuery-Object 传递给函数。我使用chrome 开发通道(25.0.1323.1) 和两个基于铬的版本 (21、22) 对其进行了测试。
console.log($(this)); // old chrome versions
// new chrome version >23
// if you pass this to the function see my getThis(_this) function
console.log($(this).context.outerHTML);
// if you use a jQuery selector
console.log($(this)[0]); // at least in chrome build 25.0.1323.1
以免产生误会。这个答案是关于将 jQuery 对象写入最近的 google chrome 浏览器（版本 24、25）的内置控制台的更改行为。
我查看了 Console.cpp和时间线视图中的 chrome 源代码更改，以了解WebInspector中的更改。我找不到导致console.log(). 我认为这与对 ConsoleView.js、2、3的更改有关。如果有人想启动console.log()返回与 Chrome 21、22 相同的输出，他可以提交错误。这两个 错误可以用作模板来放置更改请求。
console.log.apply(console, $(this));
输出是正确的，因为 $(this) 指的是 jQuery 选择对象，而不是底层的 DOM 对象。
如果您希望输出原始 DOM 元素，可以尝试以下操作：
console.log( $( this ).get(0) )
// Or just
console.log( this )
或者你也可以这样做：
console.log( $( this ).html() )
这是一个比console.log.apply(console, obj);我刚刚发现的更好的解决方案。查看jQuery 选择器结果集console.dirxml(obj);时，哪个输出几乎相同。obj但是，只有后者在objjQuery 选择器结果集中的特定元素时才有效。
这是您可以在此页面上执行的演示...
var i=0
console.log(++i);
console.dirxml($$('.answer'));
console.log(++i);
console.dirxml($$('.answer')[0]);
console.log(++i);
console.log.apply(console, $$('.answer'));
console.log(++i);
console.log.apply(console, $$('.answer')[0]);
您会看到#4 日志“未定义”。
因此，从现在开始，我将使用console.dirxml它，因为它简单、有效且内置。必须console作为第一个参数传递，否则apply无论如何都不会和我坐在一起。
我对@brentonsrine 答案的编辑被拒绝了，所以我要为它做一个新的答案。但是请参阅此页面上的其他答案以获得更好的解决方案。
这个演示向您展示了为什么我们关心记录这种新方式而不是普通方式......
// paste this whole block into the console of THIS PAGE and see a working demo!
var domlog = function(obj){ console.log.apply(console, obj); };
domlog($('#answer-13594327'));
// compare ^that^ to the normal element logging...
var normallog = function(obj){ console.log(obj); };
normallog($('#answer-13594327'));
默认情况下，当您执行 console.log($(element)) 时，chrome 现在会返回一个对象，其中包含与该元素有关的所有详细信息。
它实际返回的示例
console.log($('input:first'));
[<input>, prevObject: c.fn.c.init[1], context: #document, selector: "input:first"]
0: <input>
context: #document
length: 1
prevObject: c.fn.c.init[1]
selector: "input:first"
__proto__: Object[0]
所以如果你做 console.log($('input:first')[0]) 你会得到你想要的结果。
希望这可以帮助
console.log.apply(console, [].slice.call($('p'), 0))
-> ►<p>…</p>, ►<p>…</p>, <p class="label-key">viewed</p>
更新： 更简单的解决方案。
控制台输出更改背后的基本原理：
请求不包含属性/文本内容的理由是什么？
来自 DevTools 开发人员 pfeldman 的回应：
转储 DOM 列表的人欣赏密集的外观。
这是我的解决方案，将 console.log 包装在我自己的函数中，它有一些缺点，比如它没有告诉你问题发生的行号，但我通过输出重要的日志消息来弥补......如果有人想随意改进它！
注意：underscore.js是一个依赖，我相信你可以在纯 JS 中做到这一点，但我总是依赖 underscore.js :)
// wrap the console.log function
var log = function(data) {
// switch setting
var allowed = true;
if (allowed) {
console.log("LOG");
console.log(typeof data);
if (typeof data == "object" || typeof data == "array") {
_.each(data, function(item) {
console.log(item);
});
} else {
console.log(data);
}
};
带回家的信息是：
if (typeof data == "object" || typeof data == "array") {
_.each(data, function(item) {
console.log(item);
});
} else {
console.log(data);
}
然后你就这样做：并在控制台中log($(".some.class"));获取元素作为DOM 对象。old school