Question

最近Chrome Dev Tools似乎发生了一些变化。使用console.log记录jQuery对象，用于在控制台中显示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 Extension中，这将自动为所有页面执行此操作。

在Chrome Dev Tools控制台中记录jQuery对象时显示元素？

5 个答案: