推荐：15个有用的浏览器内的web开发工具

23顶
2踩

Firebug

Firebug 不用介绍了吧，大名鼎鼎的强大的Mozilla Firef 浏览器 HTML/CSS/DOM/JavaScript调试工具。可以点击这里查看JavaEye新闻以前对Firebug的报道：here

Web Developer

网页调试的辅助工具：Web Developer ！它是运行在FF（指Firefox浏览器下同）环境中的插件，是目前公认为最为优秀的网页调试工具之一。Web Developer作为FF的插件存在，主要功能表现在几个重要的方面：对页面中的文本、图像、媒体文件进行控制，对网页所应用的CSS文件的id与class辅助查看，表格辅助查看，可以实现修改CSS文件实时显示出得到的页面效果等等。

YSlow

YSlow :YSlow 是由Yahoo 所发布的Firefox 扩展，其主要功能是依据高性能网站的标准来分析你的网页，并告诉你它慢的原因。这样，你便可以据此作出相应改进。

Internet Explorer Web Developer Toolbar

微软发布的IE的网页分析工具: Internet Explorer Web Developer Toolbar.

微软官方列出的Internet Explorer Developer Toolbar的主要功能如下：
    * 查看和修改页面中的DOM对象
    * 通过不同的形式定位和选择页面中的元素
    * 开关指定的IE设置项
    * 查看HTML元素的class、ID、链接的路径、tab index和access keys等
    * 高亮显示表格、单元格、图像和指定的标签
    * 校验HTML、CSS、WAI和RSS等
    * 查看图片尺寸、文件体积、路径信息以及ALT文本等
    * 以指定的分辨率查看网页
    * 删除指定域名的cookies和缓存
    * 可精确量度页面对象尺寸的标尺
    * 查找样式规则并修改元素的样式值
    * 以格式化和高亮的形式显示HTML和CSS代码

Fiddler Web Debugger

HTTP抓包工具有很多，比如 HTTP Debugger Pro, EffeTech HTTP Sniffer，但是都不是免费的。推荐免费的HTTP抓包分析工具：Fiddler 可以帮助你直接追踪HTTP包和内容，帮助你测试调整架构。

DebugBar

DebugBar IE浏览器的CSS调试工具DebugBar，详情查看JavaEye新闻以前报道过的：DebugBar.

Jean-Fabrice Rabaute目标就是在IE浏览器上面构建出来一个可以媲美FireFox浏览器上面的FireBug的工具，他把这个可以调试CSS，JS的工具集成为DebugBar项目。

HttpWatch

HttpWatch 强大的网页数据分析工具。集成在Internet Explorer浏览器中。只需要选择相应的网站，软件就可以对网站与IE之间的需求回复的通讯情况进行分析并在同一界面显示其相应日志记录。每一个 HTTP记录都可以详细的分析其 Cookies、消息头、字符查询等信息。支持HTTPS及分析报告输出为XML、CSV等格式。

Live HTTP Headers

Web黑客工具箱之：Live HTTP Headers a Firefox 扩展。当我们测试Web应用程序的安全性的时候，经常需要对HTTP流量进行分析和动态修改。此外，取得对Web 应用程序流出和流入的数据的控制权不仅对Web 应用程序安全缺陷的发现和漏洞的利用等安全测试任务具有很大的帮助，而且还有利于常规的Web 应用程序测试。LiveHttpHeaders，有了这个Firefox扩展，我们不必架设代理服务器就可以方便地分析和操纵HTTP流量。

Web Accessibility Toolbar

Web Accessibility Toolbar 免费的IE和Opera扩展。Web Accessibility Toolbar 是一款用于高级用户或者网络开发者的帮助其检查结构,组成并且提供任何给定网页可利用功能的工具.该软件作为 IE或Opera 浏览器的一个工具栏安装,提供若干个用于检查样式表,表格,框架,图像和其它网页元素的综合性工具,以及广泛的多样化测试和被其它网站提供的功能,包括链接检查, HTML 确认,页面下载速度,颜色模拟,页面分辩率以及更多方面的功能.是一款适用于网络开发者的非常好的工具箱.

Fangs

Fangs 是一个处于browser内的工具，支持Firefox，能够在浏览网页的时候模拟屏幕阅读器所“看”到的内容。这个工具很有用，能够迅速分析结构话你的网页内容，让视觉不好的人更容易理解和使用，而不需要强制你学习使用屏幕阅读器比如 JAWS 或者 Windows Eyes.

Venkman JavaScript Debugger

Venkman 是一个代码名称，用于Mozilla内部使用的JavaScript调试环境。为啥叫做Venkman，按照网上解释的，Javascript所出的bug经常神出鬼没，象鬼一样很难逮住。而Venkman是著名的打鬼专家，跟钟馗一个意思。这个Firefox工具很牛的，实时查看变量的值，设置断点（可编程，很强大），动态修改变量的值，它自己还有一套命令可以直接调用页面上的对象等等。

ColorZilla

ColorZilla 是一个异常简单，非常有用的Firefox扩展。拥有高级吸管、取色器、页面缩放和其他色彩应用功能。利用 ColorZilla 您可以从浏览器中的任一点读取色彩值，快速调节颜色并粘贴到其他应用程序。您可以缩放正在查看的页面或测量页面任意两点之间的距离。内建的调色板浏览器允许您从预定义的颜色集中选择颜色或将最常用颜色保存到自定义调色板。DOM 侦测功能让您可以快速、容易地获得关于 DOM 元素的各种信息。还有更多功能……

FireShot

FireShot 支持Firefox和IE。Fireshot来源于截图软件Screenshot Studio的开发商，是一个Firefox扩展或者说是Firefox版的Screenshot Studio（一款很强大的且与众不同的截图软件），用于创建网页截图。重要的是，Fireshot与Screenshot Studio不同，它是免费使用的。如果你仅需要网页截图和简单的编辑，Fireshot就是最好的选择。FireShot截图可以保存到磁盘，格式可以为PNG、JPEG和BMP，也可以保存在粘贴板中，或者使用邮件发送给他人。

Web Inspector

Web Inspector 是开源浏览器Webkit的一部分，Web Inspector是Safari上最强大的调试器之一。支持Elements和Resources外，增加了令人振奋的Scripts调试和Profiles功能，以及一个很上流的功能Databases(一个用来调试HTML5的Database storage)。建议阅读：safari Web Inspector 更新了