电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 用 Firebug 动态调试和优化应用程序（2）HTML 和 CSS 工具 [打印本页]

作者: look_w 时间: 2018-8-9 10:03 标题: 用 Firebug 动态调试和优化应用程序（2）HTML 和 CSS 工具

HTML 和 CSS 工具HTML 和 CSS 工具包括：HTML 检查和编辑、CSS 编辑和 CSS 可视化。
检查和编辑 HTML可以使用 HTML 检查特性在源代码中定位可视 HTML。

在 Firebug 窗口，单击 Inspect。
将鼠标移到任何一个 HTML 组件之上。这样就可以在 Firebug 窗口上看到该 HTML 元素（被蓝色方框围绕）和 HTML 源代码。如图 3 的示例：图 3. 在 Firebug 检查 HTML
单击选中的 HTML 元素。有趣的是这会使此次检查“锁定”到所选定的元素。
可以转到 Firebug 窗口并单击 Edit 编辑选定的元素。图 4 给出了 Firebug 编辑窗口以及浏览器窗口中已编辑的文本。“Editing with Firebug” 已经代替了原先的 Ajax 标题。
图 4. 编辑 HTML

在检查元素时，将会看到 Firebug 窗口内的元素嵌套，如图 5 所示：
图 5. 元素嵌套

编辑 CSS 还可以通过检查这个 Web 页面进行 CSS 编辑。Inspection 视图会显示相关的 CSS 条目，包括继承样式。如图 6 的示例：
图 6. CSS 检查

CSS 工具还可用来编辑 CSS 即时属性、禁用属性、自动完成和图片预览，如图 7 所示：
图 7. CSS 图片预览

CSS 的可视化 CSS 的可视化在检查 HTML（回顾中的蓝色边框）已经展示过了。Firebug Layout 选项卡显示了更多的信息，比如间隙、偏移和其他相关的量度。图 8 中的布局窗口则显示了一个导航元素的量度：
图 8. CSS 盒的量度

图 9 展示了能即时编辑 CSS 盒的奇妙的 Firebug 特性：
图 9. CSS 盒编辑

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)