firebug使用.ppt

Firebug
Firebug是Firefox下的一款开发类插件,现属于Firefox插件之一。它集HTML查看和编辑、JS调试、Javascript控制台、网络状况监视器于一体,是开发JavaScript、CSS、HTML和 Ajax的得力助手
a 显示当前页面中的javascript错误以及警告,并提示出错的文件和行号,方便调试
b. 控制台里看到每一个XMLHttpRequests请求出去的参数、URL、http头以及响应的内容
c 相当于是一个javascript性能评测器它可以计算出javascript代码的执行的一些时间数据(如方法调用次数,执行的时间,平均执行时间等等)
Console控制台→功能介绍
a firebug命令行相当于vs中的即时窗口,你可以检查对象值,可以写js脚本并立即执行它
b在控制台面板中有两种命令行的类型:单行命令行和多行命令行
c 命令行的接口例如:
() //把信息输出到控制台面板中相当于alert()函数
() //计时器开始
() //计时器停止
() //打开性能测试
() //关闭性能测试并输出结果
Console控制台→命令行
我们有两种方法使用性能评测器
方法一:点击控制台标签上的“概况”
方法二:在javascript代码或命令行中写入profile()
函数列表中参数:
调用: 显示了方法被调用的次数
百分比: 显示了每个方法执行时间在整个例子执行时间所占的百分比
占用时间: 显示了方法的占用时间(不包括调用其它函数的时间)
时间:显示函数从开始到结束的执行时间
平均时间: 时间/调用次数。
最小时间: 该方法所有被调用中执行时间最短的时间
最大时间: 该方法所有被调用中执行时间最长的时间。
文件: 该方法在程序中定义的位置。
Console控制台→性能评测器
,显示当前html代码,和当前的CSS代码。点到html代码位置,马上实际页面中显示当前标签的位置,并且一并显示CSS。
(方便你在准确的文件当中修改代码,再也不用自己找了),并且告诉你与这个标签有关的所有CSS,包括继承的属性
,你可以看到真实的元素的高度和宽度以及内间距(Padding)、外间距(Margin),迅速找到问题出现在哪。
,可以调试javascipt生成标签的样式
HTML和CSS
可以让我们在任何时候调试JS 并查看变量
,点Script,选择你要Debug的JS