Web开发工具大集合——每个浏览器都有份的！

Web开发工具大集合——每个浏览器都有份的！

网站开发者的一大苦恼，就是有太多的浏览器要应付。幸亏世界上有一些聪明的人，能够研究出一大些方便编辑和调试网页代码的好工具。不过，要从不计其 数的小工具里面找出合适的可真不容易。这篇文章列出了几个最好用的web开发工具，并指导你快速地激活、安装、使用他们。 下面是工具列表：

浏览器	可用的工具 (括号中是应用范围)
Firefox	Web Developer Toolbar (多用途) Firebug (DOM, CSS, JavaScript, 流量) Modify Headers (Ajax) Poster (Ajax) XRAY, MRI (CSS) Firefox Accessibility Extension LiveHTTPHeaders
IE6, IE7	IE Developer Toolbar (DOM, CSS) Web Accessibility Toolbar (可读性及更多功能) XRAY, MRI (CSS) Visual Web Developer Express Edition (JavaScript) Microsoft Script Debugger (JavaScript)
Opera	Opera developer tools (DOM, CSS, JavaScript) Opera Error Console (HTML, CSS, JavaScript) XRAY, MRI (CSS) Web Accessibility Toolbar (可读性及更多功能)
Safari	Safari Debug Menu (JavaScript) XRAY, MRI (CSS) Web Inspector (Safari 3) (CSS, DOM)

Web Developer Toolbar

Firefox上开发和调试web站点的不二之选。Web developer toolbar包含了一系列工具，从cookie管理到CSS调试，从导航线到屏幕标尺，功能简直是多得说不完。 Web开发工具栏 下载地址：http://chrispederick.com/work/web-developer/

Firebug

萤火虫 是Firefox上数一数二的好扩展，可作为web developer toolbar的补充工具。你可以用Firebug在线检查、监控、编辑网页上的HTML、CSS、JavaScript代码。他还提供一个脚本控制台，让JS编辑编的更简单。控制台对象包含了一大堆选项，允许你输出代码到控制台然后进行调试。Michael Sync提供一个更高级的操作指南，它可以知道你详尽地设置Firebug的选项。另外，Firebug上有一个带宽监视器，能让你清楚地看到某些代码占了多少带宽。 Firebug 下载地址：http://www.getfirebug.com/

Modify Headers

Modify headers是一个可以添加、修改和过滤HTTP请求头的工具。你可以用这个工具冒充成移动设备登陆网站，它甚至可以伪造一个Ajax请求。 Modify Headers 下载地址：http://modifyheaders.mozdev.org/

Poster

你可以通过Poster扩展与Web服务或者其他web资源进行交互，它能让你发送HTTP请求、设置请求实体和内容格式。这可以让你检测Web交互的效果。 Poster下载地址：http://code.google.com/p/poster-extension/

XRAY & MRI

X光和核磁共振成像是可以应用在IE6+、Webkit和Mozilla为基础的浏览器上的bookmarklets（嘛叫Bookmarklets），包括Safari, Firefox, Camino和Mozilla. Xray 能帮你检测盒模型里的每一个元素，MRI可以测试和应用选择器。 XRay下载地址：http://www.westciv.com/xray/index.html MRI下载地址：http://www.westciv.com/mri/

Firefox Accessibility Extension

Mozilla/Firefox无障碍扩展让残疾人士方便地浏览网页内容。开发人员可以用这个扩展检查他们的结构和样式的网页易读性。 Firefox Accessibility Extension下载地址：http://firefox.cita.uiuc.edu/

IE Developer Toolbar

微软的英特网探索者开发工具条是IE上最好的DOM检查和CSS调试工具。由于IE具有高市场占有率而又在整个渲染模型上充满缺陷（比如臭名昭著的hasLayout边距重叠BUG），调试IE是web开发必不可少的步骤——没有这个工具条，IE的调试将会成为一场噩梦。虽然IE Developer Toolbar要比Firebug稍微弱智一点，不过他至少能帮你驯服IE这头怪兽。 IE Developer Toolbar下载地址：http://www.microsoft.com/downlo…aylang=en

