如何使用firefox的web開發者工具以3d方式檢視網站結構
firefox11為Firefox已經令人印象深刻的軟體庫添加了兩個新的web開發工具。Tilt特性可以在3D中視覺化網站結構，而樣式編輯器可以動態編輯CSS樣式表。
3D特性稱為Tilt，是一種視覺化網站DOM的方法。它與現有的文件檢查器整合，並使用WebGL在瀏覽器中顯示豐富的三維圖形。
傾斜–三維網站視覺化
您可以從Firefox的頁面檢查器中訪問Tilt。要開始，請從Web Developer選單中選擇“Inspect”開啟頁面檢查器。也可以在當前頁面中單擊滑鼠右鍵並選擇“Inspect Element”以在特定元素處啟動檢查器。
單擊“檢查器”工具欄上的“3D”按鈕。
在啟用3D模式後，您將看到頁面的結構，但在您旋轉它之前，它看起來是平面的。
Rotate the model by left-clicking, move the image around by right-clicking, and zoom in and out using the mouse wheel.
此檢視與檢查器中的其他工具整合。如果打開了HTML或樣式面板，則可以單擊頁面上的某個元素以檢視該元素的HTML程式碼或CSS屬性。
更多3d功能
三維視覺化功能是基於傾斜擴充套件的，但它沒有傾斜擴充套件的所有功能。如果要自定義顏色，甚至要將視覺化效果匯出為三維模型檔案，以便與三維編輯程式一起使用，則需要安裝Tilt 3D附加元件。一旦你有，你會得到一個新的“傾斜”選項在網頁開發者選單。
出現提示時，單擊“取消”按鈕以使用舊版本的傾斜。
您將在視窗左側找到自定義視覺化效果的控制元件，並在頁面頂部找到其他選項，包括匯出功能。
css樣式編輯器
要檢視和編輯頁面的CSS樣式表，請從webdeveloper選單開啟樣式編輯器。
樣式編輯器列出當前頁面上的樣式表。透過單擊樣式表名稱左側的眼睛圖示來開啟或關閉樣式表。透過選擇樣式表並修改程式碼來編輯樣式表。
更改會立即反映在頁面上。如果關閉樣式表，頁面將丟失其樣式資訊。如果編輯樣式表，則在鍵入時將在頁面上顯示所做的編輯。
可以將其中一個樣式表的副本儲存到計算機中，從計算機中匯入現有樣式表，或者使用“樣式編輯器”視窗中的“儲存”、“匯入”或“新建”連結新增新的空白樣式表。
三維視覺化功能監視當前頁面上的更改，並在發生更改時發出通知。在開啟“三維檢查器”的情況下使用樣式編輯器時，所做的更改將立即反映在三維檢視中。這也適用於修改網頁的第三方擴充套件，如Firebug。
- 發表於 2021-04-12 13:09
- 閱讀 ( 25 )
- 分類：網際網路
你可能感興趣的文章
最好的firefox外掛
Firefox以其外掛而聞名，這是有充分理由的：它們可以讓你的瀏覽器做任何事情。但是哪些外掛是最有用的呢？以下是我們認為最好的外掛，它們做什麼，以及在哪裡可以找到它們。 ...
建立web介面：從何處開始
...付費）或微軟的VS程式碼 瀏覽器，如Mozilla Firefox或Google Chrome 設定主機或本地伺服器（如XAMPP）很有用，但超出了本文的範圍。 ...
前端與後端web開發：哪條路適合您？
...構建我們互動的一方而編寫的程式碼。前端開發人員決定如何設計它們，如何設計它們的樣式；當人們使用它們時，它們實際如何工作。 ...
5名youtube作弊者打破限制，讓youtube再次變得有趣
... 4sp***orblock（chrome，firefox）：自動跳過贊助的片段 ...
使用以下10個基本工具提升您的web開發技能
...程。無論您是在程式碼方面邁出了第一步，還是已經知道如何程式設計，但正在轉向基於瀏覽器的線上應用程式，都有很多東西需要學習。 ...
9種同步firefox和chrome的方法：書籤、密碼等
Mozilla Firefox還是Google Chrome？我們都說！ ...
squarespace與wordpress：哪一個適合你？
...擇，為任何想執行自己網站的人提供了很多功能。但是你如何在兩者之間做出決定呢？ ...
從谷歌chrome切換到mozilla firefox的7個理由
...如果我們忽略internetexplorer（主要用於商業環境），mozillafirefox仍然是Chrome最大的競爭者。而在過去的一年裡，Firefox的市場份額在2018年全年穩定在10%左右。 ...
程式設計師和開發者的15個最佳chrome擴充套件
...停在某個元素上看到字型是什麼，還可以告訴您該字型是如何使用的（例如Google字型、TypeKit等）。 ...
6種不用滑鼠快速瀏覽網頁的方法
... 如果你是一個Firefox使用者，想要嘗試Vimium，有一個叫做Vimium FF的埠。 ...
