F2E Tool（前端工程师的工具箱）

一、IE网页调试插件

IE Developer Toolsbar

IE下的FireBug。HTML及CSS调试工具。.该产品让开发人员能够深入探索和理解Web页面,帮助开发者更好地创建Web应用.安装后可以在IE中快速分析网页的软件.该工具条可集成在IE窗口,或以浮动窗口形式存在.

IE Developer Toolbar 的特性如下:

• 浏览和修改Web页的文档对象模型(DOM).
• 通过多种技术方式定位、选定Web页上的特定元素.
• 禁止或激活IE设置.
• 查看HTML对象的类名、ID,以及类似链接路径、tab顺序、快捷键等细节

Microsoft Script Debugger

Microsoft(R) Script Debugger 是扩展所有 Microsoft(R) ActiveX(R) Scripting 主机应用程序的调试环境—例如 Microsoft(R) Internet Explorer (IE) 或 Microsoft(R) Internet Information Server (IIS)。

与 IE 和 IIS 联合使用时，Web 开发人员可在客户机和服务器上浏览、编辑和调试带脚本的 HTML 页（.htm、.html 和 .asp 文件）。Script Debugger 使开发人员更加有效地开发脚本应用程序。

Companion.JS

IE下的javascript调试工具。请注意，这可不是一个js文件，而是一个名字，它是作为ie的插件来安装使用的，而且需要结合Microsoft Script Debugger使用，通过安装这个工具，但页面出现错误时会在左上角弹出一个小错误提示，点击会在IE下面显示出一个错误控制台，就如FF下的 firebug控制台一样。错误信息提示很详细。via

SuperPreview

SuperPreview是微软发布的网页开发调试工具，自带有很多元素查看工具，如箭头、移动、辅助线、对比……，在查看网页的IE6/IE7/IE8不同表现的同时，可以对比效果。

IETester

同时拥有IE6、IE7、IE8（Vista兼容）。

ieHTTPHeaders

IE的抓包工具 ieHTTPHeaders，可以用来调试AJAX程序和顺便了解HTTP协议。以前调试AJAX程序都是用 tail -f 来看，现在有这工具就好方便多了。
下载地址：http://www.blunck.se/iehttpheaders/ieHTTPHeadersSetup.exe/Files/didi/Tools/ieHTTPHeadersSetup.rar
点击本站下载

二、firefox网页调试插件

FireBug

Firebug 和 firefox 整合在一起，使你浏览网页时手边有了一套强大的网页开发工具。你可以编辑、调试和监控任何网页上的 CSS、HTML 和 Javascript。要查阅文档、截图和论坛请访问Firebug的网站：http://www.getfirebug.com.

Web Developer

Web Developer作为FF的插件存在，主要功能表现在几个重要的方面：

对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等。

Web Developer插件能够帮助我们对CSS网站进行分析，我们使用FF对网页进行浏览，运用Web Developer插件不仅仅只是能看到对方的源代码，还能方便的分析出页面的布局结构，CSS书写方式，鼠标所在位置的id或class是什么等等，使 我们能迅速的理解、学习别人的成功经验，进而更加方便快捷的掌握CSS布局技术。via

YSlow

YSlow是yahoo美国开发的一个页面评分插件，基于Firebug,  非常的棒，从中我们可以看出我们页面上的很多不足，并且可以知道我们改怎么却改进和优化。YSlow从Firebug收集当前网页和该网页的访问信息后进行分析，如有必要则给出如何提高页面加载速度的建议，比如减少DNS查询，使用外部并压缩Javascript等。via

Javascript Debugger

FireFox下的javascript调试工具,比FireBug有更强大的调试功能.

三、JavaScript library
mootools 官网