用 Firebug 动态调试和优化应用程序（2）HTML 和 CSS 工具

look_w

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 盒编辑