昨天在公司加班，要用WTT完成Automation TestCase的实现，因为要不断对html的代码元素跟踪，在图形和html source 之间切换，不胜其繁，结果micosoft的dev 推荐了Internet Explorer Developer Toolbar(用之真的挺好用：）呵呵在网上搜了下，转载一篇相关查阅之。
about software
web开发的浏览器(工具)插件
1、PowerBand
PowerBand是一个IE的插件(同时也支持MyIE2/Maxthon)。提供了对HTML动态分析，跟踪，编辑的功能。能够方便快捷的分析HTML页面的结构，有助于网页设计人员/网站开发人员调试，分析晦涩的HTML代码。现在是2.1版，支持ASP.NET ViewState的解码，支持DebugView，类似于VC中的Watch，通过这个功能能够显示页面中元素对象的详细内容。同时，PowerBand也支持即时脚本交互功能。
2、HttpWatch
HttpWatch又是一个IE下的强劲插件，HttpWatch最主要的功能就是对通过浏览器进行网络通讯的数据进行监控和分析，当你在浏览器的地址栏上请求一个URL或者提交一份表单时，HttpWatch帮你分析http请求的head信息，访问页面的cookie信息，Get和Post 的详细数据包分析，Catch内容分析，QueryString分析。想知道GMail或者是任何一个AJAX网页时如何和服务器进行数据交互的吗？用这个插件就可以一览无余了
3、IE Developer Toolbar
第三个插件还是基于IE下的，不过这个可是微软发布的Web开发IE工具栏，实现的功能如下：
- 浏览和修改Web页的文档对象模型（DOM）。
- 通过多种技术方式定位、选定Web页上的特定元素。
- 禁止或激活IE设置。
- 查看HTML对象的类名、ID，以及类似链接路径、tab顺序、快捷键等细节。
- 描绘表格、单元格、图片或选定标签的轮廓。
- 显示图片象素、大小、路径、替代文字等。
- 即时重定义浏览器窗口大小到800x600或自定义大小。
- 清空浏览器缓存和cookie，被清除项可从所有对象或给定域中选择。
- 直接访问关联W3C规范参考、IE开发组blog或其他来源。
- 显示设计时标尺，帮助对齐对象。
4、ViewPage
ViewPage是MyIE2/Maxthon浏览器插件，这个插件不算是纯粹的开发辅助，它看起来更像是资源提取，可以方便的提取网页中的源代码，包括所有框架的源代码，提取图像、Flash、媒体文件、链接，我最欣赏的就是能方便的查看页面中包含的所有js文件源代码和所有css源代码。
5、Web Development with Mozilla Firefox
Firefox下的开发辅助工具和插件非常多，先说Firefox自带的吧。
- 查看源代码（查看-〉页面源代码），Firefox自带的查看源代码支持语法高亮显示，这个功能很独特
- 查看页面信息（工具-〉页面信息），这是基本功能了，不过有点简陋
- Javascript调试台，这是Firefox的一大特色，是IE所没有的功能
- DOM查看器，内置的DOM分析和查看工具，怀疑PowerBand和IE Developer Toolbar 都是模仿Firefox的这个做的
Firefox自带的开发辅助功能虽然已很丰富，但让我更加垂涎的是丰富的开发类插件
- 最著名的就是Web Developer了，这个插件几乎囊括了所有能实现的web开发辅助功能，微软的那个就像是模仿于它
- Aardvark是一个CSS debug插件
- Add & Edit Cookies，看名字就知道了，一个专门增加和修改Cookies的插件，相关的还有一个View Cookies是用来查看Cookies的插件
- Colorzilla可以捕获当前鼠标所指的页面坐标位置和颜色，以及DOM路径
- IE View and Opera View是两个专门在Firefox中用IE和Opera中打开一个页面的工具，方便你调试支持多浏览器的web
- MeasureIt是一个Firefox中画坐标和度量尺的小插件，用它测量HTML元素的宽高很是方便
- Live HTTP Headers是一个类似于HttpWatch功能一样的Firefox插件，用来查看HTTP Header、Cookie、MIME等信息，不过HttpWatch是收费的，这个确是免费的，推荐下载
Firefox下的开发类插件太多了，如果你感兴趣可以打开这个链接，这里面全是Developer Tools。还有这篇文章，非常详细的一步一步介绍了Mozilla Firefox的web开发工具，推荐阅读。
6\DHTML View Source:MICROSOFT INTERAL TOOL ;
DOWLOAD:https://files.cnblogs.com/liangqihui/msdhtmlsrcv.rar
DESCRIPT&USE:
This tool adds a menu option to IE's context menu, that when clicked will invoke notepad with the document.documentElement.outerHTML of the page at the time of the click. This is extremely useful for viewing what dhtml and scripts have caused the page to render. Easy to install and uninstall.
INSTALL:
Copy the 2 files (msdhtmlsrcv.htm, and msdhtmlsrcv.inf) to a directory on your computer. Right click the inf file and select 'install'. This will add a new option to the context menu of internet explorer. (Context menu is shown when you right-click a web page) The tool adds an entry to your add/remove programs under the control panel for easy removal.
6\DHTML View Source:MICROSOFT INTERAL TOOL ;
DOWLOAD:https://files.cnblogs.com/liangqihui/msdhtmlsrcv.rar
DESCRIPT&USE:
This tool adds a menu option to IE's context menu, that when clicked will invoke notepad with the document.documentElement.outerHTML of the page at the time of the click. This is extremely useful for viewing what dhtml and scripts have caused the page to render. Easy to install and uninstall.
INSTALL:
Copy the 2 files (msdhtmlsrcv.htm, and msdhtmlsrcv.inf) to a directory on your computer. Right click the inf file and select 'install'. This will add a new option to the context menu of internet explorer. (Context menu is shown when you right-click a web page) The tool adds an entry to your add/remove programs under the control panel for easy removal.