16

最近、Chrome Dev Tools で何かが変わったようです。console.logコンソールに DOM ノードの要素を表示するために使用されるjQuery オブジェクトのログ。このようなもの：

[<a href="#employees">Employees</a>]

これで、次のようなクリック可能なオブジェクトに変更されました。

[<a>, context: <a>]

古いスタイルのオブジェクト ロギングに戻る方法や、別のメソッドを呼び出す方法はありますconsoleか?

私は現在バージョンを使用してい23.0.1271.64ます。どのバージョンが変更をもたらしたか正確にはわかりません。

4

5 に答える 5

28

console.log（）でDOM要素を吐き出したい場合は、jQueryオブジェクトではなくDOM要素をログに記録する必要があります。DOM要素は、jQueryセレクターの0番目の要素として常にアクセスできます。したがって、jQueryセレクターから実際のDOM要素にアクセスする方法は次のようになります。

   $("#someSingleDOMObjectSelector")[0]

また、DOM要素を希望どおりにログに表示するには、次のようにします。

   console.log($("#someSingleDOMObjectSelector")[0]);

また、複数のDOM要素を含む/返すjQueryセレクターの場合、次のようにループさせることができます。

   $('.someMultipleDOMObjectSelector').each(function(){
           //console.log($(this)[0]); //or -->
           console.log(this);
   });

Chromeの開発ツールがこれを行う理由については、jQueryオブジェクトをオブジェクトとしてログに記録する方が理にかなっているため、これが行われていると推測できます。

于 2012-11-26T15:15:11.283 に答える
7

私はこれが役に立ちました：

console.log.apply(console, $("a"));

また、コンソール内から実行するconsole.log = inspect;と、古い方法で出力されますが、コードから実行するだけでは機能しません。コンソールから実行する必要があります。

于 2012-11-27T22:45:31.023 に答える
1

これは 11 月 12 日に Chrome 開発者によって中断され、今日の Canary の時点では修正されていません。

回避策として、 https://github.com/pimvdb/jquery.chromelogを使用して以前の動作を復元してください。

構文は少し異なります。

$('a').log()

ただし、Chrome の古い動作動作を反映するように設計されています。

于 2013-01-17T16:36:22.833 に答える
0

これはあなたの質問に答えますかconsole.dir( element )..？


更新：
これを行わないでください

console.dir( $("el") ); // Dont do this

しかし、使用してください：

console.dir( document.getElementById("el") ); // Do this
于 2012-11-26T15:27:16.493 に答える
0

これは近い将来修正されないようです。Chrome Canary にはまだこの問題があります。オブジェクトのプレビューでの新しいコンソールの動作は気に入っていますが、jQuery オブジェクトの例外が必要です。

console.log以前のように jQuery オブジェクトを表示するように少し「パッチ」を当てることができます。jQuery オブジェクトを個別の引数のリストに「変換」することができます。例えば：

$('div');

コンソールでは、次のように表示できます。

console.log('[', div[0], div[1], ..., ']');

console.logjQuery オブジェクトのみの引数を変更するスクリプトを作成しました。

(function(){
    var arraySlice = Array.prototype.slice;
    var originalFunction = console.log;

    var replaceObject = function(sourceArray, objectIndex) {
        var currentObject = sourceArray[objectIndex];
        var spliceArguments = Array.prototype.slice.apply(currentObject);

        if(currentObject.length) {
            // add commas and brackets
            for(var i = spliceArguments.length - 1; i > 0; i--) {
                spliceArguments.splice(i, 0, ',');
            }
            spliceArguments.splice(0, 0, objectIndex, 1, '[');
            spliceArguments.splice(spliceArguments.length, 0, ']');

            // patch source array
            sourceArray.splice.apply(sourceArray, spliceArguments);
        } else {
            sourceArray.splice(objectIndex, 1, '[]');
        }
    };

    var fixFunction = function() {
    if(typeof jQuery === 'function' && jQuery.fn) {
        var newArgs = Array.prototype.slice.apply(arguments);
        for (var i = newArgs.length - 1; i >= 0; i--) {
            if(newArgs[i] instanceof jQuery) {
                replaceObject(newArgs, i);
            }
        }
        originalFunction.apply(console, newArgs);
    } else {
        originalFunction.apply(console, arguments);
    }
    };

    fixFunction.toString = function() {
        return originalFunction.toString();
    };

    console.log = fixFunction;
}())

このスクリプトをページに含めてコンソールの動作を上書きすることができますが、これはこの問題を修正する良い方法ではないため、これをすべてのページで自動的に実行するChrome 拡張機能にラップしました。

于 2013-01-27T14:53:03.127 に答える