java前端开发软件_7个免费的web前端开发工具详细介绍

引言

本节小编分享的7大现代必备的前端开发工具。它们都完全免费而且大多数工具能帮助你建立令人惊叹的网站

1.CodePen

特性: 实现新创意代码

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

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

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

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

2.Foundation

特性: 一款类似Bootstrap的框架

我不得不承认大多数前端开发者更喜欢使用Bootstrap框架。但是在But Zurb的Foundation最近全面更新之后，我认为它值得受到大家的关注。

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

而且新的Foundation还有一个姐妹框架叫做Foundation for Email。这是一个专门为电子邮件界面开发而使用的框架。

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

3. Unheap

特性: 最新的jQuery插件库

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

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

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

4.LivePage

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

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

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

5.Fullpage Screen Capture

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

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

6. WhatFont

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

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

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

7. Responsive Test

特性: 测试站点响应速度

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

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

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

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

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

由于前段开发发展十分迅速，所以你可以期望将来会有更多更厉害的工具出现。

如有疑问请私信或者留言交流讨论，感谢阅读，希望能帮助到大家，谢谢大家的支持！