Mogash

米ozilla Firefox 11.x+ 版支持 3D 視圖。這是一個基於 WebGL 的網站可視化工具，可突出顯示頁面結構。如果您的元素嵌套在 DOM 中，您可以堆疊它們以查看代碼和頁面輸出之間的關係，顯示隱藏或離頁元素。您可以放大、縮小、旋轉和平移視圖以從舒​​適的視角查看頁面。這篇博文解釋瞭如何在 X11 上啟用 3D 視圖。 請注意，3D 視圖不適合日常瀏覽需求。幫助發現錯誤（嵌套問題或 XSS 漏洞就個人而言，我使用 3D 視圖作為了解頁面上的 div、span 和其他元素的工具。

我需要

需要支持 WebGL 的 3D 加速顯卡，例如 NVIDIA、ATI/AMD 和 Intel 顯卡（用於渲染交互式 3D 和 2D 圖形的 JavaScript API）。但是，並非所有卡都受支持。看 這一頁 我想知道更多細節。

如何在 X11 中啟用 3D 視圖？

您應該打開檢查器。
Right-click page > Select inspect element (Q)

在底部，像這樣：[3D ビュー]出現一個帶有按鈕的欄。

如何旋轉頁面並以 3D 形式查看？

1. 您可以使用鼠標滾輪放大/縮小。
2. 使用鼠標按鈕選擇元素。
3. 按住鼠標按鈕可向左/向右/向上/向下移動。

鍵盤功能

1. 放大/縮小：+ / –
2. 向左/向右旋轉：a/d
3. 垂直旋轉：w/s
4. 平移左/右：← / →
5. 向上/向下平移：↑/↓
6. 重置縮放級別：0
7. 焦點選定節點：f
8. 重置視圖：r
9. 隱藏當前節點：x

示例輸出：