javascript - console.log() が jQuery 選択オブジェクトの HTML を出力しない

Question

console.logGoogle Chrome での使用時に問題が発生しました。突然、次のような$(this)表示のような要素を出力していたとき:

[<div>, context: <div>]

また

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

コンソールで。(両方とも同じ行から来ましたconsole.log($(this)):)

この問題は昨日、どこからともなく発生しました。コードに問題はありません。まったく同じことを他のコンピューターに記録しましたが、次のように表示されています。

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

更新:新しい Chrome バージョンでは、の出力が変更されますconsole.log()

Google Chrome コンソールの元の設定に戻す方法を知っている人はいますか?

Answer 1

To answer the question:

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

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

• downgrade the browser (use an older version of chrome or chromium based alternatives)
• overwrite console.log() by adding your own function 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).

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

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

// 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.

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).

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).

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.

Answer 2

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

Answer 3

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

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

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

Or you can also do:

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

Answer 4

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ます。

Answer 5

@brentonstrine の回答に対する編集が却下されたので、新しい回答を作成します。しかし、さらに良い解決策については、このページの他の回答を参照してください。

このデモでは、通常の方法ではなく、この新しい方法でログを記録することに関心がある理由を示しています...

// 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 6

デフォルトでは、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 7

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

更新: よりシンプルなソリューション.

---

コンソール出力の変更の理由:

属性/textContent を含めないという要求の背後にある論理的根拠は何ですか?

DevTools 開発者の pfeldman からの返信:

DOM リストをダンプする人々は、密集した外観を高く評価しています。

crbug.com/50316

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 schoolDOM オブジェクトとして取得します。