前端开发必备工具[转]
http://www.css88.com/archives/53
做设计和前端开发三年了，整理一下好的经验和工具共享给各位来我博客的网友，谢谢光临我的博客
============2009年3月23日更新==========
SuperPreview微软的网页开发调试利器
uperPreview 是微软将推出的 Expression Web 3 的一部分，主要用于页面的调试，目前的 Expression Web SuperPreview 允许用户对比他们的站点在 IE 6 与 IE 7, IE 8 中的外观，而在将来的完整版中，还将支持 Firefox, Safari, Google Chrome（可能）以及更多浏览器；
介绍下载请参见：http://www.css88.com/archives/760
CSS Sprites 样式生成工具
CSS Sprites在开发的时候比较麻烦，你要通过photoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐，还要书写出css；实用这个工具就能在很大程度改善这个问题；
介绍下载请参见：http://www.css88.com/article.asp?id=642
Internet Explorer Collection让你同时拥有IE1-IE8
Internet Explorer Collection和IEtester区别：
1.IEtester无法登陆，不支持flash，Internet Explorer Collection者没有这些问题
2.Internet Explorer Collection在vista系统下只能安装很老的3个部分，如果你是vista系统那就绕道吧！
介绍下载请参见：http://www.css88.com/article.asp?id=595
============2009年1月22日更新============
HttpFox 抓包工具【FF插件】
类似IE的HttpWatch 或 IEInspector ，使用方法也差不多，
介绍下载请参见：http://www.css88.com/article.asp?id=606
漂亮、免费的取色器 Adesclrpicker
实用方便，还有取色记忆功能，
介绍下载请参见：http://www.css88.com/article.asp?id=605
============2009年1月8日更新============
前端开发桌面终极工具（FastStone Capture）推荐
主要用于截屏，截图，量尺寸，取色。
介绍下载请参见：http://www.css88.com/article.asp?id=591
============2008年8月5日更新============
介绍2款前端小工具【取色工具和量距离工具】
1.取色工具——TakeColor
2.量距离工具（像素）
介绍下载请参见：http://www.css88.com/article.asp?id=483
============2008年7月17日更新============
JavaScript调试器VenKman【firefox插件】
============2008年5月23日更新============
26.IE WebDeveloper V2.3.2.108：点击下载
一款用于IE浏览器的插件，允许直接地在浏览器窗口中浏览、传输和更新HTML DOM。该软件可以实时分析网页并且显示为一种允许你察看表格风格、Java脚本，表格以及其它网页元素的树形风格。该软件还可以在浏览器中交互式地突出显示被选择的网页元素，因此你可以在实际网页中定位其代码
其详细介绍见：IE DOM查看工具,IE Web Developer V2 破解版本
注册码:88ZWT-71C2D4E621BD3D4A
============2008年5月6日更新============
25.IETester-同时拥有IE6、IE7、IE8（Vista兼容）
具体参见：http://www.css88.com/article.asp?id=361
虽然以前我写过IE6、IE7、IE8共存的解决方案，但是看到IETester这个软件以后那些都已经没有意义了（那些办法副作用比较大，而且实现起来有些难度）。使用IETester能够较好的解决，测试网页兼容性的多IE版本的需求。暂时已经支持IE5.5——IE8beta1，我想这已经足够了。还在苦苦找寻IE6和IE7共存或者IE7和IE8共存的朋友，可以试试这个软件。当然这个软件也不是万能的，在最后，官方非常厚道的给出了暂时存在的重要bug列表。
推荐理由：
1同时拥有IE 5.5、IE6、IE7、IE8
2.常用的IE6绿色版不能在Vista上使用
============2008年4月28日更新============
二十四 搜索引擎——百搜吧（http://www.baiso8.com）
直接搜索网址：http://www.baiso8.com/
http://www.baiso8.com/so/baiso.htm
做我们这行搜索少不了，碰到有什么问题就要马上google或者百度一下，找一些相关的资料。读书那会有问题就跑图书馆，工作之后就用搜索，不过有些时候google搜不到，又得用百度，要搜图片什么的还要点来点去麻烦，做这行效率是很关键的，提高效率、节约生命嘛！
发现一个很好的网站：百搜吧。输入一次关键字能同时搜索百度、谷歌、雅虎三大搜索引擎及国内知名网站和专业网站的资源，具备根据您自己的需要自定义搜索引擎偏好，随时切换网页、电影、新闻、娱乐、图像、音乐、视频、论坛、博客、词典等专业搜索，保存您的搜索历史记录，中英文界面切换等人性化功能…
============2008年3月27日更新============
二十三 Fiddler
一个很强大的http流查看工具
http://www.fiddlertool.com/fiddler/
二十二 Httpwatch
数据分析工具,头消息接受/发送的查看,POST数据查看.等等
http://www.httpwatch.com
二十一 IE Developer Toolsbar
IE下的FireBug.HTML及CSS调试工具
http://www.windowsmarketplace.com/details.aspx?itemid=2695980
二十 Companion.JS
IE下的javascript调试工具.福音啊!福音啊!!福音啊!!!
http://www.my-debugbar.com/wiki/CompanioNJS/HomePage
十九 FireBug
强的没话说了已经….如果你不知道这是什么….那我更没话说了….
https://addons.mozilla.org/en-US/firefox/addon/1843
转载请注明出处：http://www.css88.com/
十九 Web Developer
FireFox下的查看工具,可以查看JS,CSS等页面信息
https://addons.mozilla.org/en-US/firefox/addon/60
十八 YSlow
why slow?页面性能优化查看器.基于FireBug
http://developer.yahoo.com/yslow
十七 Javascript Debugger
FireFox下的javascript调试工具,比FireBug有更强大的调试功能.
https://addons.mozilla.org/en-US/firefox/addon/216
转载请注明出处：http://www.css88.com/
十六 Opera Developer Tools
Opera下的DOM,CSS查看工具,类似FireBug.
http://dev.opera.com/articles/view/opera-developer-tools/
转载请注明出处：http://www.css88.com/
十五 webkit
Safari下的开发调试工具
http://nightly.webkit.org/
转载请注明出处：http://www.css88.com/
============2008年3月15日更新============
十四
这程序是由Mike Hall写的，JavaScript的压缩不是为了保护代码而压缩，而是压缩后的js代码文件可以小一倍甚至多倍，从而使这个js代码快速的下载到客户端，特别js文件较大时速度效果非常明显．
使用下面的表单,你可以浓缩JavaScript代码.只用将任何脚本代码粘贴到输入的文本框,压下 ‘压缩’ 按钮,那浓缩的版本就出现在 ‘输出’ 里. 然后你可以使用 ‘全选’ 按钮,快速选中’输出’里的代码,剪切粘贴到一个新的源码文件.
点击查看 http://www.css88.com/ysjs/ysjs.html
转载请注明出处：http://www.css88.com/
============2008年3月5日更新============
十三 web开发利器Aptana
点击查看 http://www.css88.com/article.asp?id=190
转载请注明出处：http://www.css88.com/
============2008年3月1日更新============
十二 Javascrīpt开发工具大集合
http://www.css88.com/article.asp?id=186
============2008年2月25日更新============
转载请注明出处：http://www.css88.com/
十— 前端开发工具箱——抓色工具(ColorPic)
大小：400k
转载请注明出处：http://www.css88.com/
一、搜索引擎——百度（http://www.baidu.com）
二、测试浏览器——同时拥有IE7、IE6、IE5.5
自从IE7出来，IE6和IE7的测试就成了问题，同一台电脑不能同时安装IE7和IE6，前台开发长久的痛啊！
哈哈，皇天不负有心人，终于有解决办法了，码头现在提供IE6破解绿色版下载，国外网站下载的，从ie的第一个版本到IE6都有的，现在提供IE6和IE5.5的破解绿色版下载
IE6的破解绿色版点击下载：点击下载此文件
IE5.5破解绿色版点击下载：点击下载此文件
转载请注明出处：http://www.css88.com/
三、XHTML、CSS、标准代码检测
做网页的朋友应该都去过 http://validator.w3.org/ 和 http://jigsaw.w3.org/css-validator/。现在有人把他们集成到了一起，搞了一个网站叫 “XHTML-CSS Validator”，点击旁边的 “Advanced” ，还可以选择校验文档类型、CSS版本等等，有兴趣可以试试。
============2007年12月23日1:10:18更新============
看不懂英文的兄弟请用http://jigsaw.w3.org/css-validator/（中文的）检测css
另：建议先使用DreamWeaver或vs2008本地检测一下；
转载请注明出处：http://www.css88.com/
四、JS脚本调试和书写工具——vs2008
============2008年3月1日18:56:00============
VS 2008已有正式版本
文件详情： Visual Studio Team System 2008 Team Suite
软件版本： 2008简体中文正式版（试用版）
文件格式： RAR 压缩文档
文件大小： 4.24 GB
发布日期： 2008.2.9
官方网站： http://msdn.microsoft.com/vstudio
免责声明：
下载地址为90天试用版（官方正式简体中文），只要按上面的说明更换CDKey即可完美升级为正式版。7个分卷压缩包均需下载才能正常安装，包含MSDN。前面6个压缩包均为700M，最后一个压缩包为142M
VS2008下载页面： 分卷压缩包1 分卷压缩包2 压缩包3 压缩包4 压缩包5 压缩包6 压缩包7
VS2008破解方法非常简单，在开始>设置>控制面版>添加或删除程序>卸载vs.net2008＞出现卸载界面＞点击Next＞输入上面CD-key ->出现成功画面即可完美将试用版升级成为正式版。
VS2008正式版序列号CDKEY：PYHYP-WXB3B-B2CCM-V9DX9-VDY8T
转载请注明出处：http://www.css88.com/
============2008年3月1日18:56:00============
VS 2008不再是程序员专用工具，VS 2008可以非常完美地支持JavaScript和ASP.NET AJAX的智能感知和调试。.NET 3.5内置了ASP.NET AJAX，并且UpdatePanel终于可以支持WebPart了。
VS2008 beta2简体中文版下载：
下载地址：
TFS: http://www.microsoft.com/downloads/details.aspx?FamilyId=053E83D0-DEB4-4EBB-B4C8-CBFFE928B4AA&displaylang=zh-cn
VSTS: http://www.microsoft.com/downloads/details.aspx?FamilyId=428C076F-E3EF-4290-9FF4-F6FD8F180B7D&displaylang=zh-cn
转载请注明出处：http://www.css88.com/
五、火狐插件
前台开发我认为必装的火狐插件
1.CSSViewer 1.0.2
看具体DOM的CSS，Web开发者可以用。
2.Firebug 1.05
调试JS的利器，同时也可进行一些简单的DOM Hook。特爽。
唯一的缺陷就是狂吃资源，如果不是Debug时间，最好把它disable掉
3.JSView 1.2.9
我人为非常重要的，可以查看当前页面的外埠js和css，这对开发者来说很重要。
4.Web Developer 1.1.3
功能上可能跟Firebug有一些重叠，但是也很强大
5.还有好的话请大家留言，我更新。。。
转载请注明出处：http://www.css88.com/
六、flash破解——ASV
Action Script Viewer（简称ASV） 可以分析 Flash 文件(.swf)文件的内部结构，并将其中的动作脚本(action scripts)分解出来，软件支持 Flash 3 4 5 及最新的 MX 制作的 swf 文件，分解出的动作脚本可以保存为文本格式，在编辑过程中可以随时对 Flash 文件进行预览。4.0版支持Macromedia Flash 4, 5 , MX , MX 2004和flash 8的 SWF 文件。
ASV5详细教程
1.从Action Script Viewer 5.0 中打开要”还原”的.swf文件。
2.文件菜单 > 导出重建数据
file > Export Rebuild data(JSFL)
3.导出数据到指定文件夹
4.打开Flash, 新建Flash文件, 将刚才文件夹中的SWF/MP3/WAV/FLV文件全部导入到库中(不要导入到场景
5.确认后保存文件, 将文件命名为”rebuild.fla” . 目的是于.jsfl文件同名 . 保存后关闭该文件。
6.然后打开”rebuild.jsfl”文件 (不要从Flash中用打开命令, 简单的方法是从文件夹中双击，此时Flash的时间轴/工具栏哗啦啦的闪)
保存该FLA文件, 然后用Ctrl+Enter发布。
Action Script Viewer 5.0 可以还原flash8的swf
目前可供下载的最高版本：Action Script Viewer v5.01（点击下载）
转载请注明出处：http://www.css88.com/
七、CSS整形工具——使用CSSTidy 1.2
我们在写CSS样式的时候通常会根据自己的一些习惯来写，比如有些时候不会使用样式缩写，样式格式随意，大小写不分（另存下来的样式是大写的）等等；
晚上有一种CSS整形工具叫CSSTidy 1.2大家可以使用一下，可以优化你写的样式，特备是节省字节方面效果显著；
转载请注明出处：http://www.css88.com/
八、IE插件——IE DeveloperToolbar 1.0
愚人码头个人观点：建议使用上面的火狐插件，如果你死活没有用火狐的习惯那就用IE的这个插件
在经历了一年半的测试期之后，微软5月正式发布了其IE Developer Toolbar最终正式版，支持IE6/7。微软开发者工具条可以让开发人员更为方便的分析网页结构，调整包括CSS在内的各种特定元素，帮助开发者更好地创建Web应用。
微软此次发布的1.0版相较Beta 3测试版并无新鲜元素加入，按照微软的说法，1.0版本主要改善了可靠性更适合作为一个正式版本来发布。
IEDeveloperToolbar特性如下：
－浏览和修改Web页的文档对象模型（DOM）。
－通过多种技术方式定位、选定Web页上的特定元素。
－禁止或激活IE设置。
－查看HTML对象的类名、ID，以及类似链接路径、tab顺序、快捷键等细节。
－描绘表格、单元格、图片或选定标签的轮廓。
－显示图片象素、大小、路径、替代文字等。
－即时重定义浏览器窗口大小到800×600或自定义大小。
－清空浏览器缓存和cookie，被清除项可从所有对象或给定域中选择。
－直接访问关联W3C规范参考、IE开发组blog或其他来源。
－显示设计时标尺，帮助对齐对象。
插件使用方法:在IE菜单的”查看” -> “浏览器栏” 里面钩选“IE Developer Toolbar”即
汉化方法:
1.先安装原版将IEDevToolbar
2.关闭所有IE浏览器
3.将IEDevToolbar.dll文件替换X:\Program Files\Microsoft\Internet Explorer Developer Toolbar
中的IEDevToolbar.dll文件.X为你的系统盘.
4.重新打开IE.
点击下载IE DeveloperToolbar 1.0(web前台开发利器)汉化版
============以下2008年1月26日更新============
转载请注明出处：http://www.css88.com/
九、参看手册
JavaScript参考手册
说明：JavaScrip必备宝典
下载地址：http://www.alixixi.com/Down/eBook/Manual/2007/20070301109.html
2.CSS参考手册
说明：苏沈小雨css2.0中文手册，页面开发人员必备手册
下载地址：http://www.div-css.com/html/download/books/00444.html
转载请注明出处：http://www.css88.com/
十、Beyond Compare v2.52 Build 252 简体中文版
说明：Beyond Compare 是一款不可多得的专业级的文件夹和文件对比工具。使用他可以很方便的对比出两个文件夹或者文件的不同之处。并把相差的每一个字节用颜色加以表示，查看方便。并且支持多种规则对比。对软件汉化者来说，这绝对是一款不可多得的工具。
下载地址：http://www.crsky.com/soft/2975.html
注册码：
urKH3mXZVDiTNgCKQnFnfvaQB5tTtahvtUr5HqwT9YZu50+b3T9bkzYKwKsfjhhiDgzR9Dr5qbmJ2EmNzYfSAptuo90Ga7NTytXRVPnH-nTye3q+vgdqSmegWMmJmaU9VsqLQNrNfxx1QLBNDdNpUBxrcdm6TPbh8-NYzpYCJmQXJOkTOb7MgovRGiJLLuTN7mpUKRcaT8uxfx1ej+sSKj4JMFGCTSzS+B2L7lKPzT6LKV8oQgg3vGcrU+Y857A2
qi 其他内容陆续更新中，敬请期待。。。
一个强大的新工具现在提供给使用基于Mozilla的系列浏览器（包括Firefox，Mozilla套件和Netscape 7.x）的Web开发人员。JavaScript调试器，又名“Venkman”，已经成为Mozilla浏览器、Web社区和脚本开发人员的一部分很长时间了。这篇文档提供一个JavaScript调试器的概览和一些在Web页面脚本开发中使用它的实际例子。这篇“入门”是一系列关于Venkman文档的第一篇。假设你已经开始使用Venkman，这里所提到的特性、程序和要点会让你作为一个Web开发人员或脚本调试者更加自信。
Venkman是一个同时拥有控制台界面和图形界面的调试器。你可以根据自己的喜好或特长，从控制台界面或图形界面使用“断点控制”，“调用栈”和“变量/对象监视器”。交互式的命令行界面允许你执行任何可用的JavaScript代码。Venkman的键盘快捷键可用于可视化的调试环境，gdb用户对于Venkman的/break，/step，/next，/finish，/frame，/where命令一定非常熟悉。
在Windows平台上上，JavaScript调试器的界面外观和Visual Interdev以及其它大型的web开发工具是很相似的。在其它操作系统平台上，如Mac OS和Unix，它提供了一个在易用性、性能居于同等水平上的独特的开发调试环境。
下载，基础教程：http://www.css88.com/article.asp?id=448
Internet Explorer Collection和IEtester区别：
1.IEtester无法登陆，不支持flash，Internet Explorer Collection者没有这些问题
2.Internet Explorer Collection在vista系统下只能安装很老的3个部分，如果你是vista系统那就绕道吧！
特点：
有方案的概念，可以建立多组方案。
强大的色盘功能，多种方式可以选择。
吸色时，局部放大（放大比率可以自己调整），方便抓取细微部分的颜色。
使用Ctrl+G快捷键取色。