F12开发工具

IE调试网页之二：F12开发人员工具入门(Windows)F12开发人员工具的菜单和按钮提供了可帮助你在该工具套件中导航的页面和可视化工具。在这些工具中，你可以创建包含文档中所有链接的报告列表、更改文档模式或以可视方式绘制页面上的特定元素的轮廓。网页工具主菜单下有许多工具和选项。F12工具套件中的许多工具对网页或浏览器自身进行操作，或提供方法来获取各种代码视图的选项和功能。下表概述了这些工具提供的菜单和选项。“文件”菜单菜单项描述全部撤消重置对WindowsInternetExplorer的当前实例的所有更改（如属性值）并刷新网页。自定义InternetExplorer查看源文件为你提供一个菜单，该菜单具有用于设置“查看源文件”查看器的以下选项：默认查看器：使用具有代码格式设置功能的内置查看器。记事本：使用Windows记事本显示源。其他：让你可以浏览并指定计算机上安装的其他编辑器或查看器应用程序。联机帮助(F1)提供到该文档的链接。退出(F12)关闭F12工具。“查找”菜单“查找”菜单只有“单击选择元素”这一个菜单项。你可以从菜单项启用该功能，方法是单击“单击选择元素”按钮或按Ctrl+B。通过启用此功能，你可以通过在网页上单击元素来选择页面上的元素。在网页上单击元素后，会在该元素周围绘制一个边框。如果“HTML”选项卡打开，左窗格将滚动到选定的元素，并突出显示该元素。属性窗格（右侧窗格）会根据你选择的当前属性类型（样式、跟踪样式、布局或特性）显示选定元素的属性。如果“HTML”选项卡当前没有打开，使用“单击选择元素”会选择该元素，并自动将焦点切换回“HTML”选项卡。在你单击某个元素后，“单击选择元素”才会启用。“禁用”菜单此菜单可帮助你测试当用户禁用其浏览器中的特定功能时，会在你的网站上获得怎样的用户体验。通过使用此菜单，你可以打开或关闭这些功能。菜单项描述脚本禁用网页上的所有脚本。选定后，会设置该命令并且页面会刷新。如果“Internet安全性”的“保护模式”设置为“启用”，则此命令不可用。若要使用此命令，请在“Internet选项”中的“安全”选项卡上，清除“启用保护模式”。弹出窗口阻止程序禁用所有弹出窗口阻止程序以便在该网站上允许弹出窗口。CSS在网页上禁用所有级联样式表(CSS)。选定后，会设置该命令并且页面会刷新为关闭CSS。如果刷新网页，或者开始调试刷新网页的脚本，将重新启用CSS。“查看”菜单此菜单使你不用首先在HTML树或源文件中找到元素，就可以查看页面上元素的相关信息。菜单项描述类和ID信息(Ctrl+I)显示网页上所有HTML元素的ID值。在相应的元素中，信息会作为覆盖显示在网页上。双击覆盖可突出显示信息。按Ctrl+C即可复制。链接路径显示网页上所有链接的链接路径。此信息会作为文本覆盖显示在网页元素上。双击覆盖可突出显示信息。按Ctrl+C即可复制。链接报告生成位于该网页上的所有链接的列表并在新的InternetExplorer实例中报告此列表。这样，无需浏览整个HTML源文件，就可以轻松方便地检查所有链接。选项卡索引对于定义其tabindex属性的元素，将选项卡索引显示为网页上覆盖的数量。访问键对于网页上定义其accesskey属性的元素，将访问键显示为覆盖。源查看菜单的子菜单，描述显示在下表中。源子菜单项描述带有样式的元素源仅在新窗口中显示选定元素的HTML源及其内容，以及适用于它的CSS。这有助于只关注选定元素的源文件。必须首先使用“HTML”选项卡视图选择HTML树的主体内的某个HTML元素，然后才可以执行此命令。若要选择某个元素，可使用“单击选择元素”命令，或在HTML树中单击某个元素。DOM（元素）在新窗口中只显示所选元素的HTML元素及其内容。必须首先使用“HTML”选项卡视图选择HTML元素，然后才可以执行此命令。若要选择某个元素，请使用“单击选择元素”命令。DOM（页面）在新窗口中显示全部HTML源，从而显示嵌套的元素。此源文件显示页面的文档对象模型(DOM)结构，包括使用由InternetExplorer表示的脚本动态写入DOM中的源文件。原始在新窗口中显示原始HTML源。“图像”菜单此菜单提供的命令通过帮助你识别元素的大小和位置，可帮助你了解和调试页面布局。它还能帮助你通过基于元素类型的彩色编码直观地标识特定类型的所有元素。菜单项描述禁用图像关闭网页上所有图像的呈现。此命令会使网页刷新但不显示任何图像，并且还会禁用“显示图像文件大小”命令。显示图像尺寸对于网页上的所有图像，将图像尺寸显示为文本覆盖。显示图像文件大小对于网页上的所有图像，将图像文件大小显示为文本覆盖。文件大小以字节为报告单位。如果使用“禁用图像”命令，则禁用该命令。显示图像路径对于网页上的所有图像，将图像绝对路径显示为覆盖。查看Alt文本显示定义其alt特性的所有图像的替代文本。对于未定义alt特性的图像，则不会显示覆盖。查看图像报告在当前网页上生成正文代码中定义的所有图像列表，并在新的InternetExplorer选项卡中显示此列表。此列表不包括使用CSS加载的图像（如background-image:url()）。“缓存”菜单菜单项描述始终从服务器中刷新强制InternetExplorer始终从服务器获取网页内容而不是使用缓存的内容。此命令会持续有效，直到你将其清除或InternetExplorer实例关闭。清除浏览器缓存...(Ctrl+R)删除浏览器缓存以及所有临时文件。清除此域的浏览器缓存...(Ctrl+B)只删除属于当前域的浏览器缓存和所有临时文件禁用Cookie禁止从此InternetExplorer实例使用所有Cookie。此命令会持续有效，直到你将其清除或InternetExplorer实例关闭。清除会话Cookie删除此浏览器会话期间获取的所有Cookie。清除域的Cookie删除当前域中的所有Cookie。查看Cookie信息生成InternetExplorer中存储的所有Cookie列表并在新的InternetExplorer实例中报告此列表。请参阅有关如何使用Cookie的cookieproperty参考。“工具”菜单此菜单提供了各种能帮助你完成常见任务的工具，如使用不同的分辨率测试网站、更改用户代理(User-Agent)头信息、测量页面面积和捕获页面上某一点的具体颜色。菜单项描述调整大小提供一个子菜单（其中提供了某些预先定义的屏幕大小）和一个用于自定义屏幕大小的选项。选定某个预定义屏幕大小后，InternetExplorer窗口将会立即重新调整为选定的尺寸。该子菜单提供四个预设大小（具有快捷键）和一个自定义设置。800x600Ctrl+Shift+11024x768Ctrl+Shift+21280x768Ctrl+Shift+31280x1024Ctrl+Shift+4自定义（无快捷键）自定义设置会打开一个对话框，你可以在其中输入自己要测试的屏幕大小。自定义条目在你关闭浏览器后仍然存在，以便你可以在以后的测试会话中再次使用它们。更改用户代理(User-Agent)头信息让你可以更改在请求网页时发送到网站的用户代理(User-Agent)头信息。有一组预设的用户代理(User-Agent)头信息和一个自定义选项。自定义选项会显示一个对话框，可在其中输入自己的字符串。保存自定义项后，它们会出现在“更改用户代理(User-Agent)头信息”子菜单中。刷新网页可使更改显示出来。请注意，更改文档模式会覆盖自定义的用户代理设置。导航时清除项当你在调试会话中导航到新网页时，使你可以清除或保持“控制台”消息和“网络”选项卡日志。默认情况下，当你离开某个页面时，InternetExplorer会清除所有控制台消息和网络选项卡捕获日志。显示标尺(Ctrl+L)允许你测量屏幕上的任意对象。“标尺”对话框打开时会显示选项和工具的使用提示。支持多种颜色和多个标尺。为了精确性，还提供了一个放大镜。按CTRL+M可打开或关闭放大镜。标尺相对于屏幕上点的位置显示标尺每一端的坐标(x，y)，而长度以像素为单位显示在标尺的中间。当你将光标移到标尺上时，测量值还会显示在“标尺”对话框的底部。可以对标尺进行移动、调整大小和调整角度。若要删除某个标尺，请选择它并按Delete键。完成后，单击右上角的X按钮可关闭该对话框。关闭该对话框将隐藏所有标尺。打开“标尺”对话框可以显示它们。显示颜色选取器(Ctrl+K)显示颜色选取器工具，以从页面上的任何对象采集颜色样本。“颜色选取器”对话框显示选取器所在的颜色样本。颜色选取器还会显示颜色的RGB和HEX值。若要查看网页上使用的颜色值，请使用取色器光标单击感兴趣的颜色。单击“复制并关闭”可将该值得到剪贴板，以在你的网页中使用。单击X按钮或此菜单上的“隐藏颜色选取器”可关闭对话框。轮廓元素通过使标识元素的大小和位置变得更加轻松，帮助你了解和调试页面布局。你可以设置一种颜色来标识特定元素类型的所有元素。可使用CSS选择器语法在网页上指定元素。例如，要突出显示所有段落，请在选择器字段中使用p，然后设置一种颜色。有关使用选择器的详细信息，请参阅了解CSS选择器。“验证”菜单此菜单使你可以使用Web上的验证服务验证当前网页或计算机上的文件。有一个对话框确认你要采取此操作；否则，请求将取消。菜单项描述HTML验证当前网页的HTML。验证的报告将显示在新窗口中。CSS验证当前网页的CSS。验证的报告将显示在新窗口中。源验证网页的真正简单的整合(RSS)源。验证的报告将显示在新窗口中。链接验证当前网页中的所有链接。验证的报告将显示在新窗口中。本地HTML...打开一个新窗口，该窗口有一个在计算机上选择要验证的HTML文件的选项。本地CSS...打开一个新窗口，该窗口有一个在本地计算机上选择要验证的CSS文件的选项。辅助功能允许访问以下辅助功能验证程序：WCAG清单W3C的Web内容辅助功能指南(WCAG)。它为创建可访问网页定义了指南。第508条清单美国政府关于创建可访问网页的辅助功能指南。多个验证你可以在一个请求中运行一个或多个验证。选择所需的验证，然后单击“确定”启动请求。你将只看到一个对话框，确认你要将此页面发送到另一个网站进行验证。每个选择都会在一个新选项卡中打开并包含产生的验证结果。“浏览器模式”菜单此命令使你能测试网页在面向运行其他版本InternetExplorer的用户时会如何操作。例如，如果你选择WindowsInternetExplorer7浏览器模式，则你的网页将基于该浏览器呈现，并且将无法访问只在新版本的InternetExplorer中提供的文档模式。菜单项描述InternetExplorer7InternetExplorer7浏览器模式。WindowsInternetExplorer8InternetExplorer8浏览器模式。WindowsInternetExplorer9InternetExplorer9浏览器模式。这会启用HTML5、CSS3和InternetExplorer9支持的其他标准。InternetExplorer9兼容性视图测试当用户选择“兼容性视图”选项时InternetExplorer9用户如何体验你的网页。“文档模式”菜单此命令使你可以测试其他版本的InternetExplorer会如何解析你的页面。对网页所做的更改会影响该页中的所有文档，包括iframe。菜单项描述Quirks模式(Alt+Q)该行为与呈现无文档类型或文档类型为Quirks时InternetExplorer的行为匹配。作用与InternetExplorer7或InternetExplorer8的Quirks模式相同。InternetExplorer7标准(Alt+7)该行为与呈现具有严格文档类型或未知文档类型时InternetExplorer7的行为匹配。InternetExplorer8标准(Alt+8)这是呈现具有严格文档类型或未知文档类型时In