今天小编跟大家讲解下有关Firebug 调试器Web开发者应掌握12个初级使用技巧 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关Firebug 调试器Web开发者应掌握12个初级使用技巧 的相关资料，希望小伙伴们看了有所帮助。
相信很多从事Web开发工作的开发者都听说和使用过Firebug 但可能大部分人还不知道 其实它是一个在网页设计方面功能相当强大的编辑器 它可以对HTML、DOM、CSS、HTTP和Javascript进行全面的跟踪和调试。它是Firefox浏览器的一个插件 所以建议各位Web开发者 要充分利用FireFox浏览器和Firebug插件进行日常的调试工作。本文选取了12个Web开发者应该掌握的Firebug的初级使用技巧 介绍给大家。
1、使用Firebug可以找到页面中的任何内容
不知道各位有无遇到过这样的情况 在一个复杂的HTML页面中 当你想找某个页面元素的实际对应的HTML时 你不得不在一大堆HTML代码中去查找 十分麻烦。有了Firebug 现在你只需要在页面中 用鼠标右键选中某个元素 然后在弹出的菜单中 选择“查看元素” 马上就会在HTML页面代码中找到该元素对应的代码了 十分方便 如下图所示：
同样 也提供了更快速的方法：只需要点Firebug插件左上方的箭头 如下图所示 则每当鼠标在页面中移动时 在Firebug控制台中就马上显示移动时经过的HTML元素的代码：
2、可以使用Firebug修改HTML和CSS
通过Firebug 可以直接修改HTML 增加HTML的属性 删除元素 增加CSS样式及实现更多功能 如下图：
在上图的菜单中可以清楚看到 你可以对HTML元素进行各样的修改操作 方法是先点击HTML部分的代码 然后鼠标右键即可在弹出的菜单中进行操作。
3、可以通过Firebug查看DOM元素和对XML进行操作
当打开一个HTML页通过Firebug查看HTML代码时 你可以同时点在控制面板中的DOM树 就会以DOM的树型结构方式看到整个HTML的结构。而如果你是打开了一个XML文件 那么鼠标右键点XML文件中的任何一个元素 在弹出的菜单中同样可以选择对XML进行相关操作 如下图：
4、使用Firebug调试Javascript代码
在Firebug控制台中 如果要执行调试Javascript代码 只需要首先将script控制面版启动 然后在点击Console按钮 在下拉菜单中选择显示Javascipt及HTML错误(还可以让用户选择显示更多的错误) 接着在底部会发现出现>>>的箭头 在这里 你可以输入Javascipt代码 输入后 马上按回车键 就可以执行了 十分方便 如下图：
一个小技巧是 在输入Javascipt的时候 还支持使用tab键的自动完成提醒功能 比如对于一个很长的Javascipt函数 在没输入完的时候只要按tab键firebug就会帮助你自动补充完整。
5、多次加载页面后Firebug会记得加载前的位置
无论你重复加载多少次页面 Firebug在每次加载页面后总会自己记得加载前页面所在的位置(比如你已经在浏览页面的底部 此时再加载页面 则新的页面加载后 依然把你带到页面底部)。
来源：爱蒂网
