前端工程师优秀开发工具介绍

已经打包前端开发常用插件的 Sublime Text 3 v3083
下载地址:http://www.zving.com/upload/tools/SublimeText3v3083.rar

Yahei Mono字体
下载地址:http://www.zving.com/upload/tools/YaheiMono.ttf

编辑器

轻量文本编辑器推荐

IDE推荐

云IDE

demo在线演示

代码效率工具 emmet

官网 http://docs.emmet.io/
使用仿CSS选择器的语法来生成代码,大大提高了HTML/CSS代码编写的速度,比如下面的演示:

可以以插件的形式安装在dreamweaver,notepad++,editplus,sublime各个编辑器上,webstorm内置emmet插件。

emmet在sublime上的效果:

  • css :他与其它编辑器的区别在于细节上,比如ctrl,alt+方向键可以修和里边的数值

  • html 效果:

webstorm,intellij idea是内置的,不需要安装。

js格式化工具

  • chrome的开发者工具,可以对js代码进行格式化查看
  • 在线JS格式化工具 http://www.jsbeautifier.org/
  • 很多编辑器提供JS格式化插件,大部分插件的格式化方法来面上面这个网站。

js语法检查工具

  • ESLint http://eslint.org/ ESLint有很多插件,有很多配置项
  • JSHint http://www.jshint.com
    JSHint跟作为JSLint的一个分支,JSHint提供更多的自定义配置项。
    很多编辑器会提供JSHint插件
  • JSLint http://www.jslint.com
    它的某些检查过于严苛,可配置项也比JSHint要少。
    很多编辑器会提供JSLint插件

适合代码显示的等宽字体

  • YaHei Mono 中英文都显示的很好
  • YaHei Consolas 中英文都显示的很好
  • Menlo 基于开源字体Bitstream Vera与自由版权字体DejaVu字体改良而来

LESS

官网 http://lesscss.org/
LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数.
通过npm安装less后,编译less到css为执行以下命令
lessc foo.less foo.css

SASS

http://sass-lang.com/
类似LESS

Jade

官网 http://jade-lang.com/
Jade是一个html模版引擎。jade 将 HTML 赋予了动态语言的特性。
Jade语言需要编译来生成HTML代码,写Jade代替HTML可以极大减少代码量和提高可读性(习惯后)。

Slim

http://slim-lang.com/
类似Jade

代码压缩

JS压缩工具

  • Uglify http://lisperator.net/uglifyjs/
    基于Node.js的压缩工具,是目前最流行的JS压缩工具,UglifyJS 压缩率高,压缩选项多,会以减少字节数为目的修改JS表达式。
    通过npm安装uglifyjs后执行以下命令可压缩JS
    uglifyjs foo.js -m -o foo.min.js
  • YuiCompressor http://developer.yahoo.com/yui/compressor/
    基于Java的压缩工具,虽然压缩率不是最高的,并不以减少字节数为目的修改代码,相当安全,易用。
    下载yuicompressor.jar后执行以下命令可压缩JS
    java -jar yuicompressor.jar foo.js --charset UTF-8 -o foo.min.js

CSS压缩工具

在线压缩工具

http://tool.css-js.com/
http://tool.oschina.net/jscompress

构建任务运行工具

前端模块管理器

网页调试工具

LiveReLoad

http://livereload.com/
动态监视文件夹文件变化,只要发现目标文件夹中有任何一个文件有改动,立刻通知浏览器刷新页面,这样就免除了手动按F5。

IE下内存泄漏排查

  • sIEve

用于抓包调试页面的HTTP代理

IE多版本共存

  • IETester
    虽然IEtester中的IE浏览器表现与系统原生IE浏览器有很多差异,而且还经常崩溃。但毕竟不用装虚拟机那么麻烦。
  • VMware Player
    IEtester中的IE浏览器表现与系统原生IE浏览器有很多差异,这时你需要在虚拟机中安装低版本IE来调试。
    VMware Player 是免费的。
  • IE Collection
    虽然IE Collection中的IE浏览器经常崩溃。但毕竟不用装虚拟机那么麻烦。

Http web服务器(用于测试ajax应用)

  • anywhere 基于Node.js 任意目录下执行anywhere命令就可以把这个目录变成一个静态文件服务器的根目录
  • Asp.Net微型服务器 http://waw.cnblogs.com/ 小巧(前提是系统必须安装 .NET Framework)
  • Apache
    • APMServ 5.2.6 http://zyan.cc/apmserv/
      一个图形界面的APM管理工具,方便地可视化配置Apache虚拟主机、虚拟目录、端口。APMServ5.2.6集成了Apache 2.2.9、PHP 5.2.6、MySQL 5.1.28&4.0.26、Nginx 0.7.19、Memcached 1.2.4、phpMyAdmin 2.11.9.2、OpenSSL、SQLite、ZendOptimizer。作者2008年就已经停止更新此工具。
  • Netbox http://netbox.cn/Download/index.htm
    小巧 (无须安装 .NET Framework),Netbox官网2004年就已经停止更新此工具。

吸色器

  • CPick.exe 小巧217K,够用
  • colorPix

吸色器&配色参照

  • ColorImpact

设计稿标注、测量工具

截图

  • QQ
    QQ随时开着,用来截图很方便,推荐修改一下截图快捷键,不要用到alt键,以免把当前软件展开的下拉菜单折叠。
  • skitch
    https://evernote.com/intl/zh-cn/skitch/ 强大的标注功能
  • FastStone Capture
    附带 屏幕取色器 屏幕标尺 屏幕录像功能

看图软件

  • ACDSee 看图软件多如牛毛,为什么只有它可以保持1:1比例翻看前后的图片?!

原型制作

文件比对工具

  • beyond compare

知识管理

思维导图

参考手册

hackIE