如何使用firefox的web開發者工具以3d方式檢視網站結構

firefox11為Firefox已經令人印象深刻的軟體庫添加了兩個新的web開發工具。Tilt特性可以在3D中視覺化網站結構,而樣式編輯器可以動態編輯CSS樣式表。...

如何使用firefox的web開發者工具以3d方式檢視網站結構

firefox11為Firefox已經令人印象深刻的軟體庫添加了兩個新的web開發工具。Tilt特性可以在3D中視覺化網站結構,而樣式編輯器可以動態編輯CSS樣式表。

3D特性稱為Tilt,是一種視覺化網站DOM的方法。它與現有的文件檢查器整合,並使用WebGL在瀏覽器中顯示豐富的三維圖形。

傾斜–三維網站視覺化

您可以從Firefox的頁面檢查器中訪問Tilt。要開始,請從Web Developer選單中選擇“Inspect”開啟頁面檢查器。也可以在當前頁面中單擊滑鼠右鍵並選擇“Inspect Element”以在特定元素處啟動檢查器。

如何使用firefox的web開發者工具以3d方式檢視網站結構

單擊“檢查器”工具欄上的“3D”按鈕。

如何使用firefox的web開發者工具以3d方式檢視網站結構

在啟用3D模式後,您將看到頁面的結構,但在您旋轉它之前,它看起來是平面的。

如何使用firefox的web開發者工具以3d方式檢視網站結構

Rotate the model by left-clicking, move the image around by right-clicking, and zoom in and out using the mouse wheel.如何使用firefox的web開發者工具以3d方式檢視網站結構

此檢視與檢查器中的其他工具整合。如果打開了HTML或樣式面板,則可以單擊頁面上的某個元素以檢視該元素的HTML程式碼或CSS屬性。

如何使用firefox的web開發者工具以3d方式檢視網站結構

更多3d功能

三維視覺化功能是基於傾斜擴充套件的,但它沒有傾斜擴充套件的所有功能。如果要自定義顏色,甚至要將視覺化效果匯出為三維模型檔案,以便與三維編輯程式一起使用,則需要安裝Tilt 3D附加元件。一旦你有,你會得到一個新的“傾斜”選項在網頁開發者選單。

如何使用firefox的web開發者工具以3d方式檢視網站結構

出現提示時,單擊“取消”按鈕以使用舊版本的傾斜。

如何使用firefox的web開發者工具以3d方式檢視網站結構

您將在視窗左側找到自定義視覺化效果的控制元件,並在頁面頂部找到其他選項,包括匯出功能。

如何使用firefox的web開發者工具以3d方式檢視網站結構

css樣式編輯器

要檢視和編輯頁面的CSS樣式表,請從webdeveloper選單開啟樣式編輯器。

如何使用firefox的web開發者工具以3d方式檢視網站結構

樣式編輯器列出當前頁面上的樣式表。透過單擊樣式表名稱左側的眼睛圖示來開啟或關閉樣式表。透過選擇樣式表並修改程式碼來編輯樣式表。

如何使用firefox的web開發者工具以3d方式檢視網站結構

更改會立即反映在頁面上。如果關閉樣式表,頁面將丟失其樣式資訊。如果編輯樣式表,則在鍵入時將在頁面上顯示所做的編輯。

如何使用firefox的web開發者工具以3d方式檢視網站結構

可以將其中一個樣式表的副本儲存到計算機中,從計算機中匯入現有樣式表,或者使用“樣式編輯器”視窗中的“儲存”、“匯入”或“新建”連結新增新的空白樣式表。


三維視覺化功能監視當前頁面上的更改,並在發生更改時發出通知。在開啟“三維檢查器”的情況下使用樣式編輯器時,所做的更改將立即反映在三維檢視中。這也適用於修改網頁的第三方擴充套件,如Firebug。

  • 發表於 2021-04-12 13:09
  • 閱讀 ( 23 )
  • 分類:網際網路

你可能感興趣的文章

最好的firefox外掛

Firefox以其外掛而聞名,這是有充分理由的:它們可以讓你的瀏覽器做任何事情。但是哪些外掛是最有用的呢?以下是我們認為最好的外掛,它們做什麼,以及在哪裡可以找到它們。 ...

  • 發佈於 2021-03-14 07:47
  • 閲讀 ( 65 )

建立web介面:從何處開始

...付費)或微軟的VS程式碼 瀏覽器,如Mozilla Firefox或Google Chrome 設定主機或本地伺服器(如XAMPP)很有用,但超出了本文的範圍。 ...

  • 發佈於 2021-03-16 05:47
  • 閲讀 ( 66 )

前端與後端web開發:哪條路適合您?

...構建我們互動的一方而編寫的程式碼。前端開發人員決定如何設計它們,如何設計它們的樣式;當人們使用它們時,它們實際如何工作。 ...

  • 發佈於 2021-03-18 15:23
  • 閲讀 ( 46 )

5名youtube作弊者打破限制,讓youtube再次變得有趣

... 4sp***orblock(chrome,firefox):自動跳過贊助的片段 ...

  • 發佈於 2021-03-19 08:28
  • 閲讀 ( 39 )

使用以下10個基本工具提升您的web開發技能

...程。無論您是在程式碼方面邁出了第一步,還是已經知道如何程式設計,但正在轉向基於瀏覽器的線上應用程式,都有很多東西需要學習。 ...

  • 發佈於 2021-03-20 14:01
  • 閲讀 ( 51 )

9種同步firefox和chrome的方法:書籤、密碼等

Mozilla Firefox還是Google Chrome?我們都說! ...

  • 發佈於 2021-03-20 15:56
  • 閲讀 ( 76 )

squarespace與wordpress:哪一個適合你?

...擇,為任何想執行自己網站的人提供了很多功能。但是你如何在兩者之間做出決定呢? ...

  • 發佈於 2021-03-20 20:13
  • 閲讀 ( 62 )

從谷歌chrome切換到mozilla firefox的7個理由

...如果我們忽略internetexplorer(主要用於商業環境),mozillafirefox仍然是Chrome最大的競爭者。而在過去的一年裡,Firefox的市場份額在2018年全年穩定在10%左右。 ...

  • 發佈於 2021-03-22 03:57
  • 閲讀 ( 53 )

程式設計師和開發者的15個最佳chrome擴充套件

...停在某個元素上看到字型是什麼,還可以告訴您該字型是如何使用的(例如Google字型、TypeKit等)。 ...

  • 發佈於 2021-03-25 18:14
  • 閲讀 ( 62 )

6種不用滑鼠快速瀏覽網頁的方法

... 如果你是一個Firefox使用者,想要嘗試Vimium,有一個叫做Vimium FF的埠。 ...

  • 發佈於 2021-03-29 08:04
  • 閲讀 ( 85 )
e13537220
e13537220

0 篇文章

作家榜

  1. admin 0 文章
  2. 孫小欽 0 文章
  3. JVhby0 0 文章
  4. fvpvzrr 0 文章
  5. 0sus8kksc 0 文章
  6. zsfn1903 0 文章
  7. w91395898 0 文章
  8. SuperQueen123 0 文章