编写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
![在新窗口打开图片](http://www.pjhome.net/attachments/month_0906/20090611105455.jpg)
一个在线对比字体的工具,可以很直观得看到不同字体的差异
pForm
![在新窗口打开图片](http://www.pjhome.net/attachments/month_0906/20090611105640.jpg)
创建HTML表单的工具,能在瞬间创建很美观的表单,并输出html代码
ColourLovers
在线的调色板工具,你能够搜索到很多配色方案或提交你的配色方案
Firebug
![在新窗口打开图片](http://www.pjhome.net/attachments/month_0906/20090611105711.jpg)
无所不能的firebug,不多介绍了
HTML Entity Character Lookup
HTML 实体 查询工具
960 Grid System
960 是个神奇的数字,960 是横向尺寸,960 网格系统是能够让设计师快速创建网页原型的辅助系统。可以比喻成网页的黄金分割线
Em Calculator
![在新窗口打开图片](http://www.pjhome.net/attachments/month_0906/20090611105743.jpg)
EM换算器~ ,可以把像素换算成 em 单位。
Browser Shots
多浏览器截屏工具,可以提供多个平台,不同浏览器的页面截屏效果
Icon Finder
还在为找图标发愁么,一个不错的图片搜索工具。
WhatTheFont
当你图片里看到一个好看的文字而不知道字体名称时,可以用它来帮你分析字体类型
MeasureIt
![在新窗口打开图片](http://www.pjhome.net/attachments/month_0906/20090611105841.jpg)
firefox插件,可以在页面上显示一个尺子
ColorZilla
![在新窗口打开图片](http://www.pjhome.net/attachments/month_0906/20090611105849.jpg)
同样是firefox插件,可以在页面上取色,前端开发必备
Pingdom
一个在线的抓包工具
Test Everything
![在新窗口打开图片](http://www.pjhome.net/attachments/month_0906/20090611105915.jpg)
Test Everything 提供了很多测试工具来测试你的站点。从css html 到seo ,从网络工具到优化应有尽有。
CSS Sprite Generator
![在新窗口打开图片](http://www.pjhome.net/attachments/month_0906/20090611105951.jpg)
样式精灵,这类工具很多了,就是把图片分割并且输出成css
Web Developer Toolbar
也是一个非常强大的web开发工具。
Domainr
![](http://www.pjhome.net/attachments/month_0906/20090611110039.jpg)
域名查询工具,很方面查询域名的使用情况,并且给出未注册域名的建议。(需要FQ)
Font Burner
字体查询工具,并且提供在线的字体解决方案。仅限英文。
Smush.It
![在新窗口打开图片](http://www.pjhome.net/attachments/month_0906/20090611111325.jpg)
图片优化工具,能够优化你的图片尺寸
Load Impact
可以模拟不同地区的用户访问你的站点的情况。并且以图表的情况反馈结果。
See also:
Web前端开发的一些资源
aoao 整理了一些Web前端开发的资源,包括有浏览器开发工具,Microformats,电子书资源等,如果你有更好的资源给我邮件。
浏览器及相关开发工具
浏览器 | 相关开发工具 |
---|---|
Firefox, Flock |
|
IE6, IE7, IE8beta |
|
Opera |
|
Safari WebKit |
相关开发工具,来自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
MicroformatsCheat Sheet 另一份
- http://tools.microformatic.com/
- Firefox Add-ons :Tails Export (说明), Operator
- Safari Microformats plugin
一些参考资料
- Web开发人员的百科全书:Google Doctype,包括Web安全、JavaScript、DOM控制、 CSS技巧和窍门等。
- HTMLCheat Sheet: SitePoint HTML Reference (beta) HTML Playground
- CSSCheat Sheet:W3C CSS2中文翻译(有CHM),CSS2在线参考手册, SitePoint CSS Reference, Mozilla_私有属性部分翻译