Firefox 开发者工具中 3D 视图的用例是什么

What are the use cases for 3D view in Firefox Developer Tools

我最近注意到 Firefox 开发人员工具中的 3D 模式,因为您可以在 3D 视图中查看您的页面。我们可以通过拖动来旋转和重新定向 3D 视图。谁能告诉我使用 3D 视图的主要用例?

示例 3D 视图:

此工具有一段有趣的历史 - 它最初是作为 add-on by Victor Porof 于 2011 年作为 Google 代码之夏项目创建的。它后来被添加到 Firefox 的内置开发者工具中,但默认情况下不启用。

主要用例是它允许您更轻松地可视化标记的结构,例如识别嵌套的 DOM 结构,例如 social network-related buttons on some sites:

我能想到的有几个用途:

  • 查看页面的结构...每当我创建页面时,我都会进入 3D 视图并寻找评论 1 中提到的 "skyscrapers"。我通常自己重新编码以避免不必要的 iframe 等
  • 查找容器,例如table 个已根据内容调整大小的单元格。
  • 查找页面外数千像素的任何元素,例如弄清楚网页是如何工作的,或者为什么网页总是有滚动条。
  • 教人们如何 HTML 工作。
  • 发现 XSS 漏洞,请参阅 https://gist.github.com/tacomanator/3127271

但是,如果您能想出一种方法让我们让它更有用,请在 https://ffdevtools.uservoice.com

上告诉我们