16

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

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

现在它已经变成了一个像这样的可点击对象：

[<a>, context: <a>]

有没有办法回到旧式的对象日志记录，甚至是不同的方法来调用console？

我目前正在使用版本23.0.1271.64。不确定究竟是哪个版本带来了变化。

4

5 回答 5

28

如果你想让 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 对象记录为对象更有意义。

于 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.log只修改 jQuery 对象的参数：

(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 回答