火狐web開發清楚緩存
Firefox 11 added two new web developer tools to Firefox’s already impressive arsenal. The Tilt feature visualizes website structures in 3D, while the Style Editor can edit CSS stylesheets on the fly.
Firefox 11在Firefox已經令人印象深刻的武器庫中添加了兩個新的Web開發人員工具。 “傾斜”功能以3D形式顯示網站結構，而“樣式編輯器”可以即時編輯CSS樣式表。
The 3D feature, known as Tilt, is a way of visualizing a website’s DOM. It integrates with the existing Document Inspector and uses WebGL to display rich 3D graphics in your browser.
3D功能(稱為傾斜)是一種可視化網站DOM的方式。 它與現有的文檔檢查器內建，并使用WebGL在浏覽器中顯示豐富的3D圖形。
傾斜– 3D網站可視化 (Tilt – 3D Website Visualization)
You can access Tilt from within Firefox’s Page Inspector. To get started, open the Page Inspector by selecting “Inspect” from the Web Developer menu. You can also right-click in the current page and select “Inspect Element” to start the inspector at a specific element.
您可以從Firefox的Page Inspector中通路Tilt。 首先，通過從Web Developer菜單中選擇“檢查”來打開頁面檢查器。 您也可以右鍵單擊目前頁面，然後選擇“檢查元素”以在特定元素處啟動檢查器。
Click the “3D” button on the inspector toolbar.
單擊檢查器工具欄上的“ 3D”按鈕。
You’ll see the page’s structure after activating 3D mode, but it will look flat until you rotate it.
激活3D模式後，您将看到頁面的結構，但是直到您旋轉頁面，它的外觀才會變得平坦。
Rotate the model by left-clicking, move the image around by right-clicking, and zoom in and out using the mouse wheel.
左鍵單擊可旋轉模型，右鍵單擊可移動圖像，并使用滑鼠滾輪放大和縮小。
This view is integrated with the other tools in the inspector. If you have the HTML or Style panels open, you can click an element on hte page to view that element’S HTML code or CSS properties.
該視圖與檢查器中的其他工具內建在一起。 如果打開了HTML或“樣式”面闆，則可以在該頁面上單擊某個元素以檢視該元素HTML代碼或CSS屬性。
更多3D功能 (More 3D Features)
The 3D visualization feature was based off the Tilt extension, but it doesn’t have all the features of the Tilt extension. if you want to customize the colors or even export the visualization as a 3D model file for use with a 3D editing program, you’ll need to install the Tilt 3D add-on. Once you have, you’ll get a new “Tilt” option in the Web Developer menu.
3D可視化功能基于Tilt擴充名，但是不具有Tilt擴充名的所有功能。 如果您要自定義顔色，甚至将可視化檔案導出為3D模型檔案以與3D編輯程式配合使用，則需要安裝Tilt 3D插件。 擁有之後，您将在Web Developer菜單中獲得一個新的“ Tilt”選項。
Click the Cancel button to use the old version of Tilt when prompted.
出現提示時，單擊“取消”按鈕以使用舊版本的“傾斜”。
You’ll find controls to customize the visualization at the left side of the window and other options, including the export feature, at the top of the page.
您将在視窗的左側找到用于自定義可視化效果的控件，并在頁面頂部找到其他選項(包括導出功能)。
CSS樣式編輯器 (CSS Style Editor)
To view and edit a page’s CSS style sheets, open the Style Editor from the Web Developer menu.
要檢視和編輯頁面CSS樣式表，請從Web Developer菜單中打開“樣式編輯器”。
The Style editor lists the stylesheets on the current page. Toggle a stylesheet on or off by clicking the eye icon to the left of the stylesheet’s name. Edit a stylesheet by selecting it and modifying the code.
樣式編輯器在目前頁面上列出樣式表。 通過單擊樣式表名稱左側的眼睛圖示，可以打開或關閉樣式表。 通過選擇樣式表并修改代碼來編輯樣式表。
Changes are reflected on the page immediately. If you toggle a stylesheet off, the page will lose its style information. If you edit a stylesheet, you’ll see the edits appear on the page while you type.
更改将立即反映在頁面上。 如果關閉樣式表，則頁面将丢失其樣式資訊。 如果您編輯樣式表，您會在鍵入時看到編輯内容出現在頁面上。
You can save a copy of one of the stylesheets to your computer, import an existing stylesheet from your computer, or add a new, blank stylesheet with the Save, Import, or New links in the Style Editor window.
您可以将樣式表之一的副本儲存到計算機，從計算機導入現有樣式表，或者使用“樣式編輯器”視窗中的“儲存”，“導入”或“建立”連結添加新的空白樣式表。
The 3D visualization feature watches for changes on the current page and notices when changes occur. When you use the Style Editor with the 3D inspector open, your changes will be reflected immediately in the 3D view. This also works with third-party extensions that modify web pages, such as Firebug.
3D可視化功能會監視目前頁面上的更改并在發生更改時發出通知。 在打開3D檢查器的情況下使用樣式編輯器時，所做的更改将立即反映在3D視圖中。 這也适用于修改網頁的第三方擴充，例如Firebug。
翻譯自: https://www.howtogeek.com/108763/how-to-use-firefoxs-web-developer-tools-to-view-website-structures-in-3d/
火狐web開發清楚緩存