如何使用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
- 阅读 ( 192 )
- 分类：互联网
你可能感兴趣的文章
最好的firefox插件
... 如果你是一个开发者，你已经在使用它了。如果你只是好奇，要知道这是一种通过实时编辑CSS、HTML和Javascript来定制任何网站的方法。观察发生的事情并学习！ ...
创建web界面：从何处开始
...以移植并适用于不同的文档。当内容和视觉设计分开时，开发者在视觉设计中获得了更多的灵活性和一致性。 ...
9种同步firefox和chrome的方法：书签、密码等
...得更进一步，把它们打扮成相配的装束。选择来自同一个开发者或者灵感来源相同的主题。例如，如果您使用Firefox的Dark主题，也可以安装它的Chrome对应的，Dark主题Chrome。有了这个时髦的扩展，您还可以在两种浏览器上使用一个...
从谷歌chrome切换到mozilla firefox的7个理由
...如果我们忽略internetexplorer（主要用于商业环境），mozillafirefox仍然是Chrome最大的竞争者。而在过去的一年里，Firefox的市场份额在2018年全年稳定在10%左右。 ...
程序员和开发者的15个最佳chrome扩展
...力Chrome扩展，这两个东西可能会让你作为一个使用Chrome的开发者感到沮丧。 ...
什么是浏览器扩展？
...i浏览器。当然，微软的Edge浏览器也支持扩展。 与第三方开发者和App Store如何在iPhone上引爆应用的流行类似，一旦开发者能够创建扩展并在第一方web商店中分发，它们就变得非常流行。 扩展可以做什么？ 浏览器扩展所能做的范...
如何在firefox中启用脱机浏览
...所以他们存储在缓存中查看时，你脱机。然后你可以使用Firefox的“离线模式”来查看它们。 在Firefox中有两种离线浏览方式。第一种方法使用菜单栏，现在默认情况下，菜单栏在Firefox中隐藏。要临时显示菜单栏，请按键盘上的...
如何使用steamos桌面
...。别让这个名字蒙蔽了你；Iceweasel实际上是伪装的Mozilla Firefox网络浏览器。 相关：什么是Linux发行版，它们之间有什么不同？ 为什么叫冰鼬？说来话长。简言之，虽然Mozilla Firefox的代码是开源的、可自由重用和可再发行的，但...
为什么浏览器插件会消失，是什么在取代它们
...导致整个web浏览器崩溃时。谢天谢地，由于Chrome的沙盒和Firefox的插件隔离，崩溃的插件现在只会自己崩溃。浏览器开发人员无法修复这些崩溃；他们必须依赖插件的开发人员来修复它们。如果某个插件正在崩溃，您不能直接切...
Ubuntu12.10的8个新特性quantal quetzal
...成，旨在使Gmail等web应用成为Ubuntu桌面的一流公民。访问Firefox或Chromium中支持的网站，您将看到安装web应用程序的提示。例如，您可以使用此功能将Gmail固定到您的启动程序中–您将获得一个专用的Gmail窗口，并在Ubuntu的消息菜单...
0 篇文章
