Firefox Developer Tools中的3D视图有哪些用例

Question

我最近注意到Firefox开发人员工具中的3D模式，因为您可以在3D视图中看到您的页面。我们可以通过拖动来旋转和重新定向3D视图。任何人都可以给我使用3D视图的主要用例吗？

示例3D视图：

Answer 1

我能想到的一些用途：

• 查看页面的结构......每当我创建页面时，我都会进入3D视图并查找注释1中提到的“摩天大楼”。我通常会自行重新编码以避免不必要的iframe等。
• 查找容器，例如已按内容调整大小的表格单元格。
• 查找页面外数千像素的任何元素，例如了解网页的工作原理或页面总是有滚动条的原因。
• 教人们HTML的工作原理。
• 发现XSS漏洞，请参阅https://gist.github.com/tacomanator/3127271

但是，如果你能想出一种方法，我们可以让它更有用，那么请告诉我们https://ffdevtools.uservoice.com

Answer 2

这个工具有一个有趣的历史 - 它最初在2011年作为Google Summer of Code项目创建为add-on by Victor Porof。它后来被添加到Firefox的内置开发人员工具中，但默认情况下未启用。

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