MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

翻譯不完整。請協助 翻譯此英文文件

自 Firefox 47 開始,3D View 不再可用

有個 Tilt 3D 套件提供相同功能。但是,請記得這和內建版本一樣,無法在 multiprocess Firefox 使用。

當您點擊 3D View 按鈕,頁面將進入 3D 檢視模式,在這模式之下,您將看到頁面以 HTML 標籤層次,形成從底部向外突起的 3D 模型。這功能讓您可用更簡單的方式檢視頁面結構。

經由點擊及拖曳,您可以旋轉、重新定位 3D 圖像,以看到不同角度來確定結構。原先於屏幕外的元素將變為可見,如此一來您將可看見他們和可見元素的關係。您可以點擊元素經由 HTML panel 或是 Style panel 查看 HTML。相反地,您也能點擊導航列去選擇選取 3D View 中的特定元素。

如果您在頁面檢測器沒看到 3D 按鈕,可能是您的顯示卡驅動需要更新。查看無法使用的清單以取得更多資訊

操作 3D View

該怎麼使用鍵盤快速鍵及滑鼠控制 3D View?

功能 鍵盤按鍵 滑鼠
縮放 + / - 滾輪上下
左右旋轉 a / d 滑鼠左右
上下翻轉 w / s 滑鼠上下
左右平移 ← / → 滑鼠左右
上下平移 ↑ / ↓ 滑鼠上下
重設縮放大小 0 重設縮放大小為預設值
聚焦於選擇的節點 f 請確定該節點可見
重設 3D View r 將縮放、旋轉、位置重設為預設值
隱藏節點 x

隱藏選擇的節點,這在您需要找到被遮蓋的節點時很實用

3D view 的使用時機

下列時機中,3D View 很實用:

  • If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.
  • If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.
  • You can get a look at how your page is structured to see if there may be ways to optimize your layout.
  • 另外,這看起來超棒der

另見

文件標籤與貢獻者

 此頁面的貢獻者: Sean64, Seafox
 最近更新: Sean64,