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

I got a problem when using console.log in Google Chrome. Suddenly when I was outputting a element like $(this) it was display like:

我在使用控制台时遇到了一个问题。登录Google Chrome。突然间，当我输出一个像$(this)这样的元素时，它显示为:

[<div>, context: <div>]

or

或

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

in the console. ( Both came from the same row: console.log($(this)) )

在控制台。(都来自同一行:console.log($(this)))

This problem arose yesterday from nowhere. There ain't a problem with the code. I logged the exact same thing on an other computer and there it is being displayed like:

这个问题昨天不知从哪儿冒出来的。代码没有问题。我在另一台电脑上记录了同样的事情，结果显示为:

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

Update: the new Chrome version changes the output of console.log()

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

Does anyone know how I can get back to the original settings of Google Chrome console?

有人知道我如何回到谷歌Chrome控制台的原始设置吗?

8 个解决方案

#1

To answer the question:

回答这个问题:

• Does anyone know how I can get back to the original settings of Google chrome console?
• 有人知道我如何回到谷歌chrome控制台的原始设置吗?

There are no settings to get the former output of console.log(). You can either:

没有设置可以获得console.log()的前输出。你可以:

• downgrade the browser (use an older version of chrome or chromium based alternatives)
• 降级浏览器(使用旧版本的chrome或基于铬的替代品)
• overwrite console.log() by adding your own function log()
• 通过添加自己的函数log()覆盖console.log()
• use outerHTML in some cases or upgrade to chrome 25.0.1323.1 (dev channel) where console.log($(#Selector)[0]); returns outHMTL again (see below).
• 在某些情况下使用outerHTML或升级到chrome 25.0.1323.1(开发通道)，其中console.log($(#Selector)[0]);再次返回outHMTL(参见下面)。

Chrome 23/24: Output of console.log() changed sometimes

According to user916276 the output of console.log(jQuery-Object) has changed:

根据user916276, console.log(jQuery-Object)的输出已经改变:

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

User brentonstrine made me aware of the fact that my context.outerHTML does not always work.

用户brentonstrine让我意识到我的上下文。outerHTML并不总是有效。

I updated my code with a new example. It seems that the existence of jqObject.context.outerHTML depends how you pass the jQuery-Object to the function. I tested it with chrome dev channel (25.0.1323.1) and two chromium based versions (21, 22).

我用一个新示例更新了代码。似乎jqObject.context的存在。outerHTML取决于如何将jquery对象传递给函数。我用chrome开发通道(25.0.1323.1)和两个基于chromium的版本(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

To avoid misunderstandings. This answer is about the changed behaviour of writing a jQuery object to the inbuild console of the recent google chrome browsers (version 24, 25).

为了避免误解。这个答案是关于将jQuery对象写入最近谷歌chrome浏览器的inbuild控制台(第24版，第25版)的行为的改变。

Chrome source code

I took a look into the chrome source code changes at the Console.cpp and in the timeline view to find out about the changes in the WebInspector. I could not find the exact change that is responsible for the changed behaviour of console.log(). I assume that it has to do with changes to ConsoleView.js, 2, 3. If anyone would like to initiate that console.log() returns the same output as in Chrome 21, 22 he could file a bug. This two bugs could be used as a template to place the change request.

我在控制台查看了chrome源代码的修改。cpp和在时间轴视图中查找关于WebInspector的更改。我找不到导致console.log()行为改变的确切变化。我认为这与ConsoleView的改变有关。js 2 3。如果有人想要启动console.log()，则返回与在Chrome 21中相同的输出，他可以提交一个错误。这两个bug可以用作放置变更请求的模板。

#2

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

console.log。应用(控制台,$());

#3

The output is correct as $(this) refers to jQuery selection object, not the underlying DOM object(s).

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

If you wish to output the raw DOM element(s), you can try the following:

如果希望输出原始DOM元素，可以尝试以下步骤:

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

Or you can also do:

或者你也可以:

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

#4

Here is an even better solution than console.log.apply(console, obj); that I just discovered. Check out console.dirxml(obj); which gives nearly the same output when obj is a jQuery selector result set. However, only the latter works when obj is a specific element from a jQuery selector result set.

这里有一个比console.log更好的解决方案。应用(控制台,obj);我刚发现。看看console.dirxml(obj);当obj是jQuery选择器结果集时，输出几乎相同，但是，当obj是jQuery选择器结果集的特定元素时，输出才会工作。

Here is a demo you can do on this page...

这是一个你可以在这个页面上做的演示……

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]);

You'll see that #4 logs "undefined".

您将看到#4日志“未定义”。

So, from now on I'm going to use console.dirxml because it's simple, effective, and built in. Having to pass console as the first argument to apply never sat right with me anyway.

从现在开始，我将使用控制台。dirxml因为它简单，有效，内置。必须把控制台作为第一个参数来应用，这对我来说永远都不合适。

#5

By default , chrome now returns an object with all details pertaining to that element when u do a console.log($(element)).

默认情况下，chrome现在返回一个对象，其中包含与该元素相关的所有细节，当您执行console.log($(元素))时。

an example of what it actually returns

它实际返回的例子

  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]

so if u do console.log($('input:first')[0]) u would get ur desired Result.

如果你做console.log($('input:first')[0])你会得到你想要的结果。

hope this helps

希望这有助于

#6

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

Update: Simpler solution.

更新:简单的解决方案。

---

Rationale behind the console output change:

控制台输出更改背后的基本原理:

What was the rationale behind the request to not include attributes/textContent?

请求不包含属性/文本内容的理由是什么?

Response from pfeldman, DevTools developer:

来自pfeldman, DevTools developer的回应:

people that dump DOM lists appreciate the dense look.

丢弃DOM列表的人喜欢这种密集的外观。

crbug.com/50316

crbug.com/50316

#7

My edit to @brentonstrine's answer got rejected, so I'm going to make a new answer for it. But see my other answer on this page for an even better solution.

我对@brentonstrine的回复的编辑被拒绝了，所以我要给它一个新的答案。但是，请参阅这一页上我的另一个答案，以获得更好的解决方案。

This demo shows you why we care about logging this new way versus the normal way...

这个演示向您展示了为什么我们要用这种新方式与常规方式进行日志记录……

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

#8

This is my sollution, to wrap console.log in my own function, it has some shortcomings, like it doesn't tell you the line number the problem occured in but I make up by outputing significan log messages... if anyone want to improve on it feel free!

这是我的总结，总结控制台。在我自己的函数中，它有一些缺点，比如它没有告诉你问题发生的行号但是我通过输出重要的日志信息来弥补…如果有人想改进它，请放心!

Note: underscore.js is a dependency, I'm sure you can do it in pure JS, but I always depend on underscore.js :)

注意:强调。js是一个依赖项，我相信你可以用纯js来做，但我总是依赖于下划线。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);
        }
    };

The take home message here is:

这里的主要信息是:

if (typeof data == "object" || typeof data == "array") {
            _.each(data, function(item) {
                console.log(item);
            });
        } else {
            console.log(data);
        }

Then you just do: log($(".some.class")); and get the elements as old school DOM objects in the console.

然后你只要做:log($(".some.class");并在控制台中获取旧学校DOM对象的元素。