IE开发者人员工具使用说明

监视：
在“脚本调试”视图可以选择任意变量、代码段右键点击“添加监视”，将会在右边的“监视”视图显示你添 加的监视代码，当脚本运行到监视代码时，右边“监视”视图会显示对应代码的详细信息，如：值，类型等。
2016/4/5
18
局部变量：
“局部变量”视图显示了当前执行范围中可用的所有变量的名称、值和类型
开发人员工具就是为前端开发人员开发页面而设计的工具。
提供一系列的小工具，让你可以方便的查找、调试页面的BUG，包括 HTML代码、CSS代码和JavaScript代码。 同时，他也提供了一些虽然比较鸡肋，但是还能咂咂味的小工具，例 如取色、屏幕尺子等。
2016/4/5
1
如何打开 IE开发者工具？
1：在IE浏览器直接按 “F12”； 2：在IE浏览器菜单栏“工具”中选择“F12开发人员工具”。
现在我们根据菜单的顺序一一来介绍它吧。
2016/4/5
2
“文件”菜单
全部撤销：
撤销所有在开发人员工具中所做的操作，并且会重新刷新DOM树
2016/4/5
3
“文件”菜单
自定义IE查看源文件：
选择查看源文件的方式，可以用默认，记事本，及其它的文本编辑器
2016/4/5
4
“查找”菜单
单击选择元素：
选中后，用鼠标点击页面元素时，即可选中该元素，并且会列出该元素的DOM结果、CSS样式信息
2016/4/5
51
“浏览器”菜单
此命令使您能测试网页在面向运行其他版本 Internet Explorer 的用户时会如何操作。 例如，如果您选择 Windows Internet Explorer 7 浏览器模式，您的网页将基于该浏览 器呈现，并且不能访问只在更高版本 Internet Explorer 上提供的文档模式
36
“图像”菜单
显示图片尺寸：
选中后会显示所有图片的大小，不包含背景图像，单位是像素
2016/4/5
37
“图像”菜单
显示图像文件大小：
选中后会显示所有的图片的大小，单位字节，不包含背景图像
2016/4/5
38
“图像”菜单
显示图像路径：
选中后会显示所有的图片的路径，不包含背景图像
2016/4/5
2016/4/5
9
“CSS”选项卡中列出了该页面引用的所有CSS文件，包括直接写在页面的CSS样式，选择不同的样式文件， 下面会列出该CSS文件的完整样式信息
2016/4/5
10
“控制台”选项卡中上面列出了该页面的“日志信息”包括 JavaScript 错误、警告等信息
2016/4/5
11
“控制台”选项卡下面可以输入 JavaScript 进行执行
“工具”菜单
导航式清除项：
官方解释： 当您在调试会话中导航到新网页时，使您可以清除或保持“控制台”消息和“网络”选项卡日志。 默认情况下， 当您离开某个页面时，IE 会清除所有控制台消息和网络选项卡捕获日志 2016/4/5 46
“工具”菜单
显示、隐藏标尺：
个人认为是个比较鸡肋的功能，不解释 2016/4/5 47
错误时中断：在出现错误的位置暂停执行。 默认情况下此命令处于活动状态。 如果您不希望在这些错误点处 暂停执行，请单击此按钮停用此命令；然而，在所有情况下，在控制台中每出现一个错误都将显示一条错误消 息。 切换命令打开/关闭状态的键盘快捷方式： CTRL+SHIFT+E。
逐语句：执行下一行脚本后暂停，即使下一行位于新方法内。 键盘快捷方式： F11。 逐过程：继续执行至当前方法中的下一行脚本后暂停。 这在逐过程方法调用中极其有用。 键盘快捷方式： F10。 跳出：继续执行至调用当前方法的方法中的下一行脚本。 这在跳出循环和方法调用时极其有用。 键盘快捷方 式： SHIFT+F11。 2016/4/5 17
2016/4/5
28
“查看”菜单
选项卡索引：
选中后会显示所有包含 tabIndex 的元素 tabindex属性的设置，可以改变网页元素获得焦点的顺序
2016/4/5
29
“查看”菜单
访问键：
选中后会显示所有包含 accesskey的元素 accesskey属性的设置，可以设置元素获得焦点的快捷键
2016/4/5 52
菜单项 Internet Explorer 7 Internet Explorer 8 Internet Explorer 9 Internet Explorer 9 兼容性视图
2016/4/5
43
“工具”菜单
重新调整大小：
调整浏览器框口大小，便于测试不同窗口大小的页面兼容性
2016/4/5
44
“工具”菜单
更改用户代理字符串：
应该就是所谓的“User Agent” 标准格式为：浏览器标识 (操作系统标识; 加密等级标识; 浏览器语言) 渲染引擎标识 版本信息 详细参考： http://baike.baidu.com/view/3398471.htm 2016/4/5 45
“工具”菜单
显示、隐藏颜色选择器：
就是一个简单的取色器，不解释 2016/4/5 48
“工具”菜单
轮回元素：
通过使标识元素的大小和位置变得更加轻松，帮助您了解和调试页面布局。 您可以设置一种颜色来标识特定元 素类型的所有元素。 可使用 CSS 选择器语法在网页上指定元素。 例如，要突出显示所有段落，请在选择器字段 中使用 DIV，然后设置一种颜色 2016/4/5 49
2016/4/5
12
“脚本”选项卡中包含控制台、监视、局部变量、调用堆栈、断点等信息 下面介绍如果使用 脚本调试功能
2016/4/5
13
设置断点：
在脚本视图可以通过以下方式设置断点： 1：单击行号以插入或删除断点 2：右击一行代码并选择“插入断点” 3：将光标放在一行代码上，按下 F9 以插入或删除断点 无论调试程序是否启动，都可设置断点。 一旦设置断点后，断点图标 将出现在代码行号旁， 该行的代码将突出显示。 断点会使脚本在断点行前立即暂停执行，调试程序将突出显示要执 行的下一行。 调试期间，任何运行时错误都会导致调试程序在出错位置中断执行。 要防止在 错误时中断，请取消设置“错误时中断”切换按钮或按下 CTRL+SHIFT+E。 当调试程序暂停执 行时，浏览器将不响应任何用户输入 2016/4/5 14
2016/4/5
33
“查看”菜单
源文Βιβλιοθήκη Baidu：
DOM页：生成一份源文件，此源文件包含整个页面的DOM信息结构，除了格式貌似和源文件功能一样
2016/4/5
34
“查看”菜单
源文件：
原始状态：貌似就是查看源文件功能
2016/4/5
35
“图像”菜单
禁用图像：
选中后会禁用所有的图片元素，包括背景图像
2016/4/5
2016/4/5
5
“HTML”选项卡左边区域显示了该元素的DOM信息（父级、子级、兄弟元素）、CSS信息、控制台、脚本、 探测器、网络
“样式”视图显示了该元素的样式信息，标有横线的表示优先级不够高，不再起作用，样式前面的复选框， 去除选中时将会删除该元素的此样式，每个样式的属性值都可以直接修改且能立即看到效果
管理断点：
“断点”视图提供了所有断点的列表。 在此可找到所有断点的位置、及断点设置处的文件名 和行号。 要转到源代码中的断点位置，双击此列表中的断点。 要在不删除断点的情况下停用 断点，请清除断点旁边的复选框。 若要删除断点，请右击该断点，然后从快捷菜单选择“删 除”。 即使您通过导航离开当前站点，IE 也会在您关闭开发人员工具之前一直保留断点信息。
2016/4/5
22
“禁用”菜单
脚本：
选中后会禁止页面的脚本执行（JavaScript、VbScript …）
2016/4/5
23
“禁用”菜单
弹出窗口阻止程序：
没有使用过，据说是：用来测试哪种“怎么才能让浏览器或者安全软件不过滤掉我的弹出窗口。”
2016/4/5
24
“禁用”菜单
CSS：
选中后会禁止页面的 CSS 样式解析
2016/4/5
15
启动、停止调试：
点击此按钮可以启动、停止调试功能。
2016/4/5
16
功能键说明：
继续：继续运行脚本而不暂停，直到遇到另一断点或脚本错误。 键盘快捷方式： F5。 全部中断：在下一条脚本语句执行之前立即暂停执行。 单击按钮或按下 CTRL+SHIFT+B 以激活此命令，然后执 行希望调试的操作。
清除浏览器缓存... 删除浏览器缓存和所有临时文件。 清除此域的浏览 器缓存... 禁用 Cookie 清除会话 Cookie 清除域的 Cookie 查看 Cookie 信息 只删除属于当前域的浏览器缓存和所有临时文件。 禁用来自此 IE 实例的所有 Cookie。 此命令会持续有效，直以您将其清除或 IE实例关 闭。 删除此浏览器会话期间获得的所有 Cookie。 删除来自当前域的所有 Cookie。 生成 IE中存储的所有 Cookie 的列表，并在新 IE 实例中报告这个列表。
2016/4/5
6
“HTML”下“样式”视图和“跟踪样式”视图作用是一样的，只是显示方式不同
2016/4/5
7
“HTML”下“布局”视图显示选中元素盒子模型信息 “盒子模型”可参考 http://baike.baidu.com/view/2758739.htm 2016/4/5 8
“HTML”下“属性”视图显示选中元素的属性信息，并且可以增加、编辑、删除操作，且能立即看到效果
2016/4/5
25
“查看”菜单
类和ID信息：
选中后会同时显示出 Class 名称或者 ID 名称
2016/4/5
26
“查看”菜单
连接路径：
选中后会显示所有超链接地址
2016/4/5
27
“查看”菜单
连接报告：
点击后会生成一份此页面的链接报表，包含链接数量、链接地址、是否新窗口打开等信息，具体我也没使用过
“验证”菜单
此菜单使您可以使用 Web 上的验证服务验证当前网页或计算机上的文件。 有一个 对话框确认您要采取此操作；否则，请求将取消
2016/4/5
50
菜单项 HTML CSS 源 连接 本地HTML 本地CSS WCAG 清单 第508清单 多个验证
描述 验证当前网页的 HTML。 验证的报告将显示在新窗口中。 验证当前网页的 CSS。 验证的报告将显示在新窗口中。 验证网页的 真正简单的整合 (RSS) 源。 验证的报告将显示在新窗口中。 验证当前网页中的所有链接。 验证的报告将显示在新窗口中。 打开一个新窗口，该窗口有一个在计算机上选择要验证的 HTML 文件的选项。 打开一个新窗口，该窗口有一个在本地计算机上选择要验证的 CSS 文件的选项。 W3C 的 Web Content Accessibility Guidelines（Web 内容辅助功能指南，WCAG）。 它 为创建可访问网页定义了指南。 美国政府关于创建可访问网页的辅助功能指南。 您可以在一个请求中运行一个或多个验证。 选择所需的验证，然后单击“确定”启 动请求。 您将只看到一个对话框，确认您要将此页面发送到另一个网站进行验证。 每个选择都会在一个新选项卡中打开并包含产生的验证结果。
2016/4/5
30
“查看”菜单
2016/4/5
31
“查看”菜单
源文件：
带有样式的元素源：生成一份包含选中元素样式、HTML代码信息的源文件，必须先选中一个元素，此命令才有 效，而且生成的源文件也只与选中元素有关
2016/4/5
32
“查看”菜单
源文件：
DOM元素：生成一份只包含选中元素的DOM结构信息，必须先选中一个元素，此命令才有效，而且生成的源文 件也只与选中元素有关
2016/4/5
19
调用堆栈：
“调用堆栈”视图可以直观地显示函数调用堆栈情况，以及现在执行到哪个函数的情况。对于理顺脚本的运行 顺序和嵌套很有帮助
2016/4/5
20
“探查器”并非国产浏览器中的那些探测网页媒体资源功能，而是用来分析脚本执行效率的工具
2016/4/5
21
“网络”可以捕获页面请求及返回的数据，包括代码、图片、脚本、样式等等信息
39
“图像”菜单
显示图像Alt文本：
选中后会显示所有的图片的Alt文本
2016/4/5
40
“图像”菜单
显示图像报告：
点击后会生成一份此页面的图像报表，包含图片连接、尺寸大小、文件大小等信息，具体我也没使用过
2016/4/5
41
“缓存”菜单
2016/4/5
42
菜单项 始终从服务器中 刷新
描述 强制 IE 始终从服务器获取网页内容，而不是使用缓存的内容。 此命令会持续有效， 直到您将其清除或 IE 实例关闭。