十款免费的Web前端开发工具

每一年，新的工具都会出现，同时也意味着许多旧的工具倒在了开发新技术的路上。前端开发占据了Web的很大一部分，它也成为一条职业道路。若您将前端开发视为另一项新技术或可发展的事业，你需要为这个工作准备合适的工具，下面就为大家介绍一些免费的工具。

十款免费的Web前端开发工具

1、FullpageScreenCapture
特性:捕获全屏

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

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

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

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

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

3、Node/npm
特性:命令行

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

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

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

如果你之前从未尝试过npm，那么我强烈建议你开始涉足这一块，看看它哪里令人惊叹。

4、MobileSpeedTester
特性:手机监测

谷歌懂得提供优质的用户体验，他们总是尝试帮助站长们建立更好的网站。谷歌的一个最佳的工具叫MobileSpeedTester，能测试任何网站在电脑和手机上的响应速度。

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

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

5、ResponsiveTest
特性:测试站点响应速度

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

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

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

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

6、GridGuide
特性:快速生成栅格

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

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

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

7、Foundation
特性:一款类似Bootstrap的框架

我不得不承认大多数前端开发者更喜欢使用Bootstrap框架。但是在ButZurb的Foundation（http://foundation.zurb.com/）最近全面更新之后，我认为它值得受到大家的关注。

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

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

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

8、CodePen
特性:实现新创意代码

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

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

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

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

9、Unheap
特性:最新的jQuery插件库

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

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

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

10、LivePage
特性:自动刷新浏览器

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

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

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

免费领取web前端学习资料

十款免费的Web前端开发工具相关推荐

介绍几个常用的免费的Web前端开发工具
几个常用的免费的Web前端开发工具一.Grid Guide 特点:快速生成栅格二.Foundation 特点:一款类似Bootstrap的框架,有为栅格.排版.按钮和其它动态元素的预定义CSS类. ...
超级棒的170+款web前端开发工具汇总，千万要收藏好！
作者:web前端开发我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您 ...
angularjs 开发流程_超级棒的30款web前端开发工具汇总，一定要收藏！
我们与企业内部的Web开发团队进行了很多次交流,研究了很长时间,最后将Debug工具与Web前端开发工具整理汇总在了一起,这些工具对每个Web开发人员都非常有用. 这些工具将使您的工作更加轻松,特别是 ...
2012年度最佳Web前端开发工具和框架总结
2012年度最佳Web前端开发工具和框架总结 2013/01/18 | 分类: 工具与资源 | 1 条评论 | 标签: 前端, 开发工具, 开发框架分享到:0 来源:梦想天空技术的快速发展让很多人 ...
2012年度最佳 Web 前端开发工具和框架——《上篇》
技术的快速发展让很多人学习起来无所适从,幸运的是,很多优秀的 Web 开发人员和设计人员在努力寻找各种有特色的解决方案. 因此,我们有了很多优秀的小工具和库,每一个都是用来解决特定的问题或维护一组特定 ...
好程序员web培训简述web前端开发工具有哪些
好程序员web培训简述web前端开发工具有哪些,随着互联网技术的发展,用户对于web网页的依赖性越来越重,这对于web前端开发工程师的要求也在不断提高.作为开发者来说,开发工作需要依赖很多开发工具的协 ...
2012年度最佳Web前端开发工具和框架
摘要:技术的快速发展让很多人学习起来无所适从,幸运的是,很多优秀的 Web 开发人员和设计人员在努力寻找各种有特色的解决方案. 因此,我们有了很多优秀的小工具和库,每一个都是用来解决特定的问题或维护一 ...
web前端开发工具整理
这2天整理了下web前端开发工具,如下图结合平时的开发习惯,总结的.工具是提高工作效率的,其实用什么都无所谓.用一两个熟悉的就可以.
超实用web前端开发工具推荐（web开发+前端性能优化+浏览器兼容性测试+……）
要说有哪些好用的前端开发软件和工具,我可有发言权哈~因为在学习的过程中积累了不少实用型前端开发工具.今天我就从浏览器兼容性测试工具.web开发工具.前端性能优化工具.大数据可视化工具这四个方向来和大家 ...

十款免费的Web前端开发工具

十款免费的Web前端开发工具相关推荐

最新文章

热门文章