前端开发工程师优秀开发工具推荐

keyboard-typing-798x310
原文作者 Arnaud Breton 为前端工程师,特别专注于前端和使用者经验,这篇文章出自于mention blog。以下内容由作者以第一人称撰写。

过去几年一直不断地提到 Web 应用新世代的成长,这些 App 内容变得越来越丰富,带动了前端整体的复杂度大幅增加。

像是 Backbone(藉由提供模型)、AngularJS 和 EmberJS 框架都是创造新 App 非常好的框架,增强了所有 Web 的功能;同时,Web 程式语言 Javascript 在普及度和成熟度上已经进步了非常多,而且还能和 NodeJS 在后端协同工作。

但为了能持续面对复杂度的新挑战,开发者已经创造更多工具使整体开发过程更加流畅,从测试框架到分析工具,这些成熟又有用的工具把最棒的体验带给我们的使用者。

继续阅读

前端开发小工具集合(2011-05-24更新)

收集的一些轻量级非常实用的前端开发小工具:
CSS3相关

  1. CSS3样式生成器:http://www.css88.com/tool/css3Preview/
  2. CSS3渐变样式生成器,类似Photoshop中的渐变界面:http://www.colorzilla.com/gradient-editor/
  3. CSS3动画制作工具Sencha Animator:http://www.sencha.com/products/animator/
  4. 背景色alpha透明工具:http://www.linxz.de/demo/hex_change.html(IE滤镜须是在一个有宽高设置的容器中,或者激活haslayout的属性。具体介绍:http://blog.linxz.de/ie_filter_css3_rgba/)–2011-01-18更新

Data URI

  1. Encode Data URL(舜子开发的)http://www.css88.com/tool/DataURL/

转码工具

  1. unicode转换工具:http://www.css88.com/archives/2093
  2. encode转换工具:http://labs.pufen.net/views/convert_encoding.php http://www.css88.com/tool/encode/convert_encoding.php(2011-05-24更新)
在线代码编辑器
  1. 小可<Little Code />是丸子制作的一个在线代码编辑器,轻松分享代码,用于提问,测试和转发代码等,是一个方便又不错的工具:http://code.wanz.im/
  2. CodeBox:http://box.linxz.cn/

继续阅读

【前端开发工具】google Chrome开发人员工具(Chrome Web Developer Tools)

前几天一个项目中的页面在Chrome和safari下撑开,Firefox,ie,opera正常,静态页面是OK的,只能找Chrome和safari下的调试工具,safari只有在MAC下有调试工具,而Chrome正式版(目前最新3.0.195.38)只有javascript控制台,css和html虽然也能调试,但是非常的不灵活,

继续阅读

CodeBox-代码盒子 alpha版发布

地址:http://box.linxz.cn
CodeBox主要开发者:Joshua

大家一定还记得小志当年的乱写盒子吧,而现在的代码盒子将是比乱写盒子更优化的存在。目前alpha版本已经发布。完全免费的应用,当您遇到烦恼的浏览器兼容问题的时候,把代码贴上来,仔细描述一下问题,然后复制一下URL发给达人们,很轻松的就将有问题的代码呈现出来。
点击在新窗口中浏览此图片
点击在新窗口中浏览此图片

随后,我们会继续开发,并努力实现以下功能:
a.意见建议提交
b.增加复制链接按钮
c.用户可针对代码进行留言评论(解答),并由作者选出最佳解决方案。
d.增加典型Code列表
e.代码高亮
f.更好的用户体验

意见建议请发送至weilaixu{at}gmail.com or lei17{at}ued.me

JavaScript压缩和格式化工具

jse58e8be7bca9e5928ce6a0bce5bc8fe58c96

 

JavaScript 压缩工具

这程序是由Mike Hall写的,JavaScript的压缩不是为了保护代码而压缩,而是压缩后的js代码文件可以小一倍甚至多倍,从而使这个js代码快速的下载到客户端,特别js文件较大时速度效果非常明显.

