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

JSON

JSON是一种正在网络上慢慢兴起的数据交换格式。就象AJAX并不是什么新技术一样,JSON也没有提供什么新格式,它基于ECMAScript标准中对ObjectLiteral的定义(ECMA-262, 11.1.5),早就被javascript支持。 格式定义非常简单,就是通过一组键值对来定义一个对象。在javascript中,你可以直接将这种格式的数据赋值给一个变量,然后通过键名取值。相对于使用xml来作为数据交换格式,如果要在javascript里使用,首先需要创建一个DOMParser,然后通过DOM接口访问节点对象,非常繁琐,更不用说不同浏览器的实现中DOMParser的实现和DOM接口都有诸多不同。为什么大量的AJAX应用中宁可直接返回一个HTML片断而不是直接把XML交给javascript处理,一个主要原因就是处理XML的过程比较复杂。JSON最重要的贡献就是简化了解析数据的过程。 del.icio.us提供的在网页上显示书签的javascript脚本就基于JSON,看一下这个脚本,再设想一下通过AJAX读取del.icio.us提供的RSS接口来实现这个功能,就能体会JSON的巧妙了。 除此之外,更有人提出类似XSLT的JSONT,可以将JSON格式的内容转换成其他形式,虽然还暂时还没有XSLT灵活和强大,至少展示了一种可能性。 JSON解决的另一个传统AJAX中xmlhttprequest不能解决的问题就是跨域链接的问题。基于安全考虑,各种浏览器缺省都不允许xmlhttprequest跨域名链接,abc.com页面上的xmlhttprequest是无法连接def.com的内容的。在网页中,JSON可以采用引入script元素的方式导入数据,html中的script可以指定非本地脚本,跨域链接的问题得以解决。但使用这样的方式导入JSON数据,是一个同步的过程(是否可以用defer属性来实现异步?),这点上不如xmlhttpreqeust灵活。

关于Firefox不能使用ctrl+enter在某些论坛发贴的原因

看到很多人抱怨Firefox不能使用ctrl+enter发贴,开始还以为这是一个IE为textarea增加的快捷键,做了几个test case试了以后才知道这并不是IE的功能. 很多报这个问题的人使用的是Dvbbs,找到Dvbbs的代码一看才知道这是Dvbbs自己实现的一个功能.在实现这个功能的时候,对IE和非IE浏览器做了不同的处理.看代码: if (Dvbbs_bIsIE5){       var Dvbbs_bodyTag=”<style type=text/css>.quote{margin:5px 20px;border:1px solid #CCCCCC;padding:5px; background:#F3F3F3 }\nbody{boder:0px}.HtmlCode{margin:5px 20px;border:1px solid #CCCCCC;padding:5px;background:#FDFDDF;font-size:14px; font-family:Tahoma;font-style: oblique;line-height : normal ;font-weight:bold;}\nbody{boder:0px}</style></head><BODY bgcolor=”#FFFFFF” title=”Ctrl+Enter直接提交贴子” onkeydown=”ctlent();”>”; }else{       var Dvbbs_bodyTag=”<style type=text/css>.quote{margin:5px 20px;border:1px solid #CCCCCC;padding:5px; background:#F3F3F3 }\nbody{boder:0px}.HtmlCode{margin:5px 20px;border:1px solid #CCCCCC;padding:5px;background:#FDFDDF;font-size:14px; font-family:Tahoma;font-style: oblique;line-height : normal ;font-weight:bold;}\nbody{boder:0px}</style></head><BODY bgcolor=”#FFFFFF”>”; } 在为IE实现的代码部分多了一个事件处理 onkeydown=”ctlent();” 而为非IE浏览器就没有. 再看这个事件处理调用的函数: function ctlent(){ var ispost=0; Read more about 关于Firefox不能使用ctrl+enter在某些论坛发贴的原因[…]