ie developer tools

1. 简介:

    Internet Explorer 开发人员工具（Internet Explorer Developer Tools，曾叫做Internet Explorer Developer Toolbar）是Internet Explorer的帮助网页设计与调试的一个组件。在Internet Explorer 6和Internet Explorer 7中，它作为一种工具栏被引进。Internet Explorer 8和Internet Explorer 9则内置此组件。它允许验证CSS和HTML，在不同分辨率下预览页面布局，还提供一个（以像素为单位的）标尺用于辅助元素的定位。它允许查看整个页面的源代码，具有语法高亮便于导航，或者选择其中元素，也可以查看DOM源和应用于该元素的CSS选择器。它同样允许查看单个元素的属性和样式，也可以跟踪元素的样式至它的声明处。

这个工具包括一个在窗体底部的可开关面板。该面板展示了网页的结构；并且为每一个结构，展示其属性和样式。它通过一个菜单的层次结构展示它的特性，也包括用以快速访问一些特性—如清空浏览器缓存的工具栏按钮，和允许通过在已渲染的页面中点击来选择元素，而不是仅仅通过DOM树的可视化显示来导航。

2. 表现:

 IE6、IE7下(点击菜单栏的打开,只有HTML代码,且没有颜色分辨的原始代码)

IE8下(按F12打来,没有网络请求,没有控制台,适用于前端开卡人员)

IE9下(按F12打来,win7及以上版本可用)

3. IE8下developer tools功能介绍:

1>文件菜单

全部撤销:

以前在开发人员工具中进行的操作全部取消，并且刷新页面和DOM结构。

自定义 Internet Explorer 视图源：

自定义查看源代码的编辑器。

退出：退出

2>查找

和点击图中的那个鼠标ICO按钮效果一样。最最常用的功能。也是一个奇偶开关。打开时，用鼠标点击页面上的元素时，就会选中改元素，并且列出改元素的DOM结构、CSS样式等信息。

如下图所示:

• 样式

      

    左边的区域显示了此超链接元素的DOM信息。可以明确地看出它的父元素、子元素以及兄弟元素。 右面的区域显示了改元素样式信   

    息。其中被线划掉的样式，表示该样式因为优先级不够高，已经不再起作用了。调试的时候，前面的勾可以钩掉的，钩掉的时候表示

    强行删除此样式。而且，每个样式的属性，用鼠标点击后都可以立即修改。从而即时的看到修改后的页面效果，非常方便。  

• 跟踪样式(样式的另一种显示,功能和样式一样)

    

• 布局

     

     显示选中元素的盒装模型信息：内边距,边框,外边距,offsetTop当前对象到其上级层顶部的距离.

     坐标：当前鼠标所在的位置。

• 属性

     

 

     查看所选元素的属性值,也可以对其值进行修改,亦可对属性进行增加和删除操作。

3>禁用

• 脚本    

     会禁止使用页面的JavaScript脚本。为什么要禁用呢？为了测试页面的健壮性。有些对页面设计要求比较高的客户会

     问：“如果客户禁用了脚本，这个页面还能不能使用呢？”这个功能就是用来测试这些客户的变态需求的。    

• 弹出窗口阻止程序  

     弹出窗口的过滤器。用来测试那种"怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口。"

• CSS

     测试页面在无CSS时的状态,这个也是检验页面健壮性和可访问性的重要测试。

 

4>查看

• 类和ID信息

    页面使用红色色块显示出class名称和id名称。

• 链接路径

     页面使用红色色块显示出超链接和链接地址。  

• 链接报告

     使用链接报告功能，开发人员工具会帮你生成一份此页面的链接报表。包含链接数量、链接地址、是否新窗口打开等

    信息 。

      

• 选项卡索引

     高亮显示出所有包含tabindex属性的元素。tabindex属性的设置，可以改变网页元素获得焦点的顺序。    

• 访问键

     高亮显示所有包含“accesskey属性”的元素。设置accesskey属性，可以设定元素获得焦点的快捷键。    

• 源文件

      

• 带有样式的元素源：

     生成一份包含选中元素样式、HTML代码，网页级别信息的源文件。 必须先选中一个元素，此命令才有效。而且生成

     的源文件也只与选中元素有关。

• DOM(元素)

     快捷键是Ctrl+T。生成一份源文件。此源文件只包含选中元素的DOM结构信息。

     和firebug的查看元素差不多。

• DOM(页) 

     生成的源码并不仅仅是DOM信息，也包含CSS和脚本信息等。这个功能和查看源码是一回事,就是排了下格式而已。

• 原始状态

     其实就是“查看网页源码”。

5>轮廓

• 表单元格

     把form表的各个单元格用桔色线框出来。

• 表

     把form表单用桔色线框出来。

