火狐web开发清楚缓存_如何使用Firefox的Web开发工具查看3D网站结构
火狐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。
火狐web开发清楚缓存