按标签归档 前端开发工具

【前端开发工具】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压缩和格式化工具

 
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最大的优点就是免费，小巧，界面干净美观，尤其是数据管理非常方便。

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

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

今天看到一个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 没有提供可视化工具的缺憾。

在主界面的格子上拖拽，就可以轻松画出你想要的布局。在下面的面板里，都可以为每一个 DIV 设置 ID，Class 和 HTML 代码等。绘制完成之后，点击 Export 就可以导出为网页文件了。
下面提供一个官方的操作演示视频：
 
注意，此软件需要下载安装 Adobe Air;
下载Boks：boks-v021；
blueprint–css framework研究 ：http://www.yeeach.com/2007/09/14/blueprint-css-framework/

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

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

前端开发知识库工具之网文快捕

不管你做前端开发还是网页重构或者美工，您都要积累知识，总结经验。聪明的您肯定先要一个称心如意的知识库。一个好的知识库能提高你的开发效率，帮你积累知识，总结经验。

CyberArticle 网文快捕是一个保存/管理网页的工具，主要功能有：可以在IE里面保存网页，包括文字，图片，Flash动画等等。也可以保存选中的文字，图片和链接等等；在一个树形孔建里面管理保存下来的网页。可以通过拖放来分类您的网页；在一个可视化的编辑器里面编辑网页；把网页里面的所有元素保存在一个单一文件里面(*.xbook)，保持您的磁盘清洁；可以把保存的网页导出成CHM文件，这样共向您的资料，就会变得非常简单。在这方面，WebCatcher是一个非常实用的电子书制作工具；可以把.xbook文件转换成可执行文件(*.exe)；允许您将所有的网页导出到文件加重。因此您可以复制这些文件到您的PDA上面进行阅读；支持书籍文件的全文检索，您可以快速的找到您的资料；可以很好的保护您的资料。您可以给书籍文件或者节点设置密码。
CyberArticle (网文快捕)使用手册和详细功能(参将官方说明)：http://cn.wizbrother.net/forum-19-1.html
官方完整中文版下载(含帮助和使用教程)：http://wizbrother.net/downloads/ca/5/cyberarticle-5.2-2009-3-19-setup.exe
 购买注册号（官方授权销售）：http://www.css88.com/ca/
从这里购买2用户（电脑）版本的注册号只要25元，适用于5.x/4.x版本，可以永久免费升级。
前端知识库共享QQ群：84793177。

前端开发必备工具之网页调试工具篇（2009年4月6日更新发布）

在前端开发中我们经常会要调试页面，主要html、css调试和js调试，这里整理一些工具：
一、firefox网页调试插件
1.firefox插件Firebug
主要用于html、css的调试和js调试；推荐指数：

从事了数年的Web开发工作，越来越觉得现在对WEB开发有了更高的要求。要写出漂亮的HTML代码；要编写精致的CSS样式表展示每个页面模块；要调试javascript给页面增加一些更活泼的要素；要使用Ajax给用户带来更好的体验。一个优秀的WEB开发人员需要顾及更多层面，才能交出一份同样优秀的作业。为帮助广大正处于Web2.0洪流中的开发人员，在这里为大家介绍一款轻巧灵活的辅助开发工具。(转载请注明出处：WEB前端开发 http://www.css88.com/)
介绍下载请参见： http://www.css88.com/archives/130
 

【转载】IE8″开发人员工具”使用详解下(浏览器模式、文本模式、JavaScript调试、探查器)

本文转载自：杨正祎（阿一）的博客，原文URL：http://www.cnblogs.com/JustinYoung/archive/2009/04/03/kaifarenyuangongju2.html
浏览器模式

应了《无间道》的那句话——“出来混，迟早是要还的！”。IE6种下的苦果，现在果然到了要咽下的时候了。当IE8发布的时候，他不得不面对着世界上成千上万“只有在IE6中才能正常显示”的页面。不发布IE8了吧，FireFox和Chrome又跟着后面抢蛋糕；不管那些“IE6 only”的页面吧，那浏览器出来还不被人骂死；让所有的站长都把页面重构吧，想想自己都要笑。唉，这可咋整呀。
唉，有了，咱采取一个手段，让用户自己去处理，如果他碰到了“IE6 only”页面，就让他自己手动处理一下，让浏览器还用老的渲染模式渲染页面，这虽然麻烦了一点用户，但是也不失是个办法。于是“浏览器模式”出来了。说白了，就是让用户选择当前页面用何种IE版本去渲染。
举个例子吧，顺便练习一下ie的条件注释核心代码如下——