| Dejan Cancarevic是一名优秀的网页设计者和开发人员，下面他精选了30个他经常使用的Firefox插件，这些插件都能很好的帮助网页设计者和开发人员，简化工作量，或是增加设计应用功能等等。1. CSSMate - 在线的CSS编辑器扩展插件2. ViewSourceWith - 让你查看页面资源的Firefox扩展应用3. PicLens - 变换你的浏览器为一个三维的浏览环境来查看网页图片的Firefox扩展插件4. FireShot -强大的网页截图/截屏插件5. SeoQuake - 搜索引擎优化和网站推广插件6. Font Finder -简单的高亮一个事件并且左键点击弹出菜单可以查看CSS样式7. Live HTTP Headers - 在浏览网页的同时查看一个页面的HTTP头部信息8. Modify Headers - 允许你添加、修改或过滤http头部请求信息的Firefox扩展插件9. CSSViewer -一个简单实用的扩张，可以让你查看当前网页中任何部分的CSS代码10. EditCSS - 只需要右键点击就可以在浏览器的侧边栏中查看和编辑样式表代码11. Firebug - 查看，编辑和跟踪 网页上面的CSS, HTML和Javascript的Firefox插件12. View Formatted Source -为网页上的每一个元素格式化并使用不同的颜色高亮显示13. Professor X -让你不看源代码就能看到页面头部信息的Firefox插件14. CSS validator - 一键检查当前网页是否符合W3C CSS 标准的验证器插件15. Validaty -提供给你一个类似于validator.w3.org的校验器按钮16. Html Validator - 添加HTML校验器17. Copy as HTML Link -给选中的文本创建一个当前页面的HTML链接18. TableTools - 过滤、排序 HTML表格等的Firefox扩展插件19. CHM Reader - 让Firefox支持HTML编译文件的Firefox扩展插件20. PageDiff - 帮助网页设计者和开发人员在不同的网页之前查看页面源代码21. Clipmarks - 让你保存当前页面中的任何元素的Firefox插件22. SourceEditor - 查看和编辑HTML元素代码的Firefox扩展插件23. Total Validator -使用官方DTDs提供一个真正的HTML检查器的Firefox扩展插件24. LinkChecker - 检查任何网页上面的有效链接的Firefox扩展插件25. Web Developer - 添加一个菜单和工具栏，包含各种网页开发工具的Firefox扩展插件26. Style Sheet Chooser II - 让你选择网站作者为网站提供的候补风格的Firefox扩展插件27. View Dependencies -显示网页上面所有被装载的元素信息的Firefox扩展插件28. Accessibar - 可以轻松地操纵网页显示和文本语音输出的Firefox扩展插件29. Aardvark - 用来清楚网页的冗余信息和打印网页等功能的Firefox扩展插件30. JSview - 添加能够查看外部档案源代码的功能------------------------------------------1.FireBug
Firebug是测试Javascript,查看CSS和HTML的绝佳工具.你可以在修改代码后立即测试页面的变化.
500)this.width=500'>
点击下载
2.Web Developer Extension
这个扩展是我最早听说也是最常用的一个网页设计扩展,当时修改模板的时候起了很大作用.它几乎囊括了网页设计的所有元素,主要作用在于监测和查看代码.
500)this.width=500'>
点击下载
3.Aardvark Extension
这个轻量级扩展可以简单地显示网页元素的Class和ID,当你只想快速获得某个元素的信息时非常有用,你还可以通过它移除网页上的元素.
500)this.width=500'>
点击下载
4.Colorzilla
直接从网页上获取色彩代码和RGB信息,相当于图像编辑软件里的拾色器.
500)this.width=500'>
点击下载
5.View Source With
使用多种外部软件查看网页代码.
500)this.width=500'>
点击下载
6.HTML Validator
快速验证HTML代码的合法性.
Windows平台下载
Linux平台下载
7.Measure It
距离测量工具.
500)this.width=500'>
点击下载
8.IE View / IE Tab / OperaView / FirefoxView / Safari View / IE View Lite
在Firefox中调用其他浏览器渲染网页.测试网页的兼容性时很有用.
500)this.width=500'>
9.Clear Cache Button
清除网页缓存,检查CSS更改时非常有用.
500)this.width=500'>
点击下载
10.Restart Firefox
在不损坏当前标签和进程的情况下重启Firefox.
500)this.width=500'>
点击下载
11.Tab Mix Plus
尽管这是一个常规扩展,但是复制标签和复制标签链接功能对网页设计很有作用.
500)this.width=500'>
点击下载
12.YSlow
Yslow是雅虎新近出品的一个网页分析工具.它能够给你提供网页错误信息以及网页优化建议.必须安装Firebug后才能使用该扩展.
500)this.width=500'>--------------------------------------------Firefox是一款越来越热的Web浏览器,多种多样的扩展,主题,插件,是它快速流行的重要原因.
Mozilla的网站上提供了许多扩展和插件的下载,由于众多开发者的支持,这些扩展和插件的数量也在随着需求日益增长,下面列举13款比较优秀的可以辅
助Web Designer工作的扩展.其实下面许多扩展大家都是知道的，大部分现在都升级至支持firefox3，下面简单总结一下。
1、IE Tab
500)this.width=500'>
浏览器兼容是所有Web开发者都要考虑的问题,IE Tab能够让您再Firefox中以IE的渲染方式来呈现页面,并且可以方便的在两者之间切换。
2、Style Sheet Chooser II
500)this.width=500'>
Style Sheet Chooser II
允许浏览者或开发者迅速的在为同一页面编写的不同样式之间来回的切换,甚至能够保证被选择样式应用到该站点的全部页面上. Style Sheet
Chooser II 会覆盖Firefox内置的样式表切换器[style-sheet-switcher].
你可以用多种方式来调用它:
a. 通过"查看"[View]->"页面样式"[Page Style]下面的选项;
b. 通过工具栏[Toolbar]的一键切换;
c. 通过状态栏[Status Bar]的图标按钮;
小提示: 是否在状态栏和工具栏中显示图标,可以在扩展偏好[Extension Preference]中设置
3、CSSViewer
500)this.width=500'>
一款小巧的CSS(7个最好的网上CSS资源，20个优秀网站助你征服CSS)属性查看器,随着鼠标的移动显示当前所指示元素的CSS样式信息,其中包括了所有从父级元素继承而来,用户自定义以及浏览器自定义的样式信息. 同Style Sheet Chooser II 一样,你也可以通过在工具栏添加该扩展的图标按钮来激活/禁用该扩展。
4、CSS validator
500)this.width=500'>
用W3C的CSS标准来校检页面,在新页面中显示校检结果,不过只对包含了CSS样式文件的页面起作用,例如http://www.w3.org/
其快捷按钮既可添加在右键菜单中也可添在工具栏上,
5、ColorZilla 2.0
500)this.width=500'>
ColorZilla的主要功能有:
将浏览器页面内的任何一点转换为16进制的颜色字符串,方便您快速的将其粘贴到其他的CSS样式中;
通过缩放页面来测量其上任何两点之间的距离;
从内置的调色板中选择预置的颜色,并把最常使用的颜色添加到自定义的调色板中;
6、FireShot 0.59
500)this.width=500'>
FireShot能够方便的创建页面的截图[略缩图],相比于其他的扩展,FireShot提供了一系列的编辑和注释工具,方便你快速的修改所捕获
图像或者添加文本,图像注释. 这些功能对于网页设计者,测试者,和浏览者都很有用,
此外用户还可以自己定制所要捕获的范围,是页面全部还是屏幕的可见部分
7、LinkChecker 0.6.3
500)this.width=500'>
LinkChecker用于检查页面上超级连接的有效性,验证其是否已经损坏
8、Font Finder 0.5c
500)this.width=500'>
选择一段文本或一个元素,单击右键并在菜单中选择"Font Finder",就能看到所选取对象的字体信息
9、LiveHTTPHeaders
500)this.width=500'>
这个项目的目的是通过以下两种途径实时显示页面的HTTP请求信息:
a. 在"查看页面信息"[View Page Info]中添加"头部信息"[Hearders]选项卡;
b. 添加"工具"->"Web设计"[Tools->Web Development]菜单项;
此外用户还能利用它修改HTTP Headers并发起新请求!
10、SearchStatus 1.26
500)this.width=500'>
再你的浏览器中显示Google的PageRank,Alexa排名,竞争力排名,高速关键字密度分析器,关键字高亮显示,后退/相关链接,Alexa的信息和其他的[SEO]搜索引擎优化工具.
11、FireFTP
500)this.width=500'>
FireFTP,一款免费,高效,跨平台的FTP客户端,让你快速直观的访问FTP Server
12、MeasureIt 0.3.8
500)this.width=500'>
通过可以绘制在页面任何地方的刻度尺来显示以像素(px)计算的宽度,高度,元素缩进量
13、Html Validator 0.8.5.2
500)this.width=500'>
HTML Validator,一款为Mozilla和Firefox添加HTML验证的扩展,能够在状态栏的图标上标注当前页面的HTML语法错误数量,不仅会校检服务器发送来的HTML文件,也会校检内存中的HTML代码(通常为执行Ajax请求后的返回值)。 |
