如何在 Chrome、Firebug 和 Firefox 的控制台中显示数组的所有条目？

Posted 2023-03-07

【中文标题】如何在 Chrome、Firebug 和 Firefox 的控制台中显示数组的所有条目？

【英文标题】：How to display all entries of an array within Chrome's, Firebug's and Firefox's console?

【发布时间】：2017-02-19 15:22:42

【问题描述】：

我有一个简单的 sn-p 代码，它从网页中读取链接并将它们添加到这样的数组中：

var a = document.querySelectorAll('div.grid_imageContainer a[id^=detail_]');
var resp = [];
for(var i=0;i<a.length;i++)
  resp.push(a[i].getAttribute('href'))

resp

如果我将其复制到 Chrome、Firebug 或 Firefox 的控制台，我得到的结果是有限的，因为我无法完全看到链接，它们中间有一个省略号（'...'）。但是在 Chrome 中，如果我点击它，它会显示完整的链接。在 Firebug 中，我可以看到悬停的完整链接。

这是一个很长的列表，那么，我怎样才能打印出完整的数组呢？

【问题讨论】：

你试过JSON.stringify吗？

console.dir 或 console.table 作为替代品

console.dir() 输出内容的方式与console.log() 或上面代码的最后一行相同，但console.table() 至少在 Firebug 和 Firefox DevTools 中有效。当您将函数传递给 resp 数组时，Chrome DevTools 不会输出表格。

console.table 在 Firefox 中的工作就像一个魅力谢谢！

【参考方案1】：

萤火虫

Firebug 有偏好，它控制字符串的最大长度。要更改它，请转到about:config，搜索extensions.firebug.stringCropLength 并将其值更改为-1。

那么你应该总是看到完整的字符串。

Chrome 开发者工具

据我所知，控制台中没有调整数组显示的选项。因此，您将不得不手动扩展不同的部分或将它们转换为字符串，例如通过将JSON.stringify() 用作mentioned by evolutionxbox。

Firefox 开发者工具

据我所知，控制台中没有调整数组显示的选项，但您可以单击“更多...”链接以在侧面板中显示数组条目。 那里的字符串是动态裁剪的，因此您需要调整侧面板的大小才能看到完整的字符串。

它们还允许您使用 Jaromanda X 提到的 console.table()（在 Firebug 中相同）输出包含完整字符串的列表。

注意：这三个工具都允许您使用 copy() 命令将数组复制到剪贴板，以便您可以将其粘贴到您喜欢的文本编辑器中。

【讨论】：

您好，console.table 按预期工作！但现在我不能复制它。你能给我一个使用 copy() 的例子吗？ NVM 我跟着链接！非常感谢！