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

Question

console.log在Google Chrome中使用时出现问题.突然,当我输出像$(this)这样的元素时显示如下:

[<div>, context: <div>]

要么

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

在控制台中.(两个来自同一行:console.log($(this)))

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

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

更新:新的Chrome版本会更改输出console.log()

有谁知道我如何回到谷歌Chrome控制台的原始设置？

Answer 1

回答这个问题:

• 有谁知道我如何回到谷歌Chrome控制台的原始设置？

没有设置来获取console.log()的前一个输出.你可以:

• 降级浏览器(使用旧版本的铬或铬替代品)
• console.log()通过添加自己的覆盖function log()
• 在某些情况下使用outerHTML或者升级到chrome 25.0.1323.1(dev channel),其中console.log($(#Selector)[0]); 再次返回HPMTL(见下文).

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并不总是有效.

我用一个新的例子更新了我的代码.似乎存在jqObject.context.outerHTML取决于你如何将jQuery-Object传递给函数.我用chrome dev通道(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对象编写到最近的谷歌浏览器浏览器(版本24,25)的内置控制台中的改变行为.

Chrome源代码

我在Console.cpp和时间线视图中查看了chrome源代码更改,以了解WebInspector中的更改.我无法找到导致更改行为的确切更改console.log().我认为它有做更改ConsoleView.js,2,3.如果有人想要启动它console.log()返回与Chrome 21,22相同的输出,他可以提交错误.这两个 错误可以用作模板来放置更改请求.

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);这是比我刚刚发现的更好的解决方案。检查当是 jQuery 选择器结果集console.dirxml(obj);时，哪个给出几乎相同的输出。obj但是，只有后者在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给我。