Firbug使用
来源:互联网 发布:数据库需要学什么 编辑:程序博客网 时间:2024/06/11 16:21
firedebug调试Jquery
不了解的同学先“点这里”看看什么是Firebug。简单来说,Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DOM和JavaScript的扩展工具。
我们先到Firebug的主页上下载最新的版本装上,下面开始调试:
1、查看、编辑HTML元素及其(转)
安装好Firebug之后,你可以通过点击浏览器右下方的小虫子打开Firebug,如图:
或者直接按F12,如果要以窗口形式打开的话,就按下CTRL+F12
打开Firebug之后,点击“查看”,然后选择页面上任何需要编辑的地方,Firebug会将其选中,并且在HTML结构中将其高亮,如图:
之后你可以对该元素的HTML结构、属性进行任意的编辑,修改后的效果都会实时的展现在页面当中。
同时在Firebug的右侧是该元素对应的CSS样式,如下图:
图中的样式,显示了该元素被重新定义的样式继承关系,比如“继承自body.CurHome”的“text-align”属性被“继承自div.shell”的“text-align”覆盖,原先的属性就会以中横线的形式表示出来。如果要查看所有的属性,请勾选图中标“1”的选项。
单击“2”可以禁用/打开某条CSS属性;单击任意一个属性或者属性值可以进行CSS的编辑,如“3”;双击“4”则可以新建一条CSS属性。现在我们点击下“5”来看看CSS布局面板:
上面这幅图展现的是一个HTML结构的标准盒模型,通过点击相应的数值可以修改该值,同时在浏览器窗口中显示出对应的效果来。
2、查看动态生成的HTML代码的方法
通过“查看源代码”的方法,无法看到由JS动态生成的HTML结构,这里我们可以通过Firebug来查看,如下图,选中“body”节点,按下“编辑”,即可输出页面上源文件的代码以及动态生成的代码。
还有另外一种简单的方法,选中你要查看的页面元素,然后在右键菜单中选择“查看选中部分源代码”
3、查看/测试页面的函数执行效率
查看页面上所有函数执行效率可以很容易的找到运行最慢的函数,从而帮助WD有针对性的进行页面的JS优化。如图,为需要调试的页面“启用控制台”:
点击“概况”开始收集,再次点击即可停止,然后进行查看。
在firebug控制台的最底下是一排命令行,在这里你可以输入任意JS语句,按下回车键即可执行:
使用console,还可以测试一段代码或者函数的执行时间,点击命令行最右侧的红色按钮切换到命令行多行模式:
4、使用Firebug查看XMLHttpRequest
使用Firebug查看XMLHttpRequest,对于调试AJAX是很有帮助的。如图:
为需要调试的站点开启“网络”监控功能,其实该功能可以查看页面上所有类型的post和get请求,并且还会显示出请求消耗的时间。对于XMLHttpRequest会有详细的参数与返回值。
5、查看页面上所有的CSS与JS
在页面调试中我们发现,对于外部引用的CSS与JS很难进行调试,使用基于Firebug的Yslow扩展即可解决该问题。首先在Yslow的主页上下载一个最新的版本装上:http://developer.yahoo.com/yslow/
在Firebug小虫子的右边就是Yslow,后面的数值是当前页面完全加载所消耗的时间,点击Yslow即可打开(或者通过Firebug的Yslow面板,运行“Performance”进行页面分析)。
如上图,选择“All JS”后,当前页面的所有内部JS和外部JS都会被显示在一个新开的页面中,这样查看页面上所有的JS源代码就变得方便多了。
6、查看页面上所有的资源列表
其实前面第四点介绍到的“网络”功能就可以查看所有资源列表,而且可以通过查看状态来进行对应的优化(例如排查404元素)。这里可以通过Yslow的components功能看到到包括类型与详细路径的资源列表:
鼠标hover可以看到对应的缩略图,点击则可在新窗口中打开。更多Yslow功能请查看其主页。
7、使用Firecookie调试页面cookie
Firecookie是基于Firebug的cookie调试工具,先到作者的主页上了解下详细信息,再下载一个安装上。
http://www.softwareishard.com/blog/firecookie/
安装好之后,Firebug中会多出一个“cookie”面板,你可以为需要调试的页面添加、删除、修改cookie信息。
Firebug是一款能够为WD提高效率的调试利器,希望大家都能用上。关于Firebug的更多信息
- Firbug使用
- js调试之firbug
- 网页调试小工具firbug
- firefox firbug 的“阻挡” blocking
- [网页性能分析]利用Firfox,firbug,cssusage来分析CSS在网页中使用覆盖率
- 用火狐浏览器的firbug调试
- 使用
- 使用
- 使用
- 使用
- 使用
- 使用
- 使用++,--
- 使用$@ $!
- 使用
- SoftICE使用(指令使用)
- 使用GraphEdit使用
- 使用HtmlParser使用心得
- Apache Shiro 授权例子
- Oracle中使用同义词
- Id Type mismatch: cannot convert from connection to connection
- 使用openssl中的EVP通用加密算法接口之--加密测试例子
- 第八章 多态
- Firbug使用
- 我只是想表达自己有多水
- cocos2d-x游戏开发系列教程-超级玛丽04-AppDelegate
- 类和对象的区别
- android单元测试
- Windows7安装SQL Server 2008图解
- ffmpeg+ffserver实时视频采集流媒体转发
- jsp中两种include用法的区别
- swing之滚动条下拉加载数据