Firebug中你不该错过的几个功能

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了。

传说中的dbaron要来中国了

在mozilla/firefox开发社区混过的人,应该没有不知道dbaron的。1998年,年仅18岁的他对CSS发生兴趣,开始参与mozilla社区的测试,写了一套后来很著名的css测试用例,并成为W3C CSS工作组的受邀专家。1999年到2002年,他作为当时mozilla的东家Netscape的实习生,慢慢从测试转为开发。2003年,dbaron已经是mozilla中CSS模块的顶梁柱,并且成为super reviewer之一(整个社区只有二十多个,是保证整个开发正常运转的核心)。 本周,这位传奇八零后美国工程师就要登录中国,周六在谋智网络做一个题目为” Web Page Layout/Display in Mozilla “的讲座,具体时间地点看这里吧。和这样的CSS专家交流的机会可是不多,反正我会去的。

AllowU

在长城脚下上互联网,就难免碰到GFW。偶尔碰到,如果只是想看一下,不想用太麻烦的方法,又懒得找代理,有时候我会用Allowu这个服务。 用的多了,干脆做了两个bookmarklet,把他们拖到你的书签条上。 allowu allowu! 如果访问网页碰到麻烦,就点allowu,直接访问当前页面。如果想输入url访问某页,就点allowu!,输入url,回车。 两个都支持Firefox。Safari只能用第二个。