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

[abeet]

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

编辑器

轻量文本编辑器推荐

• sublime text http://www.sublimetext.com
  丰富的插件资源，安装各种插件成为强大的前端开发工具
  必备插件Emmet、AllAutocomplete、MarkdownPreview、Javascript Beautify、CSS Format、HTMLPrettify
  
• Visual Studio Code https://code.visualstudio.com/
  
• Atom https://atom.io/ Github 出品，和GitHub无缝结合，
  
• brackets http://brackets.io/
  
• Notepad++ 小巧，免费
  
• vim 使用vim是一种信仰
  

IDE推荐

• webstorm http://www.jetbrains.com/webstorm/
  被誉为最智能的JavaScript IDE
  
• Eclipse + Aptana 插件 http://www.aptana.com/
• Eclipse + JSEclipse 插件
• HBuilder http://www.dcloud.io/
  
• Dreamweaver 目前只有它有设计视图，可以一边改HTML，一边观察设计视图的变化。HTML和CSS提示很给力，JS提示就很差劲了。

云IDE

• could9 https://c9.io/

demo在线演示

• jsfiddle http://jsfiddle.net/
  很多JS/CSS库引用自Google CDN，导致在国内引用不到。
• jsbin http://jsbin.com/

代码效率工具 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语法检查工具

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

适合代码显示的等宽字体

• YaHei Mono 中英文都显示的很好
• YaHei Consolas 中英文都显示的很好

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压缩工具，JQuery 就是使用此工具压缩，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压缩工具

• YuiCompressor http://developer.yahoo.com/yui/compressor/
  下载yuicompressor.jar后执行以下命令可压缩CSS
  java -jar yuicompressor.jar foo.css --charset UTF-8 -o foo.min.css
• clean-css (grunt cssmin)

在线压缩工具

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

构建任务运行工具

• Gulp，http://gulpjs.com/
  别用 Grunt 了，用 Gulp！。
• Grunt http://gruntjs.com/

前端模块管理器

• brower http://bower.io/
• browserify http://browserify.org/
• Webpack

网页调试工具

• Chrome开发者工具
  • Chrome推荐插件
    • Visual Event https://chrome.google.com/webstore/detail/visual-event/pbmmieigblcbldgdokdjpioljjninaim
    • YSlow https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
    • reres https://chrome.google.com/webstore/detail/reres/gieocpkbblidnocefjakldecahgeeica url重定向，不用再开fddler了
    • PrettyPrint https://chrome.google.com/webstore/detail/prettyprint/nipdlgebaanapcphbcidpmmmkcecpkhg
    • Window Resizer https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh
    • FireShot https://chrome.google.com/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg
• Firefox开发者工具
  • Firefox推荐插件
  • Firebug
  • FireQuery
  • YSlow
  • jsview
  • Firesizer
• IE开者工具
  • IE6/7插件
    • IE WebDeveloper

LiveReLoad

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

IE下内存泄漏排查

• sIEve

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

• Fiddler http://www.telerik.com/fiddler
  远程调试在线文件
• charles http://www.charlesproxy.com/
  类似Fiddler，在调试手机网页上比Fiddler更便利
• HttpWatch

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

设计稿标注、测量工具

• 马克鳗 http://www.getmarkman.com/

截图

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

看图软件

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

原型制作

• Axure http://www.axure.com/

文件比对工具

• beyond compare

知识管理

• 有道笔记 http://note.youdao.com
• 为知笔记 http://www.wiz.cn/ 支持markdown语法
• 印象笔记 https://www.yinxiang.com/ 多种终端设备多种操作系统下提供客户端。

思维导图

• Xmind http://www.xmind.net/
  美观、易用

参考手册

• 开源中国参考手册大全 http://tool.oschina.net/apidocs