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