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