使用方法:使用下面的表单,你可以浓缩JavaScript代码.只用将任何脚本代码粘贴到输入的文本框,压下 ‘压缩’ 按钮,那浓缩的版本就出现在 ‘输出’ 里. 然后你可以使用 ‘全选’ 按钮,快速选中’输出’里的代码,剪切粘贴到一个新的源码文件.

使用该工具:http://www.css88.com/tool/ysjs/

 

JavaScript 格式化工具

1.该工具主要用于将去掉空格的代码或者压缩成一行的格式化,方便阅读,不能将加密过的js还原破解;
2.粘贴你代码到文本区域并点击格式化按钮就可以将代码格式化;支持jQuery,YUI等框架
 
使用该工具:http://www.css88.com/tool/js_beautify/

前端开发知识库工具之Evernote

前不久小志推荐给我一款笔记软件-EverNote,EverNote最大的优点就是免费,小巧,界面干净美观,尤其是数据管理非常方便。

2009-04-28_210711

1. 支持的格式:
同一般笔记软件一样,EverNote支持超文本和多种格式文件的记录。可直接将网页,图片,网页,电子邮件,Excel表格,手写笔记等文档复制过来。其特色是还支持了样式模板的记录,像银行账户,购物清单,源代码,To-Do List,联系人和短信等基本样式。而且它还能对电脑中任何文件和目录做出链接记录,这样方便我们规划自己的硬盘文档,同时利用其分类和查找功能来管理文档。比如创建一个电影或者软件的档案库,

继续阅读

【FF插件】图片压缩工具Smush it

2009-04-22_091551

今天看到一个FF图片压缩插件,只要在ff下打开网页,然后点击Smush it,就能对给网页的的图片进行压缩(包括图片和背景),并且输出压缩信息,做重要的是还可以打包下载压缩过的图片,非常实用,强烈推荐!(转载请注明出处:WEB前端开发 http://www.css88.com/)
我的博客图片总体上才压缩了2.47%,但是部分图片被压缩了50%左右,强就一个字!

继续阅读

Blueprint CSS栅格化框架可视化生成工具-Boks

Blueprint(官方网站:http://www.blueprintcss.org/) 是一个非常有名的 CSS 框架,它可以让你用很整洁的代码来将页面划分成很复杂的栅格结构(grid)。Blueprint 并没有提供一个可视化的工具来让你生成网格结构的 CSS 代码。

而 Boks 的出现,正好弥补了 Blueprint 没有提供可视化工具的缺憾。

2009-04-16_094206

在主界面的格子上拖拽,就可以轻松画出你想要的布局。在下面的面板里,都可以为每一个 DIV 设置 ID,Class 和 HTML 代码等。绘制完成之后,点击 Export 就可以导出为网页文件了。

下面提供一个官方的操作演示视频:

 

注意,此软件需要下载安装 ;

下载Boks:boks-v021

blueprint–css framework研究 :http://www.yeeach.com/2007/09/14/blueprint-css-framework/

前端开发必备工具之辅助开发工具篇

在这里推荐一些前端开发中可以是你提高开发效率的小工具,既小巧又方便;

一、截图,取色,量尺寸,屏幕录制工具

1.FastStone Capture

主要用途:截图,取色,量尺寸,屏幕录制工具;推荐指数:0456316704563167045631670456316704563167

 FastStone Capture

FastStone Capture是一款灵活简单的屏幕抓图软件。它可以抓取某个窗口或者对象的图片,也可以全屏或者以矩形模式抓图,甚至可以按照手绘的任意形状抓图。另外它还支持浮动条、热键、调整大小、剪裁、文字注释、打印以及邮件发送等功能。支持包括BMP、JPEG、JPEG 2000、GIF、PNG、PCX、TIFF、WMF、ICO和TGA在内的所有主流图片格式,其独有的光滑和毛刺处理技术让图片更加清晰,提供缩放、旋转、减切、颜色调整功能。只要点点鼠标就能随心抓取屏幕上的任何东西,支持拖放,可以直接从系统、浏览器或其他程序中导入图片,收藏夹功能让你能更好的收集更多精彩图片。(转载请注明出处:WEB前端开发 http://www.css88.com/) 继续阅读