火狐的调试利器Firebug

每次分享例会同事的分享都会让我学习到很多知识，因为我的基础比较差。所以对很多东西都不熟悉。

    今天的分享例会主题是关于Firebug的运用，或许对很多同事来说，这些都不是新知识，但是对我来说我必须得好好总结一下今天所学的知识。

    1.什么是Firebug：

    Firebug 是网页浏览器 Mozilla Firefox 下的一款开发类插件；它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、 CSS、HTML和Ajax的得力助手。Firebug是一个插件，它必须和Firefox（chrome）浏览器结合使用；可以方便地启用/关闭这个插 件，安装插件之后，打开需要测试的页面，使用快捷键F12唤出Firebug插件，它会将当前页面分成上下两个框架。   

      

    2.关于控制台：

    控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试；同时还能够在控制台中查看变量内容，直接运行javascript语句；控制台还有个重要的作用就是查看脚本的log。

    关于控制台的一些命令：

   （1）console.log(object[,object,...])  类似C语言的printf

     举例:console.log("The %s jumped over %d tall buildings",animal,count);

          console.log("The",animal,"jumped over",count,"tall buildings");

          console.log("I am %s and I have:"myName, thing1, thing2, thing3);

          console.log("%cThis is red text on a green backgroun","color:red; background-color:green");

  （2）console.debug(object[,object,...])  类似console.log, 会额外的输出被调用行的超链接    

  （3）console.info(object[,object,...])  类似console.debug, 会显示"info"的颜色和图标   

  （4）console.warn(object[,object,...])  & console.error(object[,object,...])     

  （5）console.assert(expression[,object,...]) 判断一个表达式或变量是否为真, 如果不为真, 则在控制台输出相应的信息并抛出异常      

  （6）console.dir(object) 以表格方式显示对象所有属性, 类似DOM标签   

  （7）console.trace() 输出函数被调用的轨迹, 写在要跟踪到的函数里, 列出调用堆栈     

  （8）console.time(name)/console.endTime(name) 创建一个计时器,返回直到调用console.endTime(name)时指定相同计时器名所持续的时间      

    3.关于HTML查看器：

    查看器查看的代码已经经过格式化的，它有清晰的层次，能方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码；同时HTML查看器会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。      

    4.关于CSS查看器：

    CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义；你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。

    CSS查看器还可以以标尺的形式展现当前选择区块占用的面积，精确到象素，并且能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动 而变化；在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，可借此分析offset、margin、padding、size之 间的关系
    5.关于脚本调试器：

    脚本调试器提供了规范的调试环境,单步调试、设置断点和变量查看等，极大的节约了开发者的时间。     

    6.关于DOM查看器：

    DOM(Document Object Model)里头包含了大量的Object以及函数、事件，DOM查看器能方便地浏览DOM的内部结构，帮助你快速定位DOM对象；双击一个DOM对象，即可编辑它的值，非常方便。       

    7.关于网络状况监视器：

    网络监视器可用来监视加载 Web 页面所花费的时间，它能将页面中的请求数据载入所消耗的时间以矩状图呈现出来，进而对网页进行调优，还能预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等，方便诊断分析。        

   8.关于推荐的文章：

   Firebug 必须掌握的技巧：http://www.blueidea.com/tech/web/2009/7284.asp 

   FireBug调试技巧：http://www.378q.com.cn/html-js-css/178.html

   Firebug 动态调试和优化应用程序：http://www.ibm.com/developerworks/cn/web/wa-aj-firebug/ 

   FireBug网络监视详解：http://magustest.com/blog/softwaretesting/introduction-to-firebug-network-monitoring/

   FireBug net面板详解：http://www.qianduan.net/detailed-firebug-net-panel.html