通过适当的配置,Firefox可以变成一个超级网页设计工具,webdev让你能够实时设计网页样式,测试Javascript以及编辑HTMl文件.我们只需要安装以下扩展就可以实现丰富多样的网页编辑功能.  

重要:因为我们平时用不到这些扩展,所以最好建立一个独立的Firefox配置文件,这样就不会影响到常规使用时的速度了.

一.创建一个独立的Firefox配置文件.

创建多个配置文件的好处在于可以打造多个为某个目的专用的Firefox,同时也适合于多用户共享电脑,所以下面的方法不仅限于本文的目的.

1.开始–运行,输入 firefox.exe -profilemanager,启动Firefox用户配置文件向导.如果你的Firefox并未安装在默认目录下,这条命令应改为 firefox所在路径\firefox.exe -profilemanager.

2.点击创建配置文件,创建一个新用户,并为该用户取一个你自己喜欢的名字.创建后退出.如图所示,我的新建用户为Webdev(Web Development).

creat_profile

3.为新配置文件创建图标.复制桌面上的Firefox图标,并直接粘贴在桌面上,右键点击该图标,选择属性,在目标一栏的文字后面添加:

-P PROFILENAME -no-remote

其中PROFILENAME为你自己设定的配置文件名称. -no-remote是为了能够让不同配置文件的Firefox同时运行.

properties  

这样,这个名为Webdev配置文件就能独立于原来的那个之外使用了,所有的配置,包括扩展,书签,主题都是全新的.

二.必备的网页设计扩展

1.FireBug

Firebug是测试Javascript,查看CSS和HTML的绝佳工具.你可以在修改代码后立即测试页面的变化.

firebug

点击下载  

2.Web Developer Extension

这个扩展是我最早听说也是最常用的一个网页设计扩展,当时修改模板的时候起了很大作用.它几乎囊括了网页设计的所有元素,主要作用在于监测和查看代码.

Web_developer

点击下载

3.Aardvark Extension

这个轻量级扩展可以简单地显示网页元素的Class和ID,当你只想快速获得某个元素的信息时非常有用,你还可以通过它移除网页上的元素.

Aardvark

点击下载

4.Colorzilla ****

直接从网页上获取色彩代码和RGB信息,相当于图像编辑软件里的拾色器.

colorzilla

点击下载

5.View Source With

使用多种外部软件查看网页代码.

View_source_with

点击下载

6.HTML Validator

快速验证HTML代码的合法性.

Windows平台下载

Linux平台下载

7.Measure It

距离测量工具.

meanure

点击下载

8.IE View / IE Tab / OperaView / FirefoxView / Safari View / IE View Lite

在Firefox中调用其他浏览器渲染网页.测试网页的兼容性时很有用.

ietab

9.Clear Cache Button

清除网页缓存,检查CSS更改时非常有用.

cleancache

点击下载

10.Restart Firefox ****

在不损坏当前标签和进程的情况下重启Firefox.

restart_firefox

点击下载

11.Tab Mix Plus

尽管这是一个常规扩展,但是复制标签和复制标签链接功能对网页设计很有作用.

tabmix

点击下载

12.YSlow

Yslow是雅虎新近出品的一个网页分析工具.它能够给你提供网页错误信息以及网页优化建议.必须安装Firebug后才能使用该扩展.

yslow

点击下载