下载后可任意编辑Web 开发者可能不知道的 12 个 Firebug 技巧Firefox 搭配 Firebug 在 web 程序设计中,可谓是“双剑合壁”,功能强大,本文选取了其中的一些技巧予以介绍,帮助大家更好的掌握 Web 开发的技能,让开发事半功倍!信任很多从事 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 按钮,在下拉菜单中选择显示 Javasc...