在 Chrome 开发工具控制台中记录 jQuery 对象时显示元素？

Question

Chrome 开发工具最近似乎发生了一些变化。使用 console.log 记录一个 jQuery 对象，用于在控制台中显示 DOM 节点的元素。像这样的：

[<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 Extension 中，它将自动为所有页面执行此操作。