网站开发者的一大苦恼,就是有太多的浏览器要应付。幸亏世界上有一些聪明的人,能够研究出一大些方便编辑和调试网页代码的好工具。不过,要从不计其数的小工具里面找出合适的可真不容易。这篇文章列出了几个最好用的web开发工具,并指导你快速地激活、安装、使用他们。下面是工具列表:浏览器
括号中是应用范围可用的工具括号中是应用范围WebDeveloperToolbar多用途FirebugDOMCSSJavaScript流量ModifyHeadersAjaxPosterAjaxXRAYMRICSSFirefoxAccessibilityExte
sio
LiveHTTPHeadersIEDeveloperToolbarDOMCSSWebAccessibilityToolbar可读性及更多功能XRAYMRICSSVisualWebDeveloperExpressEditio
JavaScriptMicrosoftScriptDebuggerJavaScriptOperadevelopertoolsDOMCSSJavaScriptOperaErrorCo
soleHTMLCSSJavaScriptWebAccessibilityToolbar可读性及更多功能SafariDebugMe
uJavaScriptXRAYMRICSSWebI
spectorSafari3CSSDOM
Firefox
IE6IE7
Opera
Safari
WebDeveloperToolbar
Firefox上开发和调试web站点的不二之选。Webdevelopertoolbar包含了一系列工具,从cookie管理到CSS调试,从导航线到屏幕标尺,功能简直是多得说不完。Web开发工具栏下载地址:httpchrispederickcomworkwebdeveloper
Firebug
萤火虫是Firefox上数一数二的好扩展,可作为webdevelopertoolbar的补充工具。你可以用Firebug在线检查、监控、编辑网页上的HTML、CSS、JavaScript代码。他还提供一个脚本控制台,让JS编辑编的更简单。控制台对象包含了一
f大堆选项,允许你输出代码到控制台然后进行调试。MichaelSy
c提供一个更高级的操作指南,它可以知道你详尽地设置Firebug的选项。另外,Firebug上有一个带宽监视器,能让你清楚地看到某些代码占了多少带宽。Firebug下载地址:httpwwwgetfirebugcom
ModifyHeaders
Modifyheaders是一个可以添加、修改和过滤HTTP请求头的工具。你可以用这个工具冒充成移动设备登陆网站,它甚至可以伪造一个Ajax请求。ModifyHeaders下载地址:httpmodifyheadersmozdevorg
Poster
你可以通过Poster扩展与Web服务或者其他web资源进行交互,它能让你发送HTTP请求、设置请求实体和内容格式。这可以让你检测Web交互的效果。Poster下载地址:httpcodegooglecompposterexte
sio
XRAYMRI
X光和核磁共振成像是可以应用在IE6、Webkit和Mozilla为基础的浏览器上的bookmarklets(嘛叫Bookmarklets),包括SafariFirefoxCami
o和MozillaXray能帮你检测盒模型里的每一个元素,可以测试和应用选择器。MRIXRay下载地址:httpwwwwestcivcomxrayi
dexhtmlMRI下载地址:httpwwwwestcivcr