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文件。