强大的前端设计开发调试效率工具

原创是位好同志整理了这么好的工具,有了这些工具效率能高很多。高手果然都在民间

 

介绍十个软件,适合前端开发跟网页设计者使用,能提高效率的软件。自己挑去吧。
先说下开发者:网名Linr,貌似是广州人,应该是个男的,个人网站http://www.xiaogezi.cn/,百度空间http://hi.baidu.com/vickeychen/home,其他可以看个人网站里的contact。我的名字(Liner-z)跟他沾点边呢
这人为什么这么值得我去介绍,因为她整了很多有趣的玩意儿,而且很实用。

======11-27 23:52 更新:根据反馈情况加上推荐指数,★表示10分,☆表示5分或未评价,仅做参考=====

1LinrDevTools给设计师用的调试工具(☆)
这个东西貌似还没提供,但有个演示视频,很适合做设计的用,看了视频就知道,拖拉拽扯样样精通。
视频:http://www.tudou.com/programs/view/kPg_AkHPfp8/

2、IE6、IE7的调试工具LinrWinds(★★★★)
看介绍真的很不错,我还没尝试,迫不及待要分享给大家了。
简单的说,像Firefug,据其文章描述,可以用在IETester上。集成了firebug lite,不过需要联网下载js才能出现,看网速了。

它适用于所有版本的IE(IE6、IE7、IE8、IE9、IE10)、绿色版的IE(如IEtester、IE Tab)和其他以IE为内核(Trident)的浏览器

就目前我所知道的,IETester能用的就一个DebugBar插件,可惜不能实时更改html跟css,运行js倒是可以。
对于IE浏览器本身来说,有个开发人员工具,IE8开始默认集成,F12键开启,
IE6跟IE7的可以安装IE Developer Toolbar,微软提供的是英文版,不习惯可以下载汉化版(下载:    iedevtoolbarv1_汉化版.zip (468.37 KB, 下载次数: 137)  ),但这个工具不能用在IETester里。
如果说她提供的这个LinrWinds真的可以用的话,那真是太给力了!
软件页面: http://xiaogezi.cn/app/LinrWinds.htm
下载:    LinrWinds.rar (92.29 KB, 下载次数: 135) 

3 、​Firebug增强插件 LinrLightWeb (★★★☆)
需要先安装firebug,增加很多功能,被他说得天花乱坠,我也语无伦次了。其实有了firebug,已经可以解决大部分问题了。
这个插件具体多好,要看了视频才知道的,插件提供的增强功能如下:
  • 开启网页编辑模式,随意编辑网页——Fiddler的好搭档;
  • 超强Selector,查找操作标记;
  • 刷新CSS,无需刷新整页;
  • 快速设置CSS Sprites背景,鼠标拖移即可得到位置;
  • 保持登录状态,Session不过期;禁用
相关视频:
①CSS编辑器里的自动完成功能
https://dl-web.dropbox.com/u/4267489/LinrLightWeb-CSS-Auto-Complete.wmv
②2.3版本介绍
https://dl-web.dropbox.com/u/4267489/LinrLightWeb-2.3.wmv
③与fiddler配合使用
https://dl-web.dropbox.com/u/4267489/LinrLightWeb-and-Fiddler.wmv
④配合selector整理元素标签,比查找替换更强大
https://dl-web.dropbox.com/u/4267489/LinrLightWeb-Clean-Up-HTML.wmv
⑤介绍selector的使用方法
https://dl-web.dropbox.com/u/4267489/LinrLightWeb-Selector.wmv
⑥即时编辑器
https://dl-web.dropbox.com/u/4267489/LinrLightWeb-HTML-editor.wmv
⑦快速添加table元素
https://dl-web.dropbox.com/u/4267489/LinrLightWeb-table.wmv
⑧导出某一节点为图片
https://dl-web.dropbox.com/u/4267489/LinrLightWeb-Export-DOM-to-Image.wmv

软件页面: http://xiaogezi.cn/app/LinrLightWeb.htm
Firefox插件下载地址: https://addons.mozilla.org/zh-CN/firefox/addon/linrlightweb/
同时还提供了chrome版本: http://xiaogezi.cn/app/linrlightwebforchrome.htm

4 Monster for Chrome (☆)
不知道说啥好,没用过,引用他对软件的介绍:
Monster是一款网站代码分析、质量检测及评分的浏览器扩展,它能智能分析CSS、JS、HTML内容并生动形象展示网页得分情况(类似YSlow)。

软件页面: http://xiaogezi.cn/app/Monster.htm

5 nodejsrun (☆)
看名字就知道是js工具来的,本人目前不懂js,所以对这个软件的实用性就没资格评价了,还是引用介绍吧:
Windows下最方便的nodejs打包方案,它集成了nodejs.org官方和cygwin模拟版node.exe、npm、常用模块(如express、connect)。同时它集成在Windows资源管理器右键菜单,很方便运行node.js程序。另外它还能将html、图片等资源跑成   http://127.0.0.1:520/

