javascript - 在 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 对象记录为对象更有意义。