浏览器中Web开发工具大集合

《浏览器中Web开发工具大集合》由会员分享，可在线阅读，更多相关《浏览器中Web开发工具大集合（5页珍藏版）》请在装配图网上搜索。

1、网站开发者的一大苦恼，就是有太多的浏览器要应付。幸亏世界上有一些聪明的人，能够研究出一大些方便编辑和调试网页代码的好工具。不过，要从不计其数的小工具里面找出合适的可真不容易。这篇文章列出了几个最好用的web开发工具，并指导你快速地激活、安装、使用他们。 下面是工具列表：浏览器可用的工具 (括号中是应用范围)Firefox Web Developer Toolbar (多用途) Firebug (DOM, CSS, JavaScript, 流量) Modify Headers (Ajax) Poster (Ajax) XRAY, MRI (CSS) Firefox Accessibility E

2、xtension 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, JavaScrip

3、t) Web Accessibility Toolbar (可读性及更多功能) Safari Safari Debug Menu (JavaScript) XRAY, MRI (CSS) Web Inspector (Safari 3) (CSS, DOM) Web Developer ToolbarFirefox上开发和调试web站点的不二之选。Web developer toolbar包含了一系列工具，从cookie管理到CSS调试，从导航线到屏幕标尺，功能简直是多得说不完。 Web开发工具栏 下载地址：Firebug萤火虫 是Firefox上数一数二的好扩展，可作为web develop

4、er toolbar的补充工具。你可以用Firebug在线检查、监控、编辑网页上的HTML、CSS、JavaScript代码。他还提供一个脚本控制台，让JS编辑编的更简单。控制台对象包含了一大堆选项，允许你输出代码到控制台然后进行调试。Michael Sync提供一个更高级的操作指南，它可以知道你详尽地设置Firebug的选项。另外，Firebug上有一个带宽监视器，能让你清楚地看到某些代码占了多少带宽。 Firebug 下载地址：Modify HeadersModify headers是一个可以添加、修改和过滤HTTP请求头的工具。你可以用这个工具冒充成移动设备登陆网站，它甚至可以伪造一个A

5、jax请求。 Modify Headers 下载地址：http:/modifyheaders.mozdev.org/Poster你可以通过Poster扩展与Web服务或者其他web资源进行交互，它能让你发送HTTP请求、设置请求实体和内容格式。这可以让你检测Web交互的效果。 Poster下载地址：XRAY & MRIX光和核磁共振成像是可以应用在IE6+、Webkit和Mozilla为基础的浏览器上的bookmarklets（嘛叫Bookmarklets），包括Safari, Firefox, Camino和Mozilla. Xray 能帮你检测盒模型里的每一个元素，MRI可以测试和应用选择

6、器。 XRay下载地址： MRI下载地址：Firefox Accessibility ExtensionMozilla/Firefox无障碍扩展让残疾人士方便地浏览网页内容。开发人员可以用这个扩展检查他们的结构和样式的网页易读性。 Firefox Accessibility Extension下载地址：http:/firefox.cita.uiuc.edu/IE Developer Toolbar微软的英特网探索者开发工具条是IE上最好的DOM检查和CSS调试工具。由于IE具有高市场占有率而又在整个渲染模型上充满缺陷（比如臭名昭著的hasLayout边距重叠BUG），调试IE是web开发必不可

7、少的步骤没有这个工具条，IE的调试将会成为一场噩梦。虽然IE Developer Toolbar要比Firebug稍微弱智一点，不过他至少能帮你驯服IE这头怪兽。 IE Developer Toolbar下载地址：Web Accessibility ToolbarThe Web Accessibility Toolbar（ href= The Web Accessibility Toolbar下载地址:http:/www.visionaustralia.org.au/ais/toolbar/Visual Web Developer Express EditionIE开发工具栏木有JavaScr

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

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

10、a 开发控制台(Opera Developer Console)和Dom快照工具(DOM Snapshot)。从截图来看，他们都很有前途。这个工具算是Opera 9以上版本用的bookmarklets。不过我没能让他们在Opera 9.10上成功运作。 Opera开发工具下载地址：Opera Error Console错误控制台是Opera的一个内置功能，可以在工具-高级-错误控制台中激活这个它。它能弹窗显示当前网页上的错误或者警告信息，或者你可以过滤某种类型的信息，比如HTML、CSS、XML或者Javascript警告。你可以在opera网站找到错误控制台的详细教程。Safari Debu

11、g MenuSafari的debug能力很弱，但至少显示一个Javascript控制台能让Javascript调试变得简单点儿（这与Firebug和Opera错误控制台类似）。在Apple网站的开发部门，有一个常见问题文档说明如何启用隐藏的调试菜单。 在Mac OS X下，打开一个终端然后输入：defaults write com.apple.Safari IncludeDebugMenu 1在windows下，用文本编辑器打开Preferences.plist，这个文件的位置往往是C:Documents and SettingsUSERNAMEApplication DataApple Co

12、mputerSafariPreferences.plist，在文件最后添加： IncludeDebugMenu 在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在windo

13、ws中，打开Documents and Settings*你的用户名*Application DataApple ComputerSafariWebKitPreferences.plist，添加以下内容：WebKitDeveloperExtras然后退出Safari并重新打开，你将在菜单中看到一个“检查元素”选项，就是它了！*知识扩充：嘛叫bookmarklets?具体说来，俺也不大清楚，新名词啊？在这儿找到一个解释：所謂的Bookmarklet，簡單的說，就是一個內含簡單 JavaScript程式碼的書籤。使用的方法和書籤一樣，不同的地方是：書籤是用來記錄瀏覽的位置，而bookmarklet則是記錄某些程序或是方法。 另一方面，bookmarklet在本質上可說是將JavaScript語言類比為一通訊協定(protocol)，就像http或是ftp一樣，並需要透過瀏覽器來進行解譯，因此，bookmarklet必需依靠瀏覽器才能發揮功用。