原文作者 Arnaud Breton 为前端工程师，特别专注于前端和使用者经验，这篇文章出自于mention blog。以下内容由作者以第一人称撰写。

　　过去几年一直不断地提到 Web 应用新世代的成长，这些 App 内容变得越来越丰富，带动了前端整体的复杂度大幅增加。

　　像是 Backbone(藉由提供模型)、AngularJS 和 EmberJS 框架都是创造新 App 非常好的框架，增强了所有 Web 的功能;同时，Web 程式语言 Javascript 在普及度和成熟度上已经进步了非常多，而且还能和 NodeJS 在后端协同工作。

　　但为了能持续面对复杂度的新挑战，开发者已经创造更多工具使整体开发过程更加流畅，从测试框架到分析工具，这些成熟又有用的工具把最棒的体验带给我们的使用者。

　　就如同刚刚所提到的，我们喜欢能够帮助我们提供最棒品质的软体，同时也能使得生活变得更加简单方便，本文要分享给大家 5 个我们每天面对挑战所使用最棒的工具和框架：

　　Chrome dev tools

　　这是目前最好的前端开发工具!

　　Chrome 自从它诞生后，就已经大量投资在开发者工具软体，至今仍不断的在改善它，每一个发布会(每六周一次)都会伴随着它自己的全新开发功能。

　　这个开发工具是一个完整的多元软体套件，你可以实时编辑 DOM(HTML)/CSS，当进行一个深入的效能分析时，可以一步步找出 Javascript 的错误，甚至能增加终端机指令。感谢有它，近来解决了回报效能的问题。

　　DOM/CSS 编辑器是非常强大的工具，能即时回馈给你的团队，能够在 UI/UX 的新功能上很快地执行迴圈。

　　官方网站和 Google Developers YouTube 管道都是资讯的金矿，比如说，命令列的 API(应用程式介面，Application Programming Interface)包含非常多有用的指令，比如说从控制台功能中的复制指令，复制到剪贴簿上。

　　许多详细的使用手册同样在 HTML5 Rocks 里都能参考。如果你的好奇心很强，并且想了解浏览器究竟是如何运作的，那么你会在这些教学里学到很多东西，帮助你全面掌控开发周期。

　　除了上述的之外，最重要的是，透过网络工具你能知道现在在介面之下到底发生了什么事情，以及优化你的下载速度，时间轴会以更深入的角度来告诉你浏览器做了哪些事情。

　　如果你跟我们一样充满好奇心，你可以学到更多关于浏览器、Web 是如何运作的，如此一来，你就可以反过来完整的操控应用程式的生命周期。

　　以我个人观点来说，如果它们依照现在的路线持续发展下去，肯定会变成 Web 供应开发商最终的IDE(Integrated Developer Environment)，最强大的放入整合发展空间。

　　Grunt

　　说到工作自动化，Grunt 是我们的首选。

　　它是 Javascript 跑任务的专家，针对一般的任务提供大量整合性的外挂程式，扩展程度仍很高，提供很多选项让你能够自由的写任何符合需求的工作内容。最棒的是，你能够将这些任务结合创造更强大而复杂的工作。Grunt 的范畴超出仅仅是自动化前端相关的工作，举例来说，当我们在开发时，我们利用它来测试 PHP：

　　我们同样也用它暂时解决在 Vagrant 中自动监测与保护的 rsync(Unix 下的一款应用软体)一些效能问题，这是近来才被引进的方法。Grunt 提供很广泛的外挂程式，从浏览档案夹、诊断讯息、编译程式到最简化你的程式码。它的句法是一致且容易学习的，可以让琐碎的工作变得简单。

　　LiveReload

　　你有没有算过，每天平均有多少次会按键盘上的重新整理键呢?非常多，对吧!

　　LiveReload 是一个简单的 Web 协议，不论档案在哪时候被修改而触发事件，客户都能自行处理事情;客户端和伺服器端都能进入各种不同的实作。

　　说到 Chrome 的扩充功能，Chrome 商店就是一个很强大的例子。去体验看看吧，你一定能发现很多让生活变得更简单的东西。

　　以下几个是我们最喜欢的：

　　1. WhatFont：你可以透过它知道在任何网站上内容的字型是什么，当你在找最适合的文字编排时，