WEB前端开发工程师(F2E)必备工具软件资源

为一名专职的 WEB前端开发工程师(F2E)，在开发过程中要用到的 工具软件可能会很多，下面， dhtml精英俱乐部就为大家讲述一下 WEB前端开发工程师(F2E)必备的 工具软件应该有哪些！

编写WEB前端代码，最低配备：Notepad(windows系统中自带的那个)，推荐：NotePad++，具有代码高亮，多标签，FTP plugin等方便的辅助功能！

屏幕取色，推荐 Color Cop，小巧方便

屏幕标尺，推荐JRuler，建议使用黄色Ver1.4版

看图软件，ACDSee，或其他自己用的习惯的就好

图片处理软件，推荐PhotoShop，版本在7或以上

在做Web前端开发之前，如果你有准备好上面的几款辅助工具，相信在Web页面制作的过程中，一定会事半功倍的！

See also:

20个让Web Developer开发生涯更加轻松的工具

源文:  http://net.tutsplus.com/articles/web-roundups/20-tools-to-make-the-life-of-a-web-developer-easier/

简译:  PuterJam

 

Typetester

一个在线对比字体的工具，可以很直观得看到不同字体的差异

 

pForm

创建HTML表单的工具，能在瞬间创建很美观的表单，并输出html代码

 

ColourLovers

在线的调色板工具，你能够搜索到很多配色方案或提交你的配色方案

 

Firebug

无所不能的firebug，不多介绍了

 

HTML Entity Character Lookup

HTML 实体 查询工具

 

960 Grid System

960 是个神奇的数字，960 是横向尺寸，960 网格系统是能够让设计师快速创建网页原型的辅助系统。可以比喻成网页的黄金分割线

 

 

Em Calculator

EM换算器～ ，可以把像素换算成 em 单位。

 

Browser Shots

多浏览器截屏工具，可以提供多个平台，不同浏览器的页面截屏效果

 

Icon Finder

还在为找图标发愁么，一个不错的图片搜索工具。

 

WhatTheFont

当你图片里看到一个好看的文字而不知道字体名称时，可以用它来帮你分析字体类型

 

MeasureIt

firefox插件，可以在页面上显示一个尺子

 

ColorZilla

同样是firefox插件，可以在页面上取色，前端开发必备

 

Pingdom

一个在线的抓包工具

 

Test Everything

Test Everything 提供了很多测试工具来测试你的站点。从css html 到seo ，从网络工具到优化应有尽有。

 

CSS Sprite Generator

样式精灵，这类工具很多了，就是把图片分割并且输出成css

 

Web Developer Toolbar

也是一个非常强大的web开发工具。

 

Domainr

域名查询工具，很方面查询域名的使用情况，并且给出未注册域名的建议。（需要FQ）

 

Font Burner

字体查询工具，并且提供在线的字体解决方案。仅限英文。

 

Smush.It

图片优化工具，能够优化你的图片尺寸

 

Load Impact

可以模拟不同地区的用户访问你的站点的情况。并且以图表的情况反馈结果。

 

See also:

Web前端开发的一些资源

aoao 整理了一些Web前端开发的资源，包括有浏览器开发工具，Microformats，电子书资源等，如果你有更好的资源给我邮件。

浏览器及相关开发工具

浏览器	相关开发工具
Firefox, Flock	Web Developer Toolbar (various) Firebug (DOM, CSS, JavaScript, Traffic) YSlow Pixel Perfect Modify Headers (Ajax) Poster (Ajax) XRAY, MRI (CSS) Firefox Accessibility Extension LiveHTTPHeaders
IE6, IE7, IE8beta	IE Developer Toolbar (DOM, CSS) HttpWatch (HTTP viewer) Web Accessibility Toolbar (Accessibility and more) XRAY, MRI (CSS) Visual Web Developer Express Edition (JavaScript) Microsoft Script Debugger (JavaScript)
Opera         Dragonfly	Opera developer tools (DOM, CSS, JavaScript) Opera Error Console (HTML, CSS, JavaScript) Web Accessibility Toolbar (Accessibility and more)
Safari WebKit	XRAY, MRI (CSS) 偏好设置》高级》在菜单栏中显示开发菜单

相关开发工具，来自klauskomenda.com
关于浏览器多版本并存问题

• Firefox装3.0的，再装个Flock1.1(内核为firefox2)的，就可以并存两个版本，某些插件不支持新版可装Nightly Tester Tools来解决
• IE多个版本并存可选择Multiple IE或者IETester

一些在线用的小东东

Accessibility

•  WAVE 3.0 Web Accessibility Tool 高度可定制的工具，它采用了图形化模型展示网站兼容性问题（ WCAG 1.0 and section 508 ）。
• TAW Web Accessibility Test 测试网页是否存在冲突（ WCAG 1.0 兼容性 ），通过图形模式生成一份依据 wcag 优先模式为基础的网站修改建议。
• HiSoftware CynthiaSays portal 采用了非常严格的规则来测试网页（ 根据 section 508 和 WCAG 1.0 规则 ），生成的报告也极为详细。
• HERA Accessibility testing with Style 使用一种极为复杂但容易理解方式指出网页的 wcag1.0 兼容性问题。

浏览器模拟工具

• Browsershots 能 给出你的网站在不同浏览器下显示效果的截图，包括：Firefox 和 Internet Explorer （ Windows ）、Firefox 和 Safari （ Mac OS X ）、Iceweasal 和 Konqueror （ Linux ），但是结果要在 1 - 3 小时后才能出来。
• Browsrcamp 没有Mac的同学可以来这里。。实时生成Safari滴，速度很快。
• IE NetRenderer 没有Win的同学可以来这里。。实时生成你的网站在 Internet Explorer 5.5 、6.0 和 7.0 下的截图。
• MobiReady Report 分析使用手机访问网页的兼容性问题，会生成一份详细的报告，并提供了在两种不同类型的手机浏览器上你得网站可能显示的样子。

一些软件

Mac

• Coda：华丽的软件设计，最大的优点就是同步方便
• TextMate：实用软件，最大的缺点就是中文支持不好，而且不支持存GBK的

Microformats^{Cheat Sheet 另一份}

• http://tools.microformatic.com/
• Firefox Add-ons :Tails Export (说明), Operator
• Safari Microformats plugin

一些参考资料

• Web开发人员的百科全书：Google Doctype,包括Web安全、JavaScript、DOM控制、 CSS技巧和窍门等。
• HTML^{Cheat Sheet}: SitePoint HTML Reference (beta) HTML Playground
• CSS^{Cheat Sheet}：W3C CSS2中文翻译（有CHM），CSS2在线参考手册， SitePoint CSS Reference, Mozilla_私有属性^部分翻译