十个免费的web前端开发工具

By Jake Rocheleau

网络控制技术产业发展快速，部份控制技术无法维持

每月都有捷伊辅助工具再次出现，这与此同时也意味著很多旧的辅助工具倒在了新控制技术的产业发展之马路上。

后端开发占有了web非常大一小部份，所以也正式成为了一类业余方向。假如你将后端开发当作他们的又一新控制技术或是做为两个可产业发展科技事业，你须要为那个组织工作预备最合适的辅助工具。

我即将撷取我的五大当代必不可少的后端开发辅助工具。它都Lannemezan所以绝大多数辅助工具能协助你创建绝妙的中文网站。

1. Grid Guide

特性: 快速生成栅格

首先我要介绍的是Grid.Guide,一款完全免费的网页应用，能让你在线生成栅格。那个小巧的应用能让你通过自定义间距和列数创建你他们的栅格方案。

首先输入你的中文网站的首选宽度和列数总数，然后Grid Guide就会生成一些选项供你选择。

你甚至可以将每种栅格方案的下载为PNG图片，用于导入Photoshop或Illustrator。这使你能更加轻松的创建栅格，而不必手动计算或是依赖栅格库。

2. Foundation

特性: 一款类似Bootstrap的框架

我不得不承认绝大多数后端开发者更喜欢使用Bootstrap框架。但是在But Zurb的 Foundation（htt

Foundation框架跟Bootstrap一样，有为栅格、排版、按钮和其它动态元素的预定义CSS类。但是它的设计更加简单，所以它不像一般的框架一样，更加容易去自定义布局。

所以捷伊Foundation还有两个姐妹框架叫做Foundation for Email。这是两个专门为电子邮件界面开发而使用的框架。

这两种Foundation框架都十分棒所以它由Zurb的团队进行维护更新。

3. CodePen

特性: 实现新创意代码

绝大多数开发者都知道使用 cloud IDEs做后端开发十分轻便。通过它你可以在任何电脑上写代码，保存你的项目到云端上且撷取。

但即使有这么多种选择，我不得不说CodePen是最棒的。它启动快速，十分可靠，易于启动且当你改动代码时会自动更新。

更不用说它还能支持几乎所有你能想到的库。你可以通过预置HTML模板语言例如Haml或Slim，使用LESS或SASS编译代码。所以CodePen允许你添加外部资源，因此你可以使用像cdnjs的中文网站去载入其他相关的库。

无疑地这是最棒的专为写代码和实现新想法的开发辅助工具。虽说也有一些类似的辅助工具，但在我看来没有比CodePen更好的了。

4. Unheap

特性: 最捷伊jQuery插件库

去寻找两个在策划列表中的最新JS插件是很困难的。绝大多数情况下你只能浏览Github上比较热门的插件或在Twitter上查看一些热门项目。

但是，有了例如 Unheap 等这类中文网站，你可以轻松快速的找到最捷伊jQuery插件。它有导航、表单、网页媒体和其他分类等各种类型的插件。

它基本上是两个拥有着网络上所有最佳的jQuery插件的存储库，所以它经常更新，所以你总能找到各种捷伊插件。

5. LivePage

特性: 自动刷新浏览器

一些浏览器插件是你用于开发的最佳辅助工具。LivePage 就是一类完全免费的谷歌扩展插件，能在你对本地文件做出修改后自动刷新你的页面。

这意味著你可以在本地编辑你的HTML/CSS/JS文件，而浏览器会在你每次保件时自动刷新。通常你须要花费一秒钟去刷新，但这样子操作很多次后你将会发现这有多么烦人。

LivePage在火狐上也有相同的插件叫做LiveReload。

6. Fullpage Screen Capture

特性: 捕获全屏

我一直使用那个扩展插件所以它是我设计布局时最喜欢用的辅助工具之一。 Fullpage Screen Capture可以让你截取整个网页并存为PNG图片。

你只需简单的点击Chrome扩展面板中的按钮，它就会自动创建整个网页的完整快照，并将其拼接成一幅图像。你可以用它来研究整体设计，这对你设计中文网站很有协助。

7. WhatFont

特性: 在网络上找到最棒的字体

排版对网页设计而言是两个巨大的挑战，所以并不是一件很容易的事。要找到最合适的字体是很累人的，但是使用例如WhatFont 的扩展插件，可以减轻你在搜索时的痛苦。

你只需添加WhatFont到你的谷歌浏览器，每当你看到网页上某一类字体时，点击它并悬停，就会给你所有的包括字体样式、大小等方案，甚至在可服务时给出下载地址（例如TypeKit或Webfonts）。

8. Node/npm

特性: 命令行

Node很显然改变了web开发的面貌。它将JavaScript传递给后台，并返回给我们npm，一类产业发展最快速的包管理器。

这几乎是必然的，并且是有着充分的理由。在当前，所有的后端开发者都应该学习命令行，因为现在这是一类在后端组织工作流中必要的辅助工具。所以npm也是那个过程的一小部份，它也完全由命令行管理。

你可以使用捷伊包，或升级旧的包。通过 npm scripts你也能了解到你还可以做什么。

假如你之前从未尝试过npm，那么我强烈建议你开始涉足这一块，看看它哪里绝妙。

9. Mobile Speed Tester

特性: 手机监测

谷歌懂得提供优质的用户体验，他们总是尝试协助站长们创建更好的中文网站。谷歌的两个最佳的辅助工具叫Mobile Speed Tester，能测试任何中文网站在电脑和手机上的响应速度。

它与此同时衡量访问速度和用户体验，以此来判定该中文网站是否对手机友好。

它不会生成详细的报告，也不足以正式成为usability testing的替代品。但这样的两个完全免费辅助工具能给你好的反馈，让你选择更加正确的方法。

10. Responsive Test

特性: 测试站点响应速度

最后但肯定同样重要的是两个叫 Responsive Test的网页应用。这是两个发布在GitHub上的开源项目，可以让你测试任何中文网站的在你的浏览器上的响应是否正常。

您只需输入两个URL并将窗口拖到您要测试的任何宽度。所以还有小按钮可以切换为iPhone、iPad和通用电脑的预定义大小方案。

这里也有另外一类 由Matt Kersley开发的相似辅助工具，但是它不能调节大小。相反的，你只能使用几种预定义大小的窗口用于测试。

这两个都是优秀的辅助工具，使用它远比来回拖动窗口要简单得多。

到这里为止我的TOP10列表已经结束了！我希望那个列表能被证实有用，与此同时我当然也希望至少有一类在这列表上的辅助工具能帮到大家。

由于前段开发产业发展十分快速，所以你可以期望将来会有更多更厉害的辅助工具再次出现。