十个免费的web前端开发工具详细整理


Posted in Javascript onSeptember 18, 2017

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

十个免费的web前端开发工具详细整理

十个免费的web前端开发工具详细整理十个免费的web前端开发工具详细整理十个免费的web前端开发工具详细整理十个免费的web前端开发工具详细整理十个免费的web前端开发工具详细整理

网络技术发展迅速,部分技术难以保持

每年都有新的工具出现,这同时也意味着许多旧的工具倒在了新技术的发展之路上。

前端开发占据了web很大一部分,而且也成为了一种职业路径。如果你将前端开发当做自己的又一新技术或者作为一个可发展事业,你需要为这个工作准备合适的工具。

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

1. Grid Guide

特性: 快速生成栅格

十个免费的web前端开发工具详细整理

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

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

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

2. Foundation

特性: 一款类似Bootstrap的框架

十个免费的web前端开发工具详细整理

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

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

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

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

3. CodePen

特性: 实现新创意代码

十个免费的web前端开发工具详细整理

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

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

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

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

4. Unheap

特性: 最新的jQuery插件库

十个免费的web前端开发工具详细整理

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

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

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

5. LivePage

特性: 自动刷新浏览器

十个免费的web前端开发工具详细整理

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

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

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

6. Fullpage Screen Capture

特性: 捕获全屏

十个免费的web前端开发工具详细整理

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

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

7. WhatFont

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

十个免费的web前端开发工具详细整理

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

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

8. Node/npm

特性: 命令行

十个免费的web前端开发工具详细整理

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

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

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

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

9. Mobile Speed Tester

特性: 手机监测

十个免费的web前端开发工具详细整理

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

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

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

10. Responsive Test

特性: 测试站点响应速度

十个免费的web前端开发工具详细整理

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

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

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

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

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

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

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
JQuery EasyUI 对话框的使用方法
Oct 24 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
JavaScript实用代码小技巧
Aug 23 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
Jul 26 Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 #Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 #Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 #Javascript
Web技术实现移动监测的介绍
Sep 18 #Javascript
探索webpack模块及webpack3新特性
Sep 18 #Javascript
浅谈JavaScript作用域和闭包
Sep 18 #Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 #Javascript
You might like
用PHP连接Oracle for NT 远程数据库
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2010/12/29 PHP
JoshChen_web格式编码UTF8-无BOM的小细节分析
2013/08/16 PHP
PHP中的排序函数sort、asort、rsort、krsort、ksort区别分析
2014/08/18 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
jquery png 透明解决方案(推荐)
2010/08/21 Javascript
jQuery 选择器、DOM操作、事件、动画
2010/11/25 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
Jquery中request和request.form和request.querystring的区别
2015/11/26 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
2016/09/28 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
2018/05/23 Javascript
json前后端数据交互相关代码
2018/09/19 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
vue项目中引入vue-datepicker插件的详解
2019/05/14 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
python通过索引遍历列表的方法
2015/05/04 Python
Python中类型关系和继承关系实例详解
2015/05/25 Python
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python3.6日志Logging模块简单用法示例
2018/06/14 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python 实现绘制整齐的表格
2019/11/18 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
解决python脚本中error: unrecognized arguments: True错误
2020/04/20 Python
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
空气环保标语
2014/06/12 职场文书
保密工作目标责任书
2014/07/28 职场文书
病危通知书样本
2015/04/17 职场文书
Android存储中最基本的文件存储方式
2022/04/30 Java/Android