阅读更多

25顶
0踩

Web前端
作为前端开发人员来说,我们需要和HTML、CSS和JavaScript打交道,并且需要不停的突破自己的创意极限来开发和设计最棒的交互场景。

很多资深的前端设计师都拥有自己最喜欢的工具、脚本和资源,在今天这篇文章中,我们将介绍一些能够帮助你高效开发的工具脚本和资源,权当抛砖引玉,希望能够带给大家帮助,如果你也有自己喜欢的好东西,请给我们留言,希望能够让更多的朋友了解。

1.  JSFIDDLE

JSFIDDLE是一个超棒的在线JS/CSS/HTML调试和分享工具,大家可以方便的在web页面中分享代码,或者调试代码。并且有效的和同事或者朋友分享。



2.  JSBin

JSbin是另外一个相当不错的在线调试和分享网站,和JSFIDDLE非常类似,但是整体界面更偏重于编辑和调试。你拥有更大的编辑区域,而且拥有控制台可以查看错误。



3.  HTML/CSS/Javascript的在线开发工具 - Fiddle Salad

超棒的HTML/CSS/Javascript的在线开发工具,如果你使用过JSFIDDLE的话,相信大家会更喜欢这个功能强大的在线整合开发环境。



4.  Tinkerbin

另外一个在线调试和演示前端开发工具,和jsfiddle比较起来,TinkerBin界面功能比较简答,但是界面布局更加合理。使用jsfiddle的时候,总感觉每一个窗口的输入都比较费劲,用户不得不来回的拖拉窗口。而使用Tinkerbin, 你可以更加容易的切换多个窗口或者单一个窗口来浏览器CSS、HTML或者JS代码。



5.  Browser Support

作为一个前端开发者来说,处理不同浏览器的兼容性问题如同家常便饭,但是如果让你说出不同浏览器的CSS兼容性区别,还真不太容易,这里介绍的这个工具Browser Support,可以很方便的告诉你不同浏览器下的CSS区别以及是否被支持。相当的方便!



6.  openwebicon

如果你厌倦了图片生成的图标的话,使用openwebicon是一个不错选择,你只需要添加class即可生成需要的图标。



7.  gradient-scanner

这个工具超酷,能够帮助你将上传图片中的渐变特效生成CSS样式,非常便捷和高效,也非常实用。



8.  Em Calculator

Em calculator是一个轻巧的JavaScript工具,能够帮助你创建灵活的CSS设计。它帮助你转换像素到em单位。可以帮助你有效的查看、比对像素和字体大小。



9.  CSS ARROW PLEASE!

一个在线的、简单实用的生成气泡式提示的web工具。



10.  checkmycolours

一个帮助你检查网站颜色对比度的工具,能够有效的帮助你设计搭配完美的颜色方案。



11.  Screenqueri.es

如果你需要开发响应式布局设计的网站的话,这个工具肯定能够帮你大忙,它能够模拟不同设备的屏幕尺寸,并且帮助你占线不同设计上的网站显示效果,绝对是测试必备工具。



12.  Dirty Markup

如果你需要一个帮助你规整书写混乱的代码的工具的话,我强烈推荐给你这个在线代码美化工具。这个在线工具能够帮助你有效的处理HTML/HTML5、CSS和JavaScript代码。



13.  jQuery mobile原型设计开发工具 - codiqa

一个超棒的在线原型设计开发工具,这个在线设计工具能够帮助我们快速的使用拖拽的方式来构建一个基于jQuery mobile的web应用程序。



14.  Screenfly

Screenfly是一个免费测试工具,可以用来测试不同客户端下(不同显示器或者移动设备)网站显示状况的工具。它使用一个代理服务器来模拟设备,并且支持最流行的平板电脑或者移动设备。



15.  Fixie

fixiejs是一个超实用的虚构内容生成脚本,如果你设计网站或者网页,往往需要添加一些文字或者图片内容来查看效果,这个脚本可以有效的帮助你生成不同类型内容,让你专注于设计本身!



16.  SimpleCart

超酷的纯JavaScript实现的购物车程序,能够很有效的帮助你生成一个B2C购物车。简单、实用、快捷!



17.  Animate.css

