让Firefox变成终极网页设计工具

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

 

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

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

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

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

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

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

-P PROFILENAME -no-remote

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

 

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

二.必备的网页设计扩展

1. FireBug

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

点击下载   

2. Web Developer Extension

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

点击下载

3. Aardvark Extension

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

点击下载

4. Colorzilla

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

点击下载

5. View Source With

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

点击下载

6. HTML Validator

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

Windows平台下载

Linux平台下载

7. Measure It

距离测量工具.

点击下载

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

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

9. Clear Cache Button

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

点击下载

10. Restart Firefox

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

点击下载

11. Tab Mix Plus

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

点击下载

12. YSlow

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

点击下载

让Firefox变成终极网页设计工具