console.log() 不输出 jQuery 选择对象的 HTML答案

【问题标题】：console.log() not outputting HTML of jQuery selection objectconsole.log() 不输出 jQuery 选择对象的 HTML
【发布时间】：2012-10-27 09:48:04
【问题描述】：

我在 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 控制台的原始设置？

【问题讨论】：

我建议您提高您的接受率，并考虑到即使没有完美的答案，每个给出答案的用户都在努力提供帮助，并在他们的答案中投入了时间和精力，唯一的好处是获得点赞或接受的答案。
请starcode.google.com/p/chromium/issues/detail?id=162570

标签： javascript google-chrome console

【解决方案1】：

回答问题：

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

没有设置可以获取之前的 console.log() 输出。您可以：

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

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 对象写入最近的 google chrome 浏览器（版本 24、25）的inbuild console 的更改行为。

Chrome 源代码

我查看了at the Console.cpp 和timeline view 中的chrome 源代码更改，以了解WebInspector 中的更改。我找不到导致console.log() 行为变化的确切变化。我认为它与changes to ConsoleView.js、2、3 有关。如果有人想启动 console.log() 返回与 Chrome 21、22 中相同的输出，他可以提交错误。这个two bugs可以用作模板来提出变更请求。

【讨论】：

是的，我知道，但是 $(this) 不会像我上面描述的那样显示。 $(this) 应包含一个元素数组，而不是“上下文”等等。如果我输出 $(this) 它应该显示为 [
] 而不是 [
, context:
].
我更新了问题。编码没有问题，就像 chrome 控制台显示它的方式一样。正如我上面提到的，它昨天工作了，如果我在其他计算机上使用 safari 或 chrome，我就无法工作。 chrome 中的控制台出了点问题。
我使用的是最新版本的 chrome。
@threeFourOneSixOneThree 这很奇怪。我24岁了，还是不行。
我很惊讶这仍然是 chrome 中的问题。

【解决方案2】：

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

【讨论】：

或者用它做一个函数： var domLog = function($obj){ console.log.apply(console,$obj); } domLog( $("div.anything") );
brentonsrine 上面的评论不太有效，因为 cmets 失去了换行符。试试看：var domLog = function($obj){ console.log.apply(console,$obj); }; domLog( $("div") );

【解决方案3】：

输出是正确的，因为 $(this) 指的是 jQuery 选择对象，而不是底层的 DOM 对象。

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

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

或者你也可以这样做：

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

【讨论】：

是的，但在以前的版本中它记录了[<div class="element"></div>, ...]：P
还是不好看，以前除了有一个dom对象数组，还可以打开关闭。
我不太相信这一点。输出完全不同。 console.log( $( this ).html() ); 为您提供纯文本，console.log( $( this ).get(0) ); 为您提供 HTML。但是如果对象有兄弟姐妹：（你可以自己测试）如果你附加.attr( 'id' )，你将不会得到第一个对象和后一个对象的错误。错误是Uncaught TypeError: Object [HTML HERE] has no property 'attr'。
我根本没有得到 attr() 部分

【解决方案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 日志“未定义”。

所以，从现在开始，我将使用 console.dirxml，因为它简单、有效且内置。无论如何，我必须将 console 作为第一个参数传递给 apply。 p>

【讨论】：

【解决方案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]) 你会得到你想要的结果。

希望对你有帮助

【讨论】：

在以前的版本中，记录一个 jQuery 对象会显示一个数组，其中包含每个对象的 html 表示形式。
这是正确答案。输入[0] 模仿旧行为。
我将重复我之前的评论，因为每个人似乎都认为将 [0] 附加到您的 jQuery 选择器会给你旧的输出，它不会： $(this)[0] 只会给你如果您只找到一个元素，则“旧输出”正确，如果您找到许多不同的元素，您将看到它仅输出元素数组中的第一个 [0]，因此没有用。

【解决方案6】：

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

更新： Simpler solution.

控制台输出变化背后的原因：

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

来自开发工具开发人员 pfeldman 的回应：

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

crbug.com/50316

【讨论】：

我看到你在这里用我发布的几乎相同的解决方案击败了我。你的 [].slice.call(x,0) 是你的，但不是我的，有什么作用？
这是一种将类数组对象转换为真实数组的常用方法。 stackoverflow.com/questions/4929924/…
[].slice.call 似乎对控制台的输出没有做任何事情。

【解决方案7】：

我对@brentonsrine 答案的编辑被拒绝了，所以我要为它做一个新的答案。但是请参阅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'));

【讨论】：

如果我的编辑建议无法通过（2 个拒绝与 2 个批准）如果使用 domlog($(id))，它会以您可以在控制台中将鼠标悬停在它上面的方式返回 domnode，然后匹配节点<div id="answer-13594327">...</div> 在其页面上下文中被突出显示（见截图）。函数 normallog($(id)) 返回括号中的 [node] - 鼠标悬停不会突出显示括号中的节点 [<div id="answer-13594327">...</div>]

【解决方案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 对象获取。

【讨论】：