火狐的调试利器-----Firebug

Posted on 2012-02-12 22:07 GISerYang 阅读(4147) 评论(0) 编辑收藏举报

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

今天的分享例会主题是关于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.关于脚本调试器：

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