firebug 实用之处

因为有firebug 所以我一直喜欢firefox做开发,它给我提供很多方便,下面是一些对于我有用的应用技巧,先记一下
4、使用Firebug调试Javascript代码
在Firebug控制台中,如果要执行调试Javascript代码,只需要首先将Script控制面版启动,然后在点击Console按钮,在下拉菜 单中选择显示Javascipt及HTML错误(还可以让用户选择显示更多的错误),接着在底部会发现出现>>>的箭头,在这里,你可 以输入Javascipt代码,输入后,马上按回车键,就可以执行了,十分方便,如下图:
Web开发者应掌握的12个Firebug技巧
一个小技巧是,在输入Javascipt的时候,还支持使用tab键的自动完成提醒功能,比如对于一个很长的Javascipt函数,在没输入完的时候只要按tab键firebug就会帮助你自动补充完整。
8、监视Javascript的运行性能
在Firebug中,你可以点控制台中的“profile(概况)”选项,这将开启Firebug的性能监视功能,之后你可以进行页面的一系列操作,当 再次点profile按钮后,将停止对性能的监测活动,接着Firebug会显示一个列表,其中会清楚列明操作过程中所涉及的函数,调用次数,占用时间、 平均时间,最小时间,最大时间等,如下图所示:
Web开发者应掌握的12个Firebug技巧
9、Firebug强大的网络数据监视功能
Firebug还提供了十分功能强大的网络数据监功能。开发者在开发web应用时,经常要观察各类HTTP请求和回应,在这方面Firebug的功能十 分强大。首先,只需要开启控制面板中的网络功能,然后在每次运行页面时,都可以清楚看到每个HTTP的请求和HTTP回应的具体细节。如下图:
Web开发者应掌握的12个Firebug技巧
10、使用Firebug的Log功能
在设计页面时,经常要记录下页面的一些信息,这个时候,可以使用Firebug中的log日志功能,把一些信息输出到firebug的控制台中,这样就 方便调试了。Firebug提供了一个console对象,在插件加载的时候就注册到Javascript的运行环境中去了,可以在程序中直接使用。 console对象提供了一个log方法,举例说明如下:

1
2
3
4
5
6
7
<script language="javascript" type="text/javascript">
console.log('This is log message');  
console.debug('This is debug message');  
  console.error('This is error message');  
  console.info('This is info message');
console.warn('This is warning message');  
</script>

在Firefox中执行如下代码,会看到Firebug的控制台中出现如下信息:
Web开发者应掌握的12个Firebug技巧
可以看到,各个级别的日志输出,都带有一个彩色的图标,能给用户很醒目的提醒。同时,console.log 还支持格式化字符串的输出,你可以用类似C语言中printf的语法来调用这个函数:console.log(“%s is %d years old.”, “Bob”, 42)。
11、可以在Firebug中调试程序
在Firebug控制台的的Javascript控制面板中,可以对页面中的Javascript进行调试,方法很简单,只需要在要调试的行的左边单击,就会出现断点了,之后请记住下面常件的快捷键:
(1)  F10 进入下一行;
(2)  F8继续调试;
(3)  F11进入Javascript中的函数体调试;
(4)  Shift+F11跳出函数体。
Web开发者应掌握的12个Firebug技巧
12、在Firebug中可以设置带条件的断点
在Firebug中,还可以设置带条件判断的断点,如下图:
Web开发者应掌握的12个Firebug技巧
 
来自 http://blog.jobbole.com/8406/
 
 
 
 
 
 
 
 
 
 

发表评论