十个免费的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 相关文章推荐
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
javascript中this的四种用法
May 11 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
利用Angular.js限制textarea输入的字数
Oct 20 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
Feb 08 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
JavaScript中filter的用法实例分析
Feb 27 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
vue 需求 data中的数据之间的调用操作
Aug 05 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
基于MySQL分区性能的详细介绍
2013/05/02 PHP
php实现paypal 授权登录
2015/05/28 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
Windows2003下php5.4安装配置教程(IIS)
2016/06/30 PHP
在Laravel中实现使用AJAX动态刷新部分页面
2019/10/15 PHP
js不是基础的基础
2006/12/24 Javascript
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
javascript new一个对象的实质
2010/01/07 Javascript
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
js禁止回车提交表单的示例代码
2013/12/23 Javascript
基于jQuery实现的旋转彩圈实例
2015/06/26 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
jQuery复合事件用法示例
2017/06/10 jQuery
vue devtools的安装与使用教程
2018/08/08 Javascript
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
python发送arp欺骗攻击代码分析
2014/01/16 Python
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python中django框架通过正则搜索页面上email地址的方法
2015/03/21 Python
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
python生成式的send()方法(详解)
2017/05/08 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python实现的选择排序算法示例
2017/11/29 Python
Python学习笔记之变量、自定义函数用法示例
2019/05/28 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
Beach Bunny Swimwear官网:设计师泳装和性感比基尼
2019/03/13 全球购物
自我鉴定三原则
2014/01/13 职场文书
2014全国两会心得体会
2014/03/17 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
2016廉洁从业学习心得体会
2016/01/19 职场文书
用python基于appium模块开发一个自动收取能量的小助手
2021/09/25 Python