关于Firebug的下载及使用小结

引自开源中国社区：Firebug是Firefox下的一款开发类插件，现属于Firefox的 五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和 Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。

　　作为Firebug的使用者，本人觉得这款插件十分值得推荐，故此处简单介绍一下Firebug的安装及使用，以方面更多曾经像我一样从来没有使用过它的人快速上手并感受这款插件带来的愉悦。

1.安装（本人的Firefox是版本10）

　　打开Firefox->打开菜单栏中的工具选项->附件组件->在搜索框中搜索Firebug->点击安装即可->安装完毕后重启浏览器。

->

->

安装成功后你会发现在Firefox的主页图标旁边多了一个Firebug的图标，点击启动（或者F12快捷键启动）

 2.使用

　　Firebug的使用界面如下，其中的Tab选项可以快速查看当前页面中的HTML,CSS,DOM,JAVASCRIPT以及浏览器对资源加载情况的瀑布图。

　　图示展示了Firebug十分灵敏的开发特质，鼠标HOVER过HTML文档中的相关项，就能动态的捕捉到页面的相关项，单击即可进行编辑修改，对CSS的查看和编辑同样适用。

->

通过时间线上的瀑布图可以清楚的看到浏览器对资源的加载情况，而当你把鼠标悬浮在时间线上的时候，就会弹出该条时间线的详情的tips。从图中可以看到Firebug列出了对www.hao123.com页面的图片加载过程，共加载了11个图片请求，大小是25.4KB，其中有25.3KB来自缓存（因为多次访问该网页的原因，所以浏览器缓存中有大量该页面的资源），还可以看到Firefox对这些图片的加载顺序以及加载所耗时间等具体信息。同理可以对其它资源的加载情况。

关于各浏览器对页面外部资源的加载策略的知识推荐阅读http://www.otakustay.com/browser-strategy-loading-external-resource/

总结了这么些，反正对自己是有用的。呵呵

这个软件真心不错，希望它越来越强大，越来越受欢迎。加油Firebug，加油Daisy!