如何使用Firefox的Web开发工具以3D方式查看网站结构

火狐11为火狐已经令人印象深刻的武器库增加了两个新的网络开发工具。倾斜功能以3D方式可视化网站结构,而样式编辑器可以动态编辑CSS样式表。

3D功能称为倾斜(Tilt),是可视化网站DOM的一种方式。它与现有的文档检查器集成,并使用WebGL在浏览器中显示丰富的3D图形。

TILT-3D网站可视化

您可以从Firefox的页面检查器中访问Tilt。要开始,请从Web developer菜单中选择“Inspect”打开Page Inspector。您还可以在当前页面中单击鼠标右键并选择“Inspect Element”,以在特定元素处启动检查器。

单击检查器工具栏上的“3D”按钮。

激活3D模式后,您将看到页面的结构,但在您旋转它之前,它看起来是平坦的。

该视图与检查器中的其他工具集成在一起。如果已打开HTML或样式面板,则可以单击页面上的某个元素以查看该元素的HTML代码或CSS属性。

更多3D要素

3D可视化功能基于Tilt扩展,但它不具备Tilt扩展的所有功能。如果您想要自定义颜色,甚至将可视化效果导出为3D模型文件,以便与3D编辑程序一起使用,则需要安装Tilt 3D附加组件。一旦您这样做了,您将在Web Developer菜单中获得一个新的“Tilt”选项。

出现提示时,单击取消按钮以使用旧版本的倾斜。

您将在窗口左侧找到用于自定义可视化的控件,并在页面顶部找到其他选项,包括导出功能。

CSS样式编辑器

若要查看和编辑页面的CSS样式表,请从“Web Developer”菜单中打开“样式编辑器”。

样式编辑器列出当前页面上的样式表。通过单击样式表名称左侧的眼睛图标来打开或关闭样式表。通过选择样式表并修改代码来编辑样式表。

更改会立即反映在页面上。如果关闭样式表,页面将丢失其样式信息。如果编辑样式表,您将在键入时看到编辑内容出现在页面上。

您可以将其中一个样式表的副本保存到计算机,从计算机导入现有样式表,或者使用样式编辑器窗口中的“保存”、“导入”或“新建”链接添加新的空白样式表。

3D可视化功能监视当前页面上的更改,并在更改发生时进行通知。在打开3D检查器的情况下使用样式编辑器时,您所做的更改将立即反映在3D视图中。这也适用于修改网页的第三方扩展,如Firebug。