• DIV 元素

     把页面中的所有div元素用绿色线框出来。

• 图像

     把页面中的所有img元素用紫色线框出来。 

• 任何元素

     可以自定义任何标签和他们要用什么颜色的线框出来(只对当前页面有效)。

     

• 定位对象      

     相对：会用绿色线框出来，所有具有position:relative样式的元素。

     绝对：会用黑色线框出来，所有具有position:absolute样式的元素。 

     固定：会用蓝色线框出来，所有具有position:static样式的元素。

     浮动：会用黄色线框出来，所有具有float样式的元素。

• 清除轮廓

     清除所有轮廓。

      

6>图像     

 

• 禁用图像

     禁用页面中的所有图片(包括元素的背景图片)。   

     

• 显示图像尺寸(如上图所示)
• 显示图像文件大小(如上图所示)
• 显示图像路径(如上图所示)
• 查看Alt文本(如上图所示)
• 查看图像报告

    

     如上图：开发者工具会生成一个图像报表页面,包括每个图片的非常详尽的信息(路径,实际尺寸,调整后的尺寸,大小,alt,title...)。 

7>缓存 

• 始终从服务器中刷新(禁止使用浏览器缓存)      

• 清除浏览器缓存

• 清除此域的浏览器缓存

• 禁用Cookie      

• 清除会话Cookie

• 清除域的Cookie

• 查看Cookie信息(这个信息是看不到的)

8>工具

• 重新调整大小

     可以快速的将浏览器窗口调整到相关的尺寸。这样，测试网页分辨率兼容性的时候就方便多了。 

• 显示标尺  

                                                              

        

     一个简单的标尺工具。使用它可以度量长度、距离等信息。线的颜色是可以换的。也可以创建多个标尺。如果太细微

     的地方，可以使用放大镜(Ctrl+m)功能,删除用delete键。

• 显示颜色选取器     

     

9>验证(这一项我的ie8和ie6都不起作用)

验证页面的HTML代码。会将本页面发送到w3c的html验证工具，并得到验证报表。

验证页面的CSS代码。会将本页面发送到w3c的css验证工具，并得到验证报表

验证页面的源文件代码。会将本页面发送到feedvalidator.org验证工具，并得到验证报表。

验证页面的链接。会将本页面发送到w3c的验证工具，并得到验证报表。

打开w3c的html验证工具，对本地的页面进行验证。

打开w3c的CSS验证工具，对本地的页面进行验证。 

验证页面的WCAG(Web Content Accessibility Report-页面的可访问性)。会将本页面发送到contentquality.com验证工具，并得到验证报表。

验证页面的508 Standards。会将本页面发送到contentquality.com验证工具，并得到验证报表。

同时验证对页面进行多个规范的验证。

10>浏览器模式

就是让用户选择当前页面用何种IE版本去渲染。

这个工具主要用来测试页面多浏览器兼容性。

11>文本模式

"文本模式":渲染页面的3种模式诡异模式（Quirks mode，也有翻译为兼容模式、怪异模式的），标准模式（Standards mode），和几乎标准模式（Almost standards mode）。

页面的不同渲染模式，将直接影响页面的最终呈现效果，也就是说，一个页面如果在这种模式下显示完美，但是在另外一种模式下可能就显示的一塌糊涂。而决定页面模式的是页面的!DOCTYPE属性。

12>JavaScript脚本调试

控制台：

在控制台会显示脚本调试中的一些信息，例如错误信息、警告信息一类的。 恩，其实也可以当成是一个微型JavaScript运行环境。你可以在这里直接键入脚本并运行。如果一行不够的话，可以切换到多行模式。输入完毕后，点击“运行脚本”，就可以看到运行结果了。如下图:

断点：

是一个显示你设定的所有断点的列表。方便你统一管理：统一删除、统一使用或者统一禁用。

 

局部变量：

可以详细的显示各个变量的所有方法、事件和属性。

 

监视：

在这里你可以添加变量，他会显示此变量的所有方法、事件和属性。可以添加多个。整体来说和局部变量视图差不多，只是可以更灵活的显示你需要的。 

 

调用堆栈：

可以直观地显示函数调用堆栈情况，以及现在执行到哪个函数的情况。对于理顺脚本的运行顺序和嵌套很有帮助。 

 

探查器(只针对JavaScript脚本)：

可以清晰的展现出各个函数的执行所用时间。从而，方便你分析出"为啥我的页面那么慢呢？"的原因。

使用方法:先点击【开始配置文件】按钮，然后运行脚本或者刷新页面。等脚本执行完了，或者页面刷新完毕后点击【停止配置文件】按钮，就会生成探查报告了。

它提供两种视图，一种是“函数”，另一种是“调用树”，如下图所示：

 

 

http://wenku.baidu.com/view/89972e27ccbff121dd368330.html