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 ビュー]出現一個帶有按鈕的欄。

圖 02:底部 3D 視圖按鈕

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

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

鍵盤功能

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

示例輸出:

圖 03:3D 視圖在行動