在Chrome Dev Tools控制台中記錄jQuery對象時顯示元素？

Question

最近Chrome Dev Tools似乎發生了一些變化。 使用console.log記錄jQuery對象，用於在console.log中顯示DOM節點的Element。 像這樣的東西：

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

現在它已經改為像這樣的可點擊對象：

[<a>, context: <a>]

有沒有辦法回到舊式對象日志記錄甚至是不同的方法來調用console ？

我目前正在使用版本23.0.1271.64 。 不確定哪個版本帶來了變化。

Answer 1

如果希望console.log（）吐出DOM元素，則需要記錄DOM元素而不是jQuery對象。 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對象記錄為對象更有意義。

Answer 2

我發現這有用：

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

另外，如果你運行console.log = inspect; 從控制台內部，事物將以舊方式輸出，但如果您只是從代碼中執行它，則它不起作用，它必須來自控制台。

Answer 3

Chrome瀏覽器開發人員於11月12日對此進行了破解，並且今天尚未修復Canary。

使用https://github.com/pimvdb/jquery.chromelog將以前的行為恢復為變通方法。

語法略有不同：

$('a').log()

但它旨在反映Chrome的舊的工作行為。

Answer 4

這回答你的問題console.dir( element ) ..？

更新：
不要這樣做

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

但使用：

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

Answer 5

看來這不會在最近的將來得到解決。 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擴展程序中 ，這將自動為所有頁面執行此操作。