怎样使用Firebug图文详解

步骤

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

 

Firebug本是Firefox浏览器下一个出色的网页设计插件。在此就简要介绍下Firebug的安装和基本使用

工具/原料

• Firefox浏览器， Firebug插件

步骤/方法

1.  
   Firebug的安装。安装完毕最新版火狐浏览器后（本例版本为5.0.1），点击左上角firefox菜单，选择附加组件，如下图：
   
2.  
   之后在出现的搜索栏中输入“firebug”关键词，出现firebug搜索结果，点击安装后，重启浏览器即可完成安装过程，如下图：
   
3.  
   Firebug的启动完成安装，重启浏览器后，即可按“F12”快捷键启动Firebug插件，也可点击firefox地址栏右边firebug图标启动，启动后，页面将分栏显示，Firebug各项功能显示在下方，如下图所示：
   
4.  
   Firefox的主要菜单选项有控制台、HTML、CSS、脚本、DOM、网络六个，上述功能的配合使用能够满足网页设计的各项要求。
5.  
   1、控制台（Console）功能：控制台得主要作用是用来显示网页各类错误信息，并可对日志进行打印处理。同时可以在进行javascript调试的时候当作命令行窗口使用，并通过概况子选项说明javascript代码执行的相关信息。
6.  
   2、HTML功能：此菜单标签功能，主要用于查看当前页面的源代码功能，并可进行编辑，时时显示，从而实现页面最佳效果。启用此标签后界面如下：
   
7.  
   3、CSS功能：点击CSS菜单标签，可查看所有的CSS定义信息，同时也可以通过双击来达到修改页面样式的效果，如下图所示：
   
8.  
   4、脚本（Javascript）功能：脚本功能主要是一个脚本调试器，可以进行单步调试、断点设置、变量查看等功能，同时通过右边的监控功能来实现脚本运行时间的查看和统计，提高运行效率，如下图所示：
   
9.  
   5、DOM功能：该功能主要用于查看页面DOM信息，通过提供的搜索功能实现DOM的快速准确定位，并可双击来实现DOM节点属性或值的修改，如下图：
   
10.  
    6、网络（Net）功能：该标签功能主要用来监控网页各组成元素的运行时间的信息，方便找出其中运行时间较慢的部分，进一步优化运行效率，如下图：
    

注意事项

• 第三步过后：再次按下F12键或者Firebug右上角的关闭按钮即可关闭Firebug。