Web Accessibility Toolbar

The Web Accessibility Toolbar（ href="http://www.paciellogroup.com/resources/wat-about.html">Opera版）可 以检查网站的易读性（当然是可能的易读性，总不能指望电脑能像人一样读网页吧？）此外，这个工具还提供其他功能，比如检查死链接和改变浏览框大小等等。 The Web Accessibility Toolbar下载地址:http://www.visionaustralia.org.au/ais/toolbar/

Visual Web Developer Express Edition

IE开发工具栏木有JavaScript调试功能，你得找个别的工具搞JS。你可以用Microsoft Script Debugger（下面将提到）或者免费下载这个重量级的Visual Web Developer Express Edition。Bernie那儿有这个工具的教程（当 然是英文的），它详尽地告诉你如何用这个工具调试JavaScript代码。 你也可以用Microsoft Script Editor 编辑 JS代码——不幸的是，这并不是个免费工具（在国内，这似乎不是个大问题）。他被捆绑在Office 2003安装包里，而微软又不提供单独下载。正因为如此，这儿就不多提它了。Jonathan Boutelle提供了这个工具的一些教程。

Microsoft Script Debugger

你可以在微软网站上免费下载这个工具，MSDN上也有一个相关文档。这个工具比Visual Web Developer Express Edition弱很多，不过仍然能处理一些IE上那些让人摸不着头脑的提示，诸如“缺乏对象”一类。Jake Howlett 有个《如何使用Microsoft Script Debugger调试JavaScript》的教程。为安全起见，安装脚本调试器之后最好要重新启动一下你的电脑。 Microsoft Script Debugger下载地址：http://www.microsoft.com/do..laylang=en

Opera developer tools

Opera有两个开发工具：Opera 开发控制台(Opera Developer Console)和Dom快照工具(DOM Snapshot)。从截图来看，他们都很有前途。这个工具算是Opera 9以上版本用的bookmarklets。不过我没能让他们在Opera 9.10上成功运作。 Opera开发工具下载地址：http://dev.opera.com/tools/

Opera Error Console

错误控制台是Opera的一个内置功能，可以在工具-高级-错误控制台中激活这个它。它能弹窗显示当前网页上的错误或者警告信息，或者你可以过滤某种类型的信息，比如HTML、CSS、XML或者Javascript警告。你可以在opera网站找到错误控制台的详细教程。

Safari Debug Menu

Safari的debug能力很弱，但至少显示一个Javascript控制台能让Javascript调试变得简单点儿（这与Firebug和Opera错误控制台类似）。在Apple网站的开发部门，有一个常见问题文档说明如何启用隐藏的调试菜单。 在Mac OS X下，打开一个终端然后输入：

defaults write com.apple.Safari IncludeDebugMenu 1

在windows下，用文本编辑器打开Preferences.plist，这个文件的位置往往是C:/Documents and Settings/USERNAME/Application Data/Apple Computer/Safari/Preferences.plist，在文件最后添加： <key>IncludeDebugMenu</key> <true/> 在Safari 1.3及以上版本，你可以进入Debug菜单然后钩选“记录Javascript意外”的选项。然后选择“显示JavaScript Console”。这就可以用控制台记录Javascript错误。

Web Inspector

要在Mac OS上激活Safari Web Inspector (Safari 3及以上可用)，打开终端窗口然后输入

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

在windows中，打开Documents and Settings/*你的用户名*/Application Data/Apple Computer/Safari/WebKitPreferences.plist，添加以下内容：

<key>WebKitDeveloperExtras</key>

<true/>

然后退出Safari并重新打开，你将在菜单中看到一个“检查元素”选项，就是它了！