米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 形式查看?
- 您可以使用鼠標滾輪放大/縮小。
- 使用鼠標按鈕選擇元素。
- 按住鼠標按鈕可向左/向右/向上/向下移動。
鍵盤功能
- 放大/縮小:+ / –
- 向左/向右旋轉:a/d
- 垂直旋轉:w/s
- 平移左/右:← / →
- 向上/向下平移:↑/↓
- 重置縮放級別:0
- 焦點選定節點:f
- 重置視圖:r
- 隱藏當前節點:x
示例輸出: