极大提高Web开发效率的8个工具和建议（含教程）

原文链接：http://blog.jobbole.com/72222/

面对复杂的 Web 应用的开发，良好的流程和工具支持是必不可少的，它们可以让日常的开发工作更加顺畅、更加高效。本文介绍了6个Web开发利器以及相关的教程，帮助你在开发、调试、集成和发布过程极大地提高效率。

Sublime Text

SublimeText 是一款非常精巧的文本编辑器，适合编写代码、做笔记、写文章。它用户界面十分整洁，功能非同凡响，性能快得出奇。这些非常棒的特性包括任意跳转（Goto Anything）、多重选择（multiple selections）、指令面板（command palette）、免打扰模式（distraction free mode）、分区编辑（split editing）、快速项目切换（instant project switch），你还可以随意地自定义更多功能。

也许你并不了解或者熟悉Sublime Text，这不奇怪。每个程序员都有符合自己使用习惯的IDE或者编辑器，一般也不会轻易去更换。不过，程序员的提升需要不断地尝试，编辑器也不例外。

教程：这里有一个长度不到1小时的免费中文视频，帮助你快速地了解并上手Sublime Text。

快捷键笔记：

ctrl+n新建文件 ctrl+shift+p输入js切换javascript语法
ctrl+p输入@进入导航模式搜索当前文件内容，可以看到定义的对象和方法概略
多行游标：选中内容，ctrl+d..可以选中多次 ctrl+k跳过 alt+f3多选
ctrl+shift+d复制一行
快速生成html文档输入! ctrl+e 类似输入h2+内容+ctrl+e既可以得到<h2>内容</h2>
ctrl+p输入#查找HTML标签
ctrl+{前缩进 }后缩进
ctrl+enter在下一行添加空行
ctrl+shift+enter在上一行添加空行
ctrl+shift+v格式化粘贴，避免格式错乱

Yeoman

Yeoman 是一个新兴的工具。它结合了 Yo、Grunt 和 Bower 等工具，组成了一个完整的工具集合，提供各种 Web 应用开发中所需的实用功能。Yeoman 的最大优势在于它整合了各种流行的实用工具，提供了一站式的解决方案，使得 Web 应用开发中的很多方面变得简单。Yeoman 使得开发人员可以专注于应用本身的实现，而不用在搭建应用的基础结构、进行任务构建和其他辅助任务上花费过多的时间和精力。

教程：Yeoman官方教程。

Grunt

Grunt 是一个 JavaScript 任务执行工具，其核心理念是自动化。在 Web 应用开发过程中，会有很多不同的任务需要执行。这些任务与 Web 应用开发中的不同类型的组件和所处的阶段相关。比如对 JavaScript 来说，在开发阶段会需要使用 JSLint 和 JSHint 这样的工具来检查 JavaScript 代码的质量；在构建阶段，从前端性能的角度出发，会需要把多个 JavaScript 文件在合并之后进行压缩。对于 CSS 文件也有类似的任务需要执行。其他的任务还包括压缩图片、合并压缩和混淆 JavaScript 代码以及运行自动化单元测试用例等。借助Grunt，这些繁琐的重复工作，可以自动化完成。让前端开发工程师可以专注与开发本身，极大地提高了开发效率。

教程：一个小时的免费中文视频教程，快速了解Grunt。

Bower

Bower 是一个前端库管理工具，可以很好的解决在 Web 应用中引用第三方库时可能遇到的问题。在 Web 应用开发中，一般都会使用很多第三方 JavaScript 库，比如 jQuery 和 Twitter Bootstrap 这样的常见库。传统的做法是从这些库的网站上直接下载所需版本的 JavaScript 库文件，放到 Web 应用的某个目录中，然后在 HTML 页面中引用。这种做法的问题在于引入了很多额外的工作量，包括查找所需的 JavaScript 库文件、下载和管理等。一些 JavaScript 库有很多个版本，也依赖于其他 JavaScript 库。对于给定版本的某个 JavaScript 库，需要找到它所依赖的兼容版本的其他 JavaScript 库。这可能是一个递归的过程，会花费很多的时间。Bower 所提供的功能类似于 Java 开发中会用到的 Apache Ivy、Apache Maven 或 Gradle 等工具。

教程：上手Bower （英文）

Firebug

Firebug 是Firefox下的一款扩展。它集HTML查看和编辑、Javascript控制台、网络状况监视器于一体，是开发JavaScript、CSS、HTML和Ajax的得力助手。Firebug如同一把精巧的瑞士军刀，从各个不同的角度剖析Web页面内部的细节层面，给Web开发者带来很大的便利。

Firebug 除了功能强大，还非常容易上手。大多数Web开发者对它并不陌生，但未必完全了解这个神器，并最大化地发挥它的价值。

教程：全面介绍Firebug的免费中文视频教程。

Fiddler

Fiddler 是最强大最好用的Web调试工具之一。它能记录所有客户端和服务器的http和https请求，允许你监视，设置断点，甚至修改输入输出数据，Fiddler包含了一个强大的基于事件脚本的子系统，并且能使用.net语言进行扩展。你对HTTP 协议越了解， 你就能越掌握Fiddler的使用方法. 你越使用Fiddler,就越能帮助你了解HTTP协议.Fiddler无论对开发人员或者测试人员来说，都是非常有用的工具。

教程：不到一个小时的免费中文视频教程，快速了解Fiddler。

开发工具之外的Tips

靠谱的“梯子”

技术是无边界的，然而我们却被限制在局域网里。与其花费很多精力去寻找各种免费的代理和工具，不如找一个靠谱的“梯子”，或者自己搭建一个，通过SSH通道，然后再结合使用浏览器扩展，这并不难。即使是需要为梯子购买VPS，这种小额的花费也是非常值得的！因为这种投资可以节省你大量的时间，而且帮助你保持通畅的思维，工作容易进入“流”状态（参见维基百科），而不是“撞墙”后思路中断。

善用搜索引擎

首先选择一个好的搜索引擎，然后掌握一些常用的搜索技巧。对于程序员，Google是不二之选。访问不了Google？请参考上一条。做了一个明智的选择后，你需要掌握一些常用的搜索技巧，帮助你快速地找到需要的内容。大海捞针，信手拈来。这篇文章《如何使用GOOGLE高级搜索技巧》结合实例分享了很多实用的方法，推荐一读。

结束语

在Web开发过程中，还有哪些对你的开发效率有帮助的工具和技巧呢？请在评论中分享一下私藏的干货吧~

参考资料：

《Fiddler 教程》
《Yeoman：Web 应用开发流程与工具》
《Yeoman官方教程》
《如何在Google中进行搜索》 （打不开？请参考开发工具之外的第一条Tips）
《如何用好 Google 等搜索引擎？》
《Flow (psychology)》