animate.css 是一套超棒的CSS动画脚本,可以帮助你使用CSS实现各种类型的动画,不同的淡入、淡出,或者旋转、翻转特效。绝对是帮助你快速生成特效的好工具,你可以通过使用jQuery的addClass来给你的元素添加特效,方便实用,非常易于整合。 相信你一定会喜欢的!



18.  Redactor - HTML富编辑器

基于jQuery的一个超棒WYSIWYG编辑器。这个编辑器使用jQuery技术作为框架开发完成,整合了很多炫酷的功能,比如,拖拽上传文件、自动保存等,速度很快,并且体积非常小。



19.  jqueryboilerplate

jQuery Boilerplate是一个不错的jQuery插件开发工具,使用这个工具可以帮助你快速的构建一个jQuery插件。



来自: www.gbin1.com
25
0
评论 共 13 条 请登录后发表评论
13 楼 cy小囡囡 2012-08-27 16:51
刚开始学做前端,有的时候都不知道怎么调试,这个很有用啊!
12 楼 newsletterBroker 2012-08-13 13:44
chaoqiang
11 楼 kamarl 2012-08-11 08:03
都是不错的工具
10 楼 whrlmc 2012-08-10 22:55
checkmycolours 还有点意思
9 楼 fws4072967625 2012-08-10 16:09
看完了全部工具...有些工具还是不适合,checkmycolours 这个工具把所有的字体颜色都显示了....不方便,不过有很多我都保存地址了,以后有机会再用
8 楼 supperbbq 2012-08-10 12:16
很好!
7 楼 mybreeze77 2012-08-10 12:07
哪些是免费的?
6 楼 lingfa0511 2012-08-10 09:49
不错,每个都看了,非常喜欢。。。
5 楼 xchd 2012-08-09 17:23
很强,但玩玩可以
4 楼 damoqiongqiu 2012-08-09 17:03
不错,回头来试一下子,看看能不能淘到一件顺手的兵器
3 楼 hehebaiy 2012-08-09 16:47
很不错啊~~!!!! 
2 楼 ylzyd12345 2012-08-09 16:35
一个字Cooooooooooooooooooooooool
1 楼 witcheryne 2012-08-09 16:22
兄弟, 终于把文章发全了!

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 14个高效前端开发所必备的工具/脚本推荐(转载)

    很多资深的前端设计师都拥有自己最喜欢的工具、脚本和资源,在今天这篇文章中,我们将介绍一些能够帮助你高效开发的工具脚本和资源,权当抛砖引玉,希望能够带给大家帮助,如果你也有自己喜欢的好东西,请给我们留言...

  • 分享一些前端开发人员必备的工具,脚本和资源

    作为前端开发人员来说,我们需要和HTML、CSS和JavaScript打... 很多资深的前端设计师都拥有自己最喜欢的工具、脚本和资源,在今天这篇文章中,我们将介绍一些能够帮助你高效开发的工具脚本和资源,权当抛砖引玉,...

  • 12个前端开发必备开发的工具

    在这篇文章中,我们向您展示了一个将工具和服务分类为bucket的框架,它可能会在前端开发过程中对您有所帮助。在每个类别中,我们都会讨论一个受欢迎的选择,同时也会给您一个可供选择的选择,以防您不同意我们最初的...

  • 高阶前端开发人员必备工具-Node.JS知识讲解

    想要成为一个“值钱”的高阶Web前端开发人才,Node.JS是必须要掌握的技术之一。今天小千就为大家详细讲解Node.JS的知识,让你完全了解Node.JS的前世今生。 1、说起Node.js你了解多少呢? Node.js是一个基于Chrome ...

  • Web前端开发必备工具推荐

    http://gaohaixian.blog.163.com/blog/static/12326010520114265223489/不管你做前端开发还是网页重构,前端工具都起...1.前端开发必备工具之辅助开发工具篇 在这里推荐一些前端开发中可以是你提高开发效率的小工具...

  • 【建议收藏】前端开发必备文档(持续更新中...)

    记录前端学习的技术栈

  • 2019年20种程序员必备前端Web开发工具

    许多前端开发工具可以加速Web开发。以下是包含主要功能和下载链接的顶级工具的精选列表。 1)Npm: Npm是JavaScript的Node包管理器。它有助于发现可重用代码的包并以强大的新方式组装它们。此Web开发工具是一个...

  • 这12个前端在线工具网站,建议每个开发人员了解下

    尽管前端网站开发可能会具有挑战性,但并不一定非常困难。...希望这些资源能够帮助您更好地完成前端开发工作。1. CanIUsecaniuse.com是一个流行的网站,它提供了关于不同Web技术的浏览器兼容性信息。该网站列...

  • 2019年如何高效学习前端开发?

    近两年来,前端开发工程师越来越火了, 2019年已经到来了,很多准备入行前端开发工程师的小伙伴们,不知道...今天来给大家讲讲,在2019年,我们学习前端开发,如何才能高效学会前端开发? 零基础起步 首先,无论...

  • web前端开发必备工具推荐

    1.前端开发必备工具之辅助开发工具篇 在这里推荐一些前端开发中可所以你提高开发效率的小工具,既小巧又方便; SuperPreview微软的网页开发调试利器 FastStone Capture 次要用途:截图,取色

  • 一名合格的Web前端开发工程师少不了这10款开发工具

    正所谓“工欲善其事必先利其器”,一名合格的Web前端开发工程师自然会用到不少能使其工作高效的工具。下面,我就给大家分享学习Web前端需要了解的十款HTML5开发工具。 1、Lungo Lungo是一款基于HTML5的开发框架,专...

  • go 生成基于 graphql 服务器库.zip

    格奇尔根 首页 > 文件 > gqlgen是什么?gqlgen是一个 Go 库,用于轻松构建 GraphQL 服务器。gqlgen 基于 Schema 优先方法— 您可以使用 GraphQL Schema 定义语言来定义您的 API 。gqlgen 优先考虑类型安全— 您永远不应该看到map[string]interface{}这里。gqlgen 启用 Codegen — 我们生成无聊的部分,以便您可以专注于快速构建您的应用程序。还不太确定如何使用gqlgen?将gqlgen与其他 Go graphql实现进行比较快速启动初始化一个新的 go 模块mkdir examplecd examplego mod init example添加github.com/99designs/gqlgen到项目的 tools.goprintf '//go:build tools\npackage tools\nimport (_ "github.com/99designs/gqlgen"\n _ "github.com/99designs/gqlgen

  • 基于JAVA+SpringBoot+Vue+MySQL的社区物资交易互助平台 源码+数据库+论文(高分毕业设计).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea 数据库:MySql8.0 部署环境:maven 数据库工具:navicat

  • 法研杯2021类案检索赛道三等奖方案源码+项目说明+数据.zip

    法研杯2021类案检索赛道三等奖方案源码+项目说明+数据.zip是一个专为计算机相关专业(如计科、信息安全、数据科学与大数据技术等)学生设计的宝贵学习资源。该压缩包包含了完整的项目源码、详细的项目说明文档以及用于训练和测试的数据集,旨在帮助参赛者深入理解并掌握类案检索的相关技术和方法。该项目通过实际案例,展示了如何运用自然语言处理和机器学习技术对法律案件进行智能检索和匹配。项目内容涵盖了从数据预处理、特征提取到模型训练和评估的全过程,为学习和研究类案检索技术提供了全面的参考。本项目不仅适合作为课程设计、期末大作业或毕设项目的参考,也是企业员工提升技能、进行实践操作的优质学习资料。通过实际操作和学习该项目,用户可以加深对类案检索技术的理解,并在实践中不断提升自己的技能水平。请注意,由于该资源包含完整的项目源码和数据集,下载和使用时请确保遵守相关法律法规和道德规范,尊重知识产权和隐私权。同时,建议用户在使用前仔细阅读项目说明文档,了解项目的整体架构和使用方法,以便更好地利用该资源进行学习和研究。

  • 基于Cesium实现的对倾斜摄影模型的单体化分层方案源码.zip

    本资源提供了基于Cesium实现的倾斜摄影模型单体化分层方案的完整源码,旨在帮助开发者深入理解并实践三维地理空间数据的处理与展示。通过Cesium平台,用户能够将倾斜摄影获取的高精度三维模型进行单体化和分层处理,实现对模型中每个独立元素的精细管理和交互操作。该资源适合具备一定计算机编程基础的学习者,特别是对Cesium感兴趣的学生、研究人员及GIS行业从业者。通过下载并学习这些源码,用户可以掌握倾斜摄影模型在Cesium中的加载、单体化以及分层显示等关键技术,进而提升自己在三维地理信息系统开发领域的技能水平。

  • Go 的 PostgreSQL 驱动程序和工具包.zip

    Go 的 PostgreSQL 驱动程序和工具包 pgx - PostgreSQL 驱动程序和工具包pgx 是 PostgreSQL 的纯 Go 驱动程序和工具包。pgx 驱动程序是一个低级、高性能接口,它公开了 PostgreSQL 特定的功能,例如LISTEN/ NOTIFY和COPY。它还包括一个标准database/sql接口的适配器。工具包组件是一组相关的软件包,用于实现 PostgreSQL 功能,例如解析线路协议以及 PostgreSQL 与 Go 之间的类型映射。这些底层软件包可用于实现替代驱动程序、代理、负载均衡器、逻辑复制客户端等。示例用法package mainimport ( "context" "fmt" "os" "github.com/jackc/pgx/v5")func main() { // urlExample := "postgres://username:password@localhost:5432/database_name" conn, err := pgx.Connect(context.B

  • C#ASP.NET中小型超市管理系统源码数据库 SQL2012源码类型 WinForm

    ASP.NET中小型超市管理系统源码 超市管理系统是专门为中小型超市打造的管理系统,可以方便管理时更加准确清晰的查看商品信息, 仓库出售与进货的信息,还有每一个部门员工的信息,也更加直观的体现出每一阶段的商品销售情况; 从而提高项目管理水平,实现了工作的协同化、提高了工作效率 二、功能介绍 1.1 UI Requirements界面要求 (1)界面美观,给用户一种很舒心的感觉。 (2)界面所体现出的功能清晰明了,让用户一目了然。 (3)界面的背景颜色搭配符合超市管理系统界面的设计理念。 1.2 UI Requirements界面要求 (1) 使用ADO.NET与数据库交互制作 (2) 使用Visual Studio设计窗体布局 (3) 使用提供的用控件快速开发 1.3 Development Environment 开发环境 (1) 开发工具:Visua

  • 毕设&课程作业_基于C#的易知仓库管理系统.zip

    计算机系毕业设计

  • Go 编程教程的主列表、其撰写、其源代码以及其当前构建状态!.zip

    教程边缘TutorialEdge.net Go 教程 ‍‍欢迎来到 TutorialEdge Go 存储库!此 repo 的目标是能够跟踪所有 Go 教程及其各自的 github repo 位置和构建状态。这些将在 Go 最新版本发布时更新和运行。目录初学者教程中级教程高级教程DevOps项目数据格式并发教程挑战初学者教程这些教程主要针对那些希望提高对 Go 语言工作原理的基本理解的语言新手!教程标题 教程边缘 Github 构建状态 更新日期01 - Go 入门 阅读教程 TutorialEdge/getting-started-with-go 不适用02 - Go 基本类型教程 阅读教程 TutorialEdge/go-basic-types-tutorial 不适用03 - Go 复合类型教程 阅读教程 TutorialEdge/go-complex-types-tutorial 不适用04 - Go 函数教程 阅读教程 TutorialEdge/go-functions-tutorial 2019 年 3 月 27 日

  • 基于JAVA+SpringBoot+Vue+MySQL的敬老院管理系统 源码+数据库(高分毕业设计).zip

    项目已获导师指导并通过的高分毕业设计项目,可作为课程设计和期末大作业,下载即用无需修改,项目完整确保可以运行。 包含:项目源码、数据库脚本、软件工具等,该项目可以作为毕设、课程设计使用,前后端代码都在里面。 该系统功能完善、界面美观、操作简单、功能齐全、管理便捷,具有很高的实际应用价值。 项目都经过严格调试,确保可以运行!可以放心下载 技术组成 语言:java 开发环境:idea 数据库:MySql8.0 部署环境:maven 数据库工具:navicat

Global site tag (gtag.js) - Google Analytics