google-chrome-extension - 浏览器插件/扩展/插件一次查看所有元素的 id

Question

尽管进行了广泛的 Google 搜索，但我仍然无法找到我正在寻找的内容，所以我希望有经验的 SO 用户能够找到答案。

我正在寻找一个Firefox或插件，它可以在实际元素之上的叠加层内Chrome自动显示元素的属性值。id例如：

这个想法是能够快速了解id​​页面中使用的属性以及在何处使用的快照，而不必使用诸如 Firebug 或 Firefox/Chrome 的 DOM 检查器之类的工具手动浏览整个页面（仅允许您查看元素一个一个，没有全图）。

有人知道可以做到这一点的Firefox/插件吗？Chrome

Answer 1

Firefox / Chrome 的“Web Developer”扩展包含此功能。可以通过单击“信息 -> 显示锚点”来切换该选项。

• https://addons.mozilla.org/en-US/firefox/addon/web-developer/
• https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm

在火狐中

在 Chrome 中

结果

您也可以在控制台中输入，而不是安装额外的扩展程序，$$('[id]')这会生成具有“id”属性的所有元素的列表。