～～～～～～～～
sociz.com
http://mozilla.sociz.com/frame.php?frameon=yes全方位下载
http://www.fixdown.com/
[ 本帖最后由 faunus 于 2008-12-13 12:43 编辑 ] 1.CyberSearch
来自博客CyberNet开发的扩展,CyberSearch可以实现在Firefox地址栏使用Google所有类型的搜索,独具特色的是CyberSearch会将搜索结果的前8个直接显示在地址栏,让用户能够更加快捷进行搜索.你还可以自定义关键字以搜索特定网站的内容,比如Wikipedia,IMDB等等.
定义了关键字D为DiggLife站内搜索后搜索”软件”的效果:
http://farm4.static.flickr.com/3157/2635732047_a1b35034ec.jpg
2.Mozilla Weave 0.2
Mozilla实验室出品的Firefox数据同步工具Weave,其核心理念是将Firefox的各种数据和设定上传到服务器上,以便用户在多台电脑或设备上进行同步,是一个典型的Cloud服务.可以同步的个人数据包括:书签,浏览历史,密码等等.这个扩展貌似还有些问题:首先,Linux下不可用;然后,在使用过程中出现几次无法设置的状况;第三,同步速度成问题,关闭Firefox后需要几分钟的时间完成数据上传.尽管如此,这还是一个非常值得一试的扩展,期待Mozilla不断完善它.
http://farm4.static.flickr.com/3071/2635743999_5fc45c06df.jpg
3.Better Gmail2 0.5.1
Lifehacker旗下著名扩展的升级版,升级了扩展中Gmail Redesigner皮肤.Better Gmail是我必备的Firefox扩展之一,可以实现HTML签名,附件图标,个性化皮肤,树形标签,更加强大的键盘快捷键等功能.经常性使用Gmail的朋友可以尝试一下.另外,Lifehacker Code项目中还有Better Greader,Better Gcal,Better Flickr等扩展,都是整合了一些实用Greasemonkey代码而成的Firefox扩展,都有着不错的功能.
http://farm4.static.flickr.com/3107/2636642066_a8641c9d11_o.jpg
4.RAMBack
释放Firefox内存占用的扩展.安装后会在工具栏添加一个菜单以供手动清理内存.
5.PDF Download 2.0 Beta
可以将网页直接保存为PDF文档的扩展,也能将PDF文档转换为HTML网页.因为处于Beta阶段,所以你需要注册才能下载使用.
http://farm4.static.flickr.com/3171/2636633232_31ca712334.jpg
Ok,以上就是我本周推介的Firefox扩展,如果你本周也发现了一些不错的扩展,不妨在留言中告诉我.另外,关注Google的朋友应该知道Google新推出了一个iPhone版本Google Talk,界面非常好看,我们可以把它放到Firefox侧边栏,或者使用Prism将它桌面化.
了解更多相关信息[*]一周Firefox扩展推荐-第三辑[*]一周Firefox扩展推荐-第二辑[*]社会化浏览器扩展Yoono[*]给Firefox 3添加Google Toolbar的功能[*]Firefox 3附加软件页面预览[*]让Firefox变成终极网页设计工具[*]Firefox:全能上传扩展FireUploader[*]给Firefox加上Safari风格的站内搜索效果[*]Firefox扩展:使用Speed Dial预览多个网页[*]Digger工具集装:5个Digger必备的Digg工具 XPCOM Component Viewer
https://addons.mozilla.org/zh-CN/firefox/addons/versions/2230
如何知道目前有哪些XPCOM组件可用? 每个组件又都有哪些接口？XPCOM Component Viewer(mozilla版本, firefox版本)可以部分解决这个问题，只是目前没法看到接口中每个方法/属性的说明（好像也没有看到一个类似的reference文档)； developer
http://chrispederick.com/work/web-developer/
对于网页内容部分，Web Developer够强了 * 如何知道每个XUL element有哪些属性、哪些事件? XUL Element Reference已经有了，不过这只是文档，查起来效率也够差的。 DOM Inspector可以提供一些信息，但还不是一个好的设计工具(对比GTK+ Glade或者Delphi的Object Inspector看看)；
* 如何知道目前有哪些XPCOM组件可用? 每个组件又都有哪些接口？XPCOM Component Viewer(mozilla版本, firefox版本)可以部分解决这个问题，只是目前没法看到接口中每个方法/属性的说明（好像也没有看到一个类似的reference文档)；
* 如何调试程序? JavaScript Debugger和JavaScript Console倒基本可以满足需要；
* 对于网页内容部分，Web Developer够强了
* 所见即所得(WYGWYS)的UI设计器？嗯，这块还没有。 DOMInspector介绍
DOM
根据 W3C DOM 规范，DOM 是一种与浏览器，平台，语言的接口，使得你可以访问页面其他的标准组件。简单理解，DOM 解决了 Netscaped 的 Javascript 和 Microsoft 的 Jscript 之间的冲突，给予 web 设计师和开发者一个标准的方法，让他们来访问他们站点中的数据、脚本和表现层对像。
DOM的详写是Document Object Model，即文档对象模型。DOM是一个浏览器解释网页生成的一个树式对象，这有点象我们平时使用的目录树。它有一个根节点，这个根节点通常是 DOCUMENT，并且有很多子节点。每个节点都有自己的属性与路径（这里的路径只是为与目录树类比才这样说，实际上DOM节点并没有所谓的“路径”，但我们也能像目录树一样定位到某个DOM节点并进行操作）。浏览器提供操作DOM的API，网页设计者可以通过这些 API来操作DOM对象，比如增加，删除节点与修改节点属性。
当我们使用浏览器打开一个网页时，浏览器首先会发送请求到服务器下载网页文档，下载到数据后，浏览器并没有把网页直接翻译成我们平时看到的超文本格式，而是调用内置的解释器，在内存中把文档生成为一个DOM对象树，再通过这个对象翻译成超文本格式。由于不同的浏览器由于技术与对标准的支持不同，生成的 DOM树也不尽相同。如果网页中有操作DOM对象的相关脚本代码，浏览器就会按照脚本更新DOM树。
在很多介绍DOM的教程中，对于DOM的说明都是很理论的，因为很多浏览器本身并没有提供让用户可视化操作DOM的工具，而DOM Inspector，就恰恰是这样一款为可视化查看和操作DOM的工具。
DOM Inspector
DOM Inspector使用
一般的FireFox或Mozilla安装包都自带了DOM Inspector，但并不是默认安装，如果大家想在FireFox使用 DOM Inspector，建议大家到http://www.mozilla.org/products/firefox/all.html下载最新的 FireFox，在安装时选[自定义]，选上所有工具包，这样就安装好DOM Inspector。
下面我们用一个HTML来说明一个DOM Inspector的使用。先用FireFox打开附带程序的main1.html，这个网页打开后， FireFox会自动为它生成一个DOM对象，这时我们可以用DOM Inspector查看，DOM Inspector在[工具]->，你也可以按Ctrl+Shift+I打开DOM Inspector。
大家看到左边的那个类目录的层式结构吗？这就是传说中的DOM树！！以#document为根元素，然后是HTML标签，下面的HEAD， TITLE，BODY，H1，UL，LI都井然有序地为我们排好了。试试选中某个元素，在FireFox的网页中对应的元素就会闪动，点击某个元素，它的节点名称，属性或内容就会在右边的属性窗口显示出来。但是左窗口还有一些本不应该存在的#text，它们是文本节点，比如<title> Hello</title>里的Hello，一些标签没有文本（像水平条<hr/>），但DOM Inspector也认为它们有一个空的文本节点，如果大家觉得碍眼，可以把[查看]->[显示空白节点]勾掉。
有很多所谓的网页加密，都是用document.write()函数在源文件写代码做出来的，以为这样就可以挡住入侵者，其实不然，前面的理论告诉我们，加密网页在被浏览器解释时，会生成DOM树，浏览器关心的是DOM对象而非HTML源码。在main1.html中，第三个LI元素就是用这种方法加入的，因为FireFox最后的显示效果是根据DOM生成的，所以在DOM Inspector中，我们就可以看到第三个LI，而不是单纯的一个 SCRIPT元素（用于动态加入第三个LI）。
当然了，DOM Inspector不只能查看DOM，还可以修改！我们可以选中任一个元素，按DEL就可以把它删掉。这里我把HR元素与第二项删了。大家可以看到下面图中的HR（水平条）与LI＿2不见了。
我们还可以复制、剪切元素，例如要重新加入LI＿2，只要选中LI_1，按复制，再选中LI_1，按粘贴，这就完成了LI_1复制。但是这时新的LI只是LI_1的一个副本，并不是LI_2呀，不用担心，下面我们就来为新LI整容。
其实，这个例子中LI间的不同主要只是ID与显示的文本内容不同罢了。那么我们先搞定ID，选中新LI，在右窗口的左上角有一个下拉框，按一下可以选择查看选中元素的方式：Javascript Object，DOM Node或其它。DOM Node里可以看到的是选中标签的属性，而在 Javascript Object里则是把选中的元素在DOM生成的节点对象。因为id属性是写在<li>标签里的，所以用 DOM Node模式。
可以看到，新LI的id是LI_1，在其中右键点击[编辑]，输入新值"LI_2"就可以完成修改。但是，如何修改文本内容呢，我们好像看不到这样的选项。不用怕，精彩在后头。
浏览器为了把DOM提供给网页开发者，把DOM生成一个对象，以便网页开发者使用，其中每一个节点又是一个很完整的对象，节点对象保存了节点的大量信息，除了id，还有像class（类），value（值），textContent（文本内容）一类的信息。什么？文本内容，没错，就是文本内容，下面我们通过操作Javascript object的方法搞定它！
像改ID一样，选中LI_2，在属性窗口左上选Javascript object，展开target对象，所有的节点属性尽在眼底。可以看到textContent还是“第一项”。右击target，选[运行Javascript]，弹出窗口。
这时我们可以输入Javascript语句修改属性，当前选中项（LI_2)已被设为target。输入target.textContent="第二项"，按执行看看，成功。
DOM Inspector的其它应用
由于篇幅关系，不能详细介绍DOM Inspector。DOM Inspector是否好用的判别标准，因使用者的Javascript水平而异。我们可以看到DOM Inspector单独的可视化应用是有局限的，但如果用户对DOM_API掌握得好，通过操作Javascript object 可以说没有什么做不到。
在国外，DOM Inspector是被网页开发者使用得很广泛的，而国内连知道有这东东的人都不多。它除了让网页开发者检查自己的网页是否出错，在黑客方面也是很值得研究的，比如可以轻松地取消某个表单元素的限制，下载被加密的文件等。联合Venkman使用，更是在前台方面所向无敌。本文仅通过介绍 DOM Inspector，抛砖引玉，吸引大家加入Mozilla开发阵营罢。
如果想学习DOM，大家可以到www.xulplanet.com找到相关文档，至于DOM Inspector的提高应用，可以到http://www.brownhen.com/DI.html看到相关资料。撰此文时，我找到另一个很好用的东东MODLv2，安装很简单：打开http://slayeroffice.com/tools/modi/v2.0/modi_help.html，右击 Bookmark this link for MODIv2，选“将此链接加入到书签”。以后打开网页时，打开此书签（是一段Javascript 的），就会弹出一个DOM查看器，这个可是“即指即译”的哦！ 初识Firebug 全文 — firebug的使用
什么是Firebug从事了数年的Web开发工作，越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码；要编写精致的CSS样式表展示每个页面模块；要调试javascript给页面增加一些更活泼的要素；要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面，才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员，在这里为大家介绍一款轻巧灵活的辅助开发工具。
Firebug是Firefox下的一款开发类插件，现属于Firefox的五星级强力推荐插件之一。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。这是一款让人爱不释手的插件，如果你以前没有接触过它，也许在阅读本文之后，会有一试的欲望。笔者在撰写此文的时候，正逢Firebug发布1.0正式版，这不能不说是种巧合。
应用Firebug插件虽然功能强大，但是它已经和Firefox浏览器无缝地结合在一起，使用简单直观。如果你担心它会占用太多的系统资源，也可以方便地启用/关闭这个插件，甚至针对特定的站点开启这个插件。
在安装好插件之后，先用Firefox浏览器打开需要测试的页面，然后点击右下方的绿色按钮或使用快捷键F12唤出Firebug插件，它会将当前页面分成上下两个框架，如图1所示。
图1：Firebug插件展开图示
http://www.ooso.net/wp-content/uploads/2007/firebug1.gif
从图1中看到，Firebug有6个主要的Tab按钮，下文将主要介绍介绍这几方面的功能。
ConsoleHTMLCSSScriptDomNet控制台Html查看器Css查看器脚本条时期Dom查看器网络状况监视Console 控制台控制台能够显示当前页面中的javascript错误以及警告，并提示出错的文件和行号，方便调试，这些错误提示比起浏览器本身提供的错误提示更加详细且具有参考价值。而且在调试Ajax应用的时候也是特别有用，你能够在控制台里看到每一个XMLHttpRequests请求post出去的参数、URL，http头以及回馈的内容，原本似乎在幕后黑匣子里运作的程序被清清楚楚地展示在你面前。
象C shell或Pythonshell一样，你还能在控制台中查看变量内容，直接运行javascript语句，就算是大段的javascript程序也能够正确运行并拿到运行期的信息。
控制台还有个重要的作用就是查看脚本的log,从前你也许习惯了使用alert来打印变量，但是Firebug给我们带来了一个新朋友—— console.log, 最简单的打印日志的语法是这样的：
PLAINTEXT
CODE:[*]console.log("hello world")
如果你有一堆参数需要组合在一起输出，可以写成这样：
PLAINTEXT
CODE:[*]console.log(2,4,6,8,"foo",bar).
Firebug的日志输出有多种可选的格式以及语法，甚至可以定制彩色输出，比起单调的alert，显然更加方便，限于篇幅，这里不做详细说明，但是有志于提高debug效率的读者，可以到Firebug的官方站点（见附录）查看更详细的教程。
图2： 在控制台里调试javascript
http://www.ooso.net/wp-content/uploads/2007/firebug2.gif
查看和修改HTML第一次看到Firebug强大的HTML代码查看器，就觉得它与众不同，相比于Firefox自带的HTML查看器，它的功能强大了许多。HTML
首先你看到的是已经经过格式化的HTML代码，它有清晰的层次，你能够方便地分辨出每一个标签之间的从属并行关系，标签的折叠功能能够帮助你集中精力分析代码。源代码上方还标记出了DOM的层次，如图3所示，它清楚地列出了一个hml元素的parent、child以及root元素，配合Firebug自带的CSS查看器使用，会给div+css页面分析编写带来很大的好处。你还可以在HTML查看器中直接修改HTML源代码，并在浏览器中第一时间看到修改后的效果，光凭这一点就会让许多页面设计师死心塌地地成为Firebug的粉丝了。
有时候页面中的javascript会根据用户的动作如鼠标的onmouseover来动态改变一些HTML元素的样式表或背景色，HTML查看器会将页面上改变的内容也抓下来，并以黄色高亮标记，让网页的暗箱操作彻底成为历史。
利用Inspect检查功能，我们还可以用鼠标在页面中直接选择一些区块，查看相应的HTML源代码和CSS样式表，真正的做到所见即所得，如果你使用了外部编辑器修改了当前网页，可以点击Firebug的reload图片重新载入网页，它会继续跟踪你之前用Inspect选中的区块，方便调试。
图3:：HTML查看器
http://www.ooso.net/wp-content/uploads/2007/firebug3.gif
CSS调试Firebug的CSS调试器是专为网页设计师们量身定做的。
如今的网页设计言必称div+css，如果你是用table套出来的HTML页面，就得按这规矩重构一遍，否则显得你不够时髦！用div做出来的页面的确能精简HTML代码，HTML标签减肥的结果就是CSS样式表的编写成了页面制作的重头戏。Firebug的CSS查看器不仅自下向上列出每一个CSS样式表的从属继承关系，还列出了每一个样式在哪个样式文件中定义。你可以在这个查看器中直接添加、修改、删除一些CSS样式表属性，并在当前页面中直接看到修改后的结果。
一个典型的应用就是页面中的一个区块位置显得有些不太恰当，它需要挪动几个象素。这时候用CSS调试工具可以轻易编辑它的位置——你可以根据需要随意挪动象素。
如图4中正在修改一个区块的背景色。
提示：如果你正在学习CSS样式表的应用，但是总记不住常用的样式表有哪些值，可以尝试在CSS调试器中选中一个样式表属性，然后用上下方向键来改变它的值，它会把可能的值一个个遍历给你看。
图4: CSS查看器，能够直接修改样式表
http://www.ooso.net/wp-content/uploads/2007/firebug4.gif
可视化的CSS尺标我们可以利用Firebug来查看页面中某一区块的CSS样式表，如果进一步展开右侧Layouttab的话，它会以标尺的形式将当前区块占用的面积清楚地标识出来，精确到象素，更让人惊讶的是，你能够在这个可视化的界面中直接修改各象素的值，页面上区块的位置就会随改动而变化。在页面中某些元素出现错位或者面积超出预料值时，该功能能够提供有效的帮助，你可以籍此分析offset、margin、padding、size之间的关系，从而找出解决问题的办法。
图5：Firebug中的CSS标尺
http://www.ooso.net/wp-content/uploads/2007/firebug5.gif
网络状况监视器也许有一天，你的老板或者客户找到你，抱怨你制作的网页速度奇慢，你该如何应对？你或许会说这可能是网络问题，或者是电脑配置问题，或者是程序太慢，或者直说是他们的人品问题？不管怎么说，最后你可能被要求去解决这个有多种可能的问题。
网络状况监视器能帮你解决这个棘手问题。Firebug的网络监视器同样是功能强大的，它能将页面中的CSS、javascript以及网页中引用的图片载入所消耗的时间以矩状图呈现出来，也许在这里你能一把揪出拖慢了你的网页的元凶，进而对网页进行调优，最后老板满意客户欢喜，你的饭碗也因此而牢固。
网络监视器还有一些其它细节功能，比如预览图片，查看每一个外部文件甚至是xmlHttpRequests请求的http头等等。
图6：网络状况监视器
http://www.ooso.net/wp-content/uploads/2007/firebug6.gif
Javascript调试器这是一个很不错的javascript脚本调试器，占用空间不大，但是单步调试、设置断点、变量查看窗口一个不少。正所谓麻雀虽小，五脏俱全。
如果你有一个网站已经建成，然而它的javascript有性能上的问题或者不是太完美，可以通过面板上的Profile来统计每段脚本运行的时间，查看到底是哪些语句执行时间过长，一步步排除问题。
图7：javascript调试器
http://www.ooso.net/wp-content/uploads/2007/firebug7.gif
DOM查看器DOM(Document ObjectModel)里头包含了大量的Object以及函数、事件，在从前，你要想从中查到需要的内容，绝非易事，这好比你去了一个巨大的图书馆，想要找到几本名字不太确切的小书，众多的选择会让你无所适从。而使用Firebug的DOM查看器却能方便地浏览DOM的内部结构，帮助你快速定位DOM对象。双击一个DOM对象，就能够编辑它的变量或值，编辑的同时，你可能会发现它还有自动完成功能，当你输入document.get之后，按下tab键就能补齐为document.getElementById，非常方便。如果你认为补齐得不够理想，按下shift+tab又会恢复原状。用了Firebug的DOM查看器，你的javascript从此找到了驱使的对象，Web开发也许就成了一件乐事。
图8: Dom查看器
http://www.ooso.net/wp-content/uploads/2007/firebug8.gif
小结Firebug插件提供了一整套web开发所必需的工具。从HTML的编写，到CSS样式表的美化调优，以及用javascript脚本开发，亦或是Ajax应用，Firebug插件都会成为你的得力助手。所谓工欲善其事，必先利其器。在Web2.0的时代，言必称Ajax，动辄就是用户体验提升，如果把Firebug工具用好，必能让你如虎添翼，将HTML、CSS、javascript整理得服服帖帖，从此成为web开发中的专家级人物。
附Firebug的中文含义是萤火虫，作者是Joe Hewitt，官方网页http://www.getfirebug.com
Firefox亦即火狐浏览器，是近年来撼动IE浏览器市场占有率的一支强大力量，要不是它的出现，我想有生之年说不定也看不到IE7的发布了，官方网页 http://www.firefox.com 支持火车。。。。历史帖子回顾中。
页:
1
[2]