资讯频道 → Web前端
阅读更多

25顶
0踩

Web前端

原创新闻 高效前端开发所必备的工具/脚本推荐

2012-08-09 14:41 by 见习编辑 tyygming 评论(13) 有25338人浏览
HTML CSS JavaScript jQuery

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

作为前端开发人员来说，我们需要和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的开发框架，专...

  • MATLAB实现基于LSTM-AdaBoost长短期记忆网络结合AdaBoost时间序列预测（含模型描述及示例代码）

    内容概要：本文档详细介绍了基于 MATLAB 实现的 LSTM-AdaBoost 时间序列预测模型，涵盖项目背景、目标、挑战、特点、应用领域以及模型架构和代码示例。随着大数据和AI的发展，时间序列预测变得至关重要。传统方法如 ARIMA 在复杂非线性序列中表现欠佳，因此引入了 LSTM 来捕捉长期依赖性。但 LSTM 存在易陷局部最优、对噪声鲁棒性差的问题，故加入 AdaBoost 提高模型准确性和鲁棒性。两者结合能更好应对非线性和长期依赖的数据，提供更稳定的预测。项目还展示了如何在 MATLAB 中具体实现模型的各个环节。 适用人群：对时间序列预测感兴趣的开发者、研究人员及学生，特别是有一定 MATLAB 编程经验和熟悉深度学习或机器学习基础知识的人群。 使用场景及目标：①适用于金融市场价格预测、气象预报、工业生产故障检测等多种需要时间序列分析的场合；②帮助使用者理解并掌握将LSTM与AdaBoost结合的实现细节及其在提高预测精度和抗噪方面的优势。 其他说明：尽管该模型有诸多优点，但仍存在训练时间长、计算成本高等挑战。文中提及通过优化数据预处理、调整超参数等方式改进性能。同时给出了完整的MATLAB代码实现，便于学习与复现。

  • palkert_3ck_01_0918.pdf

    palkert_3ck_01_0918

  • pepeljugoski_01_1106.pdf

    pepeljugoski_01_1106

  • tatah_01_1107.pdf

    tatah_01_1107

  • [AB PLC例程源码][MMS_046393]Motor Speed Reference.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！

  • 基于51的步进电机控制系统20250302

    题目：基于单片机的步进电机控制系统 模块： 主控：AT89C52RC 步进电机（ULN2003驱动） 按键（3个） 蓝牙（虚拟终端模拟） 功能： 1、可以通过蓝牙远程控制步进电机转动 2、可以通过按键实现手动与自动控制模式切换。 3、自动模式下，步进电机正转一圈，反转一圈，循环 4、手动模式下可以通过按键控制步进电机转动（顺时针和逆时针）

  • [AB PLC例程源码][MMS_041234]Logix Fault Handler.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！

  • [AB PLC例程源码][MMS_042348]Using an Ultra3000 as an Indexer on DeviceNet with a CompactLogix.zip

    AB PLC例程代码项目案例 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。 3、用途：项目具有较高的学习借鉴价值，不仅适用于小白学习入门进阶。也可作为毕设项目、课程设计、大作业、初期项目立项演示等。 4、如果基础还行，或热爱钻研，亦可在此项目代码基础上进行修改添加，实现其他不同功能。 欢迎下载！欢迎交流学习！不清楚的可以私信问我！

  • 智慧校园平台建设全流程详解：从需求到持续优化

    内容概要：本文详细介绍了建设智慧校园平台所需的六个关键步骤。首先通过需求分析深入了解并确定校方和使用者的具体需求；其次是规划设计阶段，依据所得需求制定全面的建设方案。再者是对现有系统的整合——系统集成，确保新旧平台之间的互操作性和数据一致性。培训支持帮助全校教职工和学生快速熟悉新平台，提高效率。实施试点确保系统逐步稳定部署。最后，强调持续改进的重要性，以适应技术和环境变化。通过这一系列有序的工作，可以使智慧校园建设更为科学高效，减少失败风险。 适用人群：教育领域的决策者和技术人员，包括负责信息化建设和运维的团队成员。 使用场景及目标：用于指导高校和其他各级各类学校规划和发展自身的数字校园生态链；目的是建立更加便捷高效的现代化管理模式和服务机制。 其他说明：智慧校园不仅仅是简单的IT设施升级或软件安装，它涉及到全校范围内的流程再造和创新改革。

Global site tag (gtag.js) - Google Analytics