利用firebug调试控件样式

       firebug是网页浏览器firefox下的一款bug调试控件，它可以进行错误检查，HTML查看与编辑，javascript控制，css样式控制等，是我们网站开发的得力助手。

       最近在所接触的项目中前台页面用到easyui（提供用于创建跨浏览器的完整的组件结合），它封装了很多控件的样式，包括js和css代码，查找起来不是很方便，因此firebug起到了很重要的作用，以下是在项目实践中的应用：

【捕捉控件样式】

        在引用easyui中有特别多js和css文件，firebug可以动态捕捉控件与样式：

        1. 先选择捕捉鼠标

      

        2. 点击要选择的控件或标签，左边蓝色部分就可以查看div属性，右边选择样式可查看css格式代码

【试修改样式】

        firebug在不改变原代码的基础上给用户提供边修改边显示样式的功能，给用户调试带来了极大的方便：

        1. 双击调试样式，真正修改可将光标放到蓝色链接，找到格式文件位置进行修改，如下图：

        2. js断点调试，跟普通编辑器操作方法一致，用鼠标单击产生断点，F11下一步。

        3. 边框修改，在边框修改数字，左侧html可以产生相应代码，提供参考：

            

【总结】

        firebug给我们开发提供了极大的便利，网上也有很多基本用法资料，我们只要通过训练，都可以给我们的开发带来极大的便利。但值得注意的一点是，在调试过程中，往往一个js或者css文件会应用到不同的界面，这时不能随意改变一个css文件，要考虑是否会对其他页面造成影响，会的话就要重写覆盖原来的css文件。