用Firebug调试网站

相信许多做网站开发的都有接触到或者用到Firebug这个工具，因为它确实给调试程序或代码带来了极大的便利。跟网站有关的html、javascript以及css都能调试并直接预览结果，相比你改完-保存-上传-刷新这种步骤要节省好多时间，而且更加的直观。下面我来简单介绍一下这个工具以及通过在实际应用情况下让大家感受一下他的强大。

1、Firebug的安装：

firebug是firefox浏览器中的一个插件，类似于chrome中的开发者工具，但个人觉得firebug要好用许多，也许是习惯了吧。言归正传，首先在工具栏中找到工具—附加组件，然后在打开界面的搜索框中输入firebug，点击“直接安装”就好了，非常方便

 

2、界面

它的主要功能区如下图：主要分为控制台、CSS、脚本、DOM、网络和cookie，启动这个界面有两个方法，一是在火狐浏览器右上角点击那个灰色的小虫子图标，他将变成彩色，这时候说明它启动了，；二是直接在页面上点击右键，选择“使用firebug查看元素”。下面我们来看一下它的具体功能：

（1）、控制台

点击控制台选项，会到下面这个图的界面，如果没有开启，点击提示框中的按钮直接开启就好

上图中我以document.location.href为例，在最下方输入框直接敲入这部分代码—回车，就可以直接得到这段代码在当前页面上操作的结果，就像我这次的，我请求的是当前页面的URL，返回的是”http://jackie.ms/" 。当然你输入其他的javascript的操作函数也都是适用的，firebug比较方便的一点是当你输入第一个字母的时候它会自动显示已这个字母开头的所有函数，所以就算你忘了方法名称，在这里也可以很方便的找到，当然，前提是你得认识这个方法。

（2）HTML

这部分是最常用的，因为我们调试的最多的就是这部分代码。那为什么说这个方便呢，因为它即调即用。下面我们用例子来演示一下：

右击我想修改的部分（图中为”Jackie”）选择”用firebug查看元素”,下面HTML部分会自动跳转到这个标签的源代码

点击编辑，会进入到这个a标签内所有代码的编辑界面

这时候可以随意修改里面的代码，修改完成后再次点击”编辑”就完成修改了，此时你再点击这个按钮，他就会在这个原来的页面执行新代码请求，起到立竿见影的效果。我之前博客有篇文章介绍用firebug抢火车票就是这么实现的，通过提交自己修改过的请求来提前订票。

（3）、CSS

如果你要修改自己的主题的话，肯定是要懂一点CSS的，比如它的代码格式。比如我要给我的主题换个颜色，换个字体、大小，修改行距等等，都可以用它来简单实现。我用自己亲身经历的例子给大家示范一下，这个主题默认情况下是没有首行缩进的，所以刚发布出来文章也会比较得难看，让人有点分不清段落的感觉，这个时候在文章段落部分右键单击，并切换到CSS窗口，就可以看到你当前选择的元素的CSS代码了，比如我的：

其中article.post p, article.page p 大括号后面的部分就是这个段落的样式代码，比如上图中的字体大小：1.1倍正常字体，行距：1.5倍，完全没有首行缩进的部分，但是这个时候我们可以自己添加了，在后面用相同的格式加上”text-indent: 2em;”页面中的首行缩进马上就出来了，正如我现在文章中的样子。（如果不知道怎么写也没关系，知道你的目的是什么，然后再借助搜索引擎，很快就有结果）至于颜色什么的就更明显了，可以看到上图中代表颜色的#DD3333,这个就代表了一种颜色，分为三段，每段由两位十六进制数，分别代表红绿蓝三原色的值，值越大则颜色越深。觉得好玩的话自己可以试试，给自己主题换个自己喜欢的颜色。

当然，还有一个很重要的步骤，就是上面只是你自己的调试过程，当成功以后，你还得需要找到相对应的网站源文件比如style.css（总样式表）找到之前调试的位置将代码替换掉来达到你想要的目的。firebug中会有提示你所修改元素的css文件所在地以及行数，实现”一步成功“的效果。

（4）、其他

剩下的脚本、DOM、网络、cookie都是查看型的，用来查看结果的。但是它也会比通过其他途径来看方便许多，而且会更加得详细。有兴趣的朋友可以自己看看摸索一下，在这里不多做介绍。