Chrome 开发工具最近似乎发生了一些变化。记录一个 jQuery 对象,console.log
用于在控制台中显示 DOM 节点的元素。像这样的东西:
[<a href="#employees">Employees</a>]
现在它已经变成了一个像这样的可点击对象:
[<a>, context: <a>]
有没有办法回到旧式的对象日志记录,甚至是不同的方法来调用console
?
我目前正在使用版本23.0.1271.64
。不确定究竟是哪个版本带来了变化。
Chrome 开发工具最近似乎发生了一些变化。记录一个 jQuery 对象,console.log
用于在控制台中显示 DOM 节点的元素。像这样的东西:
[<a href="#employees">Employees</a>]
现在它已经变成了一个像这样的可点击对象:
[<a>, context: <a>]
有没有办法回到旧式的对象日志记录,甚至是不同的方法来调用console
?
我目前正在使用版本23.0.1271.64
。不确定究竟是哪个版本带来了变化。
如果你想让 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 对象记录为对象更有意义。
我发现这很有帮助:
console.log.apply(console, $("a"));
此外,如果你console.log = inspect;
从控制台内部运行,事情会以旧方式输出,但如果你只是从代码中执行它就行不通,它必须来自控制台。
这在 11 月 12 日被 Chrome 开发人员打破,直到今天的 Canary 仍未修复。
使用https://github.com/pimvdb/jquery.chromelog恢复以前的行为作为解决方法。
语法略有不同:
$('a').log()
但它旨在反映 Chrome 的旧工作行为。
这是否回答了您的问题console.dir( element )
..?
更新:
不要这样做
console.dir( $("el") ); // Dont do this
但是使用:
console.dir( document.getElementById("el") ); // Do this
这似乎不会在最近的将来得到解决。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 扩展程序中,它将自动为所有页面执行此操作。