web-dev-qa-db-ja.com

jQueryオブジェクトをChrome Dev Toolsコンソールにログインするときに要素を表示しますか？

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

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

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

[<a>, context: <a>]

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

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

javascriptjquerygoogle-chromegoogle-chrome-devtools
16
David Tuite

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オブジェクトをオブジェクトとしてログに記録する方が理にかなっているため、これが行われていると推測できます。

24
J.Wells

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

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

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

7
brentonstrine

これは11月12日にChrome開発者によって壊され、今日のカナリアの時点では修正されていません。

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

構文は少し異なります。

$('a').log()

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

1
mikemaccana

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

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

$('div');

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

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

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

(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拡張機能 でラップしました。これにより、すべてのページでこれが自動的に行われます。 。

0
Inferpse

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


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

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

しかし、使用：

console.dir( document.getElementById("el") ); // Do this
0
EricG