Javascript 在 Chrome Dev Tools 控制台中记录 jQuery 对象时显示元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13552432/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Show Elements when logging jQuery object in Chrome Dev Tools console?
提问by David Tuite
It seems like something has changed lately with Chrome Dev Tools. Logging a jQuery object with console.logused to show the Element of the DOM node in the console. Something like this:
Chrome Dev Tools 最近似乎发生了一些变化。记录一个 jQuery 对象，console.log用于在控制台中显示 DOM 节点的元素。像这样的东西：
[<a href="#employees">Employees</a>]
Now it has changed to a clickable object like this:
现在它变成了一个可点击的对象，如下所示：
[<a>, context: <a>]
Is there a way to go back to the old style of object logging or even a different method to call on console?
有没有办法回到旧风格的对象日志记录，甚至是调用不同的方法console？
I'm currently using version 23.0.1271.64. Not sure exactly which version brought the change.
我目前正在使用版本23.0.1271.64. 不确定究竟是哪个版本带来了变化。
回答by J.Wells
If you want console.log() to spit out the DOM element, you need to log the DOM element and not the jQuery object. The DOM element is always accessible as the 0th element of the jQuery selector. So, the way you would access the actual DOM element from a jQuery selector is like this:
如果你想让 console.log() 吐出 DOM 元素，你需要记录 DOM 元素而不是 jQuery 对象。DOM 元素始终可以作为 jQuery 选择器的第 0 个元素访问。因此，您从 jQuery 选择器访问实际 DOM 元素的方式如下：
$("#someSingleDOMObjectSelector")[0]
And to get the DOM element to appear in the log the way you would like, you would do this:
为了让 DOM 元素以您想要的方式出现在日志中，您可以这样做：
console.log($("#someSingleDOMObjectSelector")[0]);
And for jQuery selectors which contain/return multiple DOM elements, you could loop them, like this:
对于包含/返回多个 DOM 元素的 jQuery 选择器，您可以循环它们，如下所示：
$('.someMultipleDOMObjectSelector').each(function(){
//console.log($(this)[0]); //or -->
console.log(this);
});
As to why Chrome's dev tools do this, I can only guess that it is done because it makes more sense to log a jQuery object as an object.
至于为什么 Chrome 的开发工具会这样做，我只能猜测是这样做的，因为将 jQuery 对象记录为对象更有意义。
回答by brentonstrine
I've found this helpful:
我发现这很有帮助：
console.log.apply(console, $("a"));
Also, if you run console.log = inspect;from inside the console, things will output the old way, but it doesn't work if you just do it from your code, it has to be from the console.
此外，如果您console.log = inspect;从控制台内部运行，事情会以旧方式输出，但是如果您只是从代码中执行它，则它不起作用，它必须来自控制台。
回答by mikemaccana
This was broken by the Chrome developers in November 12 and hasn't been fixed as of Canary today.
这在 11 月 12 日被 Chrome 开发人员打破，截至今天 Canary 尚未修复。
Use https://github.com/pimvdb/jquery.chromelogto restore the previous behavior as a workaround.
使用https://github.com/pimvdb/jquery.chromelog恢复以前的行为作为解决方法。
The syntax is slightly different:
语法略有不同：
$('a').log()
But it's designed to mirror the old, working behavior of Chrome.
但它旨在反映 Chrome 的旧工作行为。
回答by Inferpse
It seems that this won't be fixed in nearest future. Chrome Canary still have this issue. I like new console behavior with objects preview, but I want an exception for jQuery objects.
似乎这不会在最近的将来修复。Chrome Canary 仍然存在这个问题。我喜欢带有对象预览的新控制台行为，但我想要 jQuery 对象的例外。
You can "patch" console.loga little bit to make it display jQuery objects like before.
It's possible to "convert" jQuery objects to list of separate arguments. For example:
您可以console.log稍微“修补”一下，使其像以前一样显示 jQuery 对象。可以将 jQuery 对象“转换”为单独的参数列表。例如：
$('div');
In console could be displayed like:
在控制台中可以显示如下：
console.log('[', div[0], div[1], ..., ']');
I wrote the script which will modify console.logarguments for jQuery objects only:
我编写的脚本只会修改console.logjQuery 对象的参数：
(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;
}())
Now you can include this script in your page to override console behavior, but this is not a good way to fix this issue, so I've wrapped this in Chrome Extensionwhich will do this automatically for all pages.
现在您可以在页面中包含此脚本以覆盖控制台行为，但这不是解决此问题的好方法，因此我将其封装在Chrome 扩展程序中，它将自动为所有页面执行此操作。
回答by EricG
Does this answer your question console.dir( element )..?
这是否回答了您的问题console.dir( element )..？
Update:
Dont do this
更新：
不要这样做
console.dir( $("el") ); // Dont do this
But use:
但是使用：
console.dir( document.getElementById("el") ); // Do this
