Firebug
是Firefox的一个扩展,提供了诸多网页开发的辅助功能,如果你是一个网页开发人员,天天要和HTML/CSS/Javascript打交道,Firebug能大大提高你的工作效率。
Firebug的大部分功能都很直观,我最常使用的是Inspect CSS/DOM和Javascript debug,有时候会看看Net和YSlow
。还有一些功能,或大或小,不是上来就发现,但也是非常好用,不容错过:
获取XPATH
无论做userscript
、bookmarklet
还是网页爬虫,有时候用五六行DOM实现的网页元素提取,用XPath一句就搞定了。以前定位一个元素的XPath主要靠眼,有Firebug就省眼了,先用Inspect定位网页元素,然后点右键,选Copy XPath,搞定。
这个XPath是从DOM树里来的,已经修正了网页上的一些错误,所以有时和实际的XPath有一些偏差,但一般都很容易调整。比如一些网页中table
里没有tbody,直接就是表格内容,DOM树会自动补上tbody,得到的xpath中也会有tbody,在实际使用的时候,和网页实际内容对应,就要
把tbody去掉。
javascript命令行
如果哪个脚本语言不提供带命令行的控制台(console),我就不玩了,:-p。善用命令行控制台(console),可以省下很多debug的时间。我以前介绍过jsenv
。Firebug也提供非常好用的javascript命令行控制台,可以直接和当前网页交互,输入命令的时候还能自动补齐。另外,一定不要忘记先看看这个命令列表
。
控制台API
我最爱用的javascript函数就是alert,偶尔把它放在循环里,我可以花一下午的时间点OK玩。现在是和alert说byebye的时间
了。Firebug提供了一套相当完备的javascript控制台API,可以将log直接输出到控制台而不再用跳出小窗口,提供多种log级别
(debug,info,warn,error)和分组功能,可以显示对象属性,可以记录stack
trace,甚至提供timer和profiler,调试performance都不用发愁了。记得查看控制台API的说明
。
标尺
无论在网页布局还是做动态HTML,常常需要知道一个网页元素的相对位置。你可以装一个Measueit扩展自己量,也可以用Firebug里的标尺。用Inspector选中你要度量的元素,在右侧选中Layout标签,然后鼠标划过盒模型中央,标尺就会出现。
在所有浏览器中使用Firebug
对不起,不是所有的功能,是不是有点失望。不过,至少你可以保证控制台API正常输出,并且提供命令行的支持,已经相当不错了。下载firebuglite文件
,放在脚本目录下,然后在页面中加入:
<script language="javascript" type="text/javascript"
src="/path/to/firebug/firebug.js"></script>
用F12就可以召唤出Firebug了。
分享到:
相关推荐
firebug1.12 firebug1.11 firebug1.10 firebug1.9 firebug1.8 firebug1.7
Firebug是firefox的一个插件,Firebug 和 firefox 整合在一起,使你浏览网页时手边有了一套强大的网页开发工具。 你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。而且可以在线的时候修改dom非常弹大...
让Firebug中文版和web_developer中文版配Firefox2.0.0.14这一组绝配为你服务为你解忧。下面教你一些最白菜的东东: 首先:必须安装Firefox2.0.0.14浏览器……555太白菜了,再将你硬盘上叫firebugcn.xpi和web_...
firebug各个版本安装包,从firebug-1.7.3到firebug-1.12.7-fx.xpi。
firebug2.0.7
Firebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能...
httpwatch与firebug.
火狐30,FireBug2.0 ,web开发利器,下载后直接解压,先安装火狐浏览器,然后点击工具---附加组件,然后将FireBug的文件直接拖到窗口内,即可完成安装,使用时,点击浏览器地址栏后面的虫子图标,即可进入firebug...
firebug从firebug-1.7.3到firebug-1.12.7-fx.xpi各个版本安装包,适用于火狐50以下各个版本
firefox + firebug firefox + firebug firefox + firebug
firebug插件
firefox下非常强大的html开发插件,可以查看dom,某个元素的css,编辑html....
firebug及其安装方法
FireBug离线安装版-firebug-2.0.2-fx
rebug是firefox下的一个扩展,能够调试所有网站语言,如Html,Css等,但FireBug最吸引人的就是javascript调试功能,使用起来非常方便,而且在各种浏览器下都能使用(IE,Firefox,Opera, Safari)。除此之外,其他功能还...
fireBug教程Word版(全) Javascript的调试利器:Firebug使用...本文主要是为初学者介绍一下Firebug的基本功能与如何使用Firebug。由于本人水平与能力有限,在文章中的可能会有很多错误与遗漏,希望大家能谅解和指正!
FireBug插件使用教程 介绍如何安装firebug
Firebug功能 你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。而且可以在线的时候修改dom非常弹大的插件. 用Firebug Firefox 组成最强大的网页调试工具。 文件的扩展外是 xpi 直接拖入到 FireFox...