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

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