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

面对复杂的 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。

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)

上一篇:深入浅出JavaScript之闭包(Closure)


下一篇:旧文—冬日感怀