console.log（）不输出jQuery选择对象的HTML

Question

在Google Chrome中使用console.log时出现问题。突然，当我输出像$(this)这样的元素时，它显示为：

[<div>, context: <div>]

或

[jQuery.fn.jQuery.init[1]]

在控制台中。 （两者都来自同一行：console.log($(this))）

昨天出现了这个问题。代码没有问题。我在另一台计算机上记录完全相同的东西，它显示如下：

[<div class='element'></div>, ...]

更新：新的Chrome版本会更改console.log()

的输出

有谁知道如何恢复Google Chrome控制台的原始设置？

Answer 1

回答这个问题：

• 有谁知道如何恢复到Google Chrome控制台的原始设置？

没有设置来获取console.log（）的前一个输出。你可以：

• 降级浏览器（使用旧版Chrome或chromium based alternatives）
• 通过添加您自己的console.log()
覆盖function log()
• 在某些情况下使用outerHTML或升级到chrome 25.0.1323.1（dev channel），其中console.log（$（#Selector）[0]）;再次返回HPM（见下文）。

Chrome 23/24：console.log（）的输出有时会改变

根据user916276，console.log（jQuery-Object）的输出已更改：

// output of console.log($jQuerObject) 
[<div class='element'></div>, ...] // in chrome <= 23
[<div>, context: <div>]            // in chrome 24

用户brentonstrine让我意识到我的context.outerHTML并不总是有效。

我用a new example更新了我的代码。似乎jqObject.context.outerHTML的存在取决于你如何将jQuery-Object传递给函数。 我用chrome dev channel（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对象写入最近的谷歌浏览器浏览器的inbuild console（版本24,25）的改变行为。

Chrome源代码

我查看了Chrome源代码更改at the Console.cpp以及timeline view，了解WebInspector中的更改。我无法找到导致console.log()更改行为的确切更改。我认为它与changes to ConsoleView.js，2，3有关。如果有人想要发起console.log()返回与Chrome 21中相同的输出，那么他可以提交错误。此two bugs可用作放置更改请求的模板。

Answer 2

console.log.apply(console, $(this));

Answer 3

输出正确，因为$（this）引用jQuery选择对象，而不是底层DOM对象。

如果您希望输出原始DOM元素，可以尝试以下操作：

 console.log( $( this ).get(0) ) 
 // Or just 
 console.log( this )

或者您也可以这样做：

 console.log( $( this ).html() )  

Answer 4

这是一个比我刚发现的console.log.apply(console, obj);更好的解决方案。查看console.dirxml(obj);，当obj是jQuery选择器结果集时，它会提供几乎相同的输出。但是，当obj是jQuery选择器结果集中的特定元素时，只有后者才有效。

以下是您可以在此页面上进行的演示...

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记录＆＃34;未定义＆＃34;。

因此，从现在开始，我将使用console.dirxml因为它简单，有效且内置。必须将console作为第一个参数传递给{{无论如何，1}}永远不会和我坐在一起。

Answer 5

默认情况下，当你执行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]）你会得到你想要的结果。

希望这会有所帮助

Answer 6

console.log.apply(console, [].slice.call($('p'), 0))
-> ►<p>…</p>, ►<p>…</p>, <p class="label-key">viewed</p>

更新： Simpler solution。

---

控制台输出改变背后的基本原理：

  

要求不包括在内的理由是什么？   属性/的textContent？

Devtools开发人员pfeldman的回复：

  

转储DOM列表的人会欣赏密集的外观。

crbug.com/50316

Answer 7

我对@ brentonstrine的回答被拒绝了，所以我要为它做一个新答案。但请参阅my other answer on this page了解更好的解决方案。

此演示向您展示了为什么我们关心以正常方式记录这种新方式...

// 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'));

Answer 8

这是我的解决方案，在我自己的函数中包装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"));并在控制台中将元素作为old school DOM对象。