软件还提供一个快速服务器搭建的小程序,会不会跟其他服务器端程序有冲突我还不知道。
软件页面: http://xiaogezi.cn/app/nodejsrun.htm

6 、Photoshop网页设计师必看—— Linr PS toolkit (★★★★★)
这个也有视频演示,看得我内流满面,坑爹的咋就不做下推广,害得我现在才发现有这神器
功能强大,可以导出某一图层为图片,可以生成文字样式,可以生产css代码,包括css sprite、background-position、width、height、color等,可以快速添加设定的辅助线等等……这下好了,PS可以改名为——Web PS,简称WPS。
系统:xp、vista、win7、mac
适用版本:PS CS3+
视频演示(看过就知道什么叫强大): http://www.tudou.com/programs/view/rRc6wbdU4wk/
插件页面(内有安装方法,放在“预置\脚本”文件夹里): http://xiaogezi.cn/app/LinrPStoolkit.htm
设置动作快捷键注意事项:首先要打开一个文档,拉个选区,然后再添加动作,插入脚本项,出来窗口后再关闭,然后停止动作,不这么做会出错的。还有,精简版的好像脚本功能有缺陷,使用不了,我被迫重新装了正式版的。
下载:    LinrPStoolkit4.zip (225.63 KB, 下载次数: 319) 

7 LinrWebServer (★★☆)
VS里的东西,快速搭建服务器,我用了,结果有冲突,还老出错,算了,反正无所谓了。
继续引用介绍:
在VS里Ctrl+Shift+W,就可以快速使用WebServer来查看网页,地址一般为 http://localhost:4431/xxx。于是想到,能否将任意目录跑成WebServer呢?动手吧,从VS目录找到了一个***.WebServer.exe的文件,将其分离出来,另外写了个小程序,只要将目录拖上来,就可以创建WebServer了。好像需要.net 3.0框架 ^^* 可以跑asp,asp.net,htm,其实还可以跑php,只是需要安装php解析器...

软件页面: http://xiaogezi.cn/app/LinrWebServer.htm
下载:    LinrWebServer.net3.5-1.0.3.zip (122.97 KB, 下载次数: 18) 

8 LinrCelery  图片软件(★☆)
能够让图片漂浮到任意地方,在网页布局时可以用,可以半透明显示,缺点是不能缩放,好处是,可以快速用来比较页面跟设计稿的匹配度。提到的小技巧:
    * 使用 QQ 截屏,然后 Ctrl+V 可以粘贴查看剪切板中的图片;
    * 可以将 psd、png 等图片格式设置成默认使用 LinrCelery 打开;
    * 看图的同时,使用右键可以拷贝路径到剪贴板、使用PS快速打开;
    * 0~9 数字键 以不同透明度查看图片;
    * 将正在设计的网页局部图片拖放到浏览器上方可以直接预览效果;
软件页面: http://xiaogezi.cn/app/LinrCelery.htm
下载:    LinrCelery-1.2.11.20.zip (458.24 KB, 下载次数: 27) 

9 Linr F2E Helper  前端辅助软件(★★☆)
貌似是IE用的,功能特别多,不过加过头了,弄了个音乐盒进去。个人感觉实用性差了些,需不需要看你自己了。
软件介绍:
前端辅助,是一款前端开发人员辅助软件.它集成有画框生成CSS、IE Dom调试插件、屏幕取色、屏幕放大镜、屏幕截图(内置腾讯截屏)、时尚配色、文本编辑器、资源管理器、音乐盒等工具。另外,它集成在IE的工具栏上,点击笑脸图标,就可以开启。启动软件,它总是位于屏幕的最上方窗口标题栏位置,绝对不占用你的工作空间。


软件页面:http://xiaogezi.cn/app/LinrFrontEndHelper.htm
下载:
 LinrF2EHelper-1.5.6.11(绿色版).zip (777.52 KB, 下载次数: 125) 
 LinrF2EHelper-1.5.6.11.zip (1.17 MB, 下载次数: 52) 

10SuperApp(★★★★)
让程序窗口置顶、半透明、保存时自动刷新网页等。
我是最讨厌在各个窗口切换来切换去的了,弄个窗口置顶+半透明,就可以解决了
自动刷新视频演示:http://www.tudou.com/programs/view/zU5V81mQvCw/
软件页面:http://hi.baidu.com/vickeychen/b ... a805e7fd037f59.html
下载:  SuperApp1.1.10.19.zip (58.05 KB, 下载次数: 225) 



还有一个LinrWellshui,他自己弄的浏览器,还在开发中,可以看这里了解:http://hi.baidu.com/vickeychen/b ... c971d481cb4abc.html

还有些其他跟开发无关的,看图、听音乐的应用,就不说了,去他网站就可以看到了。

所有演示视频地址(建议下载后再看):https://dl-web.dropbox.com/u/4267489/video.htm
skydriver空间地址(他的所有软件):https://skydrive.live.com/?cid=C ... C9E6A7&sc=documents

 

原文地址:http://www.w3cfuns.com/thread-2823-1-1.html

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值