F12开发工具.docx

/artwl/archive/2013/02/19/2917098.htmlIE调试网页之二：F12 开发人员工具入门 (Windows)　F12 开发人员工具的菜单和按钮提供了可帮助你在该工具套件中导航的页面和可视化工具。在这些工具中，你可以创建包含文档中所有链接的报告列表、更改文档模式或以可视方式绘制页面上的特定元素的轮廓。　网页工具　主菜单下有许多工具和选项。F12 工具套件中的许多工具对网页或浏览器自身进行操作，或提供方法来获取各种代码视图的选项和功能。下表概述了这些工具提供的菜单和选项。　“文件”菜单菜单项描述全部撤消重置对 Windows Internet Explorer 的当前实例的所有更改（如属性值）并刷新网页。自定义 Internet Explorer 查看源文件为你提供一个菜单，该菜单具有用于设置“查看源文件”查看器的以下选项：默认查看器：使用具有代码格式设置功能的内置查看器。记事本：使用 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?即可复制。链接报告生成位于该网页上的所有链接的列表并在新的 Internet Explorer 实例中报告此列表。这样，无需浏览整个 HTML 源文件，就可以轻松方便地检查所有链接。选项卡索引对于定义其?tabindex?属性的元素，将选项卡索引显示为网页上覆盖的数量。访问键对于网页上定义其?accesskey?属性的元素，将访问键显示为覆盖。源查看菜单的子菜单，描述显示在下表中。源子菜单项描述带有样式的元素源仅在新窗口中显示选定元素的 HTML 源及其内容，以及适用于它的 CSS。这有助于只关注选定元素的源文件。必须首先使用“HTML”选项卡视图选择 HTML 树的主体内的某个 HTML 元素，然后才可以执行此命令。若要选择某个元素，可使用“单击选择元素”命令，或在 HTML 树中单击某个元素。DOM（元素）在新窗口中只显示所选元素的 HTML 元素及其内容。必须首先使用“HTML”选项卡视图选择 HTML 元素，然后才可以执行此命令。若要选择某个元素，请使用“单击选择元素”命令。DOM（页面）在新窗口中显示全部 HTML 源，从而显示嵌套的元素。此源文件显示页面的文档对象模型 (DOM) 结构，包括使用由 Internet Explorer 表示的脚本动态写入 DOM 中的源文件。原始在新窗口中显示原始 HTML 源。　“图像”菜单　此菜单提供的命令通过帮助你识别元素的大小和位置，可帮助你了解和调试页面布局。它还能帮助你通过基于元素类型的彩色编码直观地标识特定类型的所有元素。菜单项描述禁用图像关闭网页上所有图像的呈现。此命令会使网页刷新但不显示任何图像，并且还会禁用“显示图像文件大小”命令。显示