15、利用开发者工具调试和检查网页

利用开发者工具调试和检查网页

1. 标记检查基础

在网页开发中，开发者工具的 DOM 资源管理器是检查网页标记的重要工具。不过，当当前页面通过脚本或 Ajax 调用对自身标记进行更改时，这些更改不会自动反映在 DOM 资源管理器中。若要加载这些更改，可点击“刷新”按钮。相反，在 DOM 资源管理器中所做的更改会立即应用到当前页面。所以，开发者若想编辑最新版本的标记，应在 DOM 资源管理器中进行更改之前先点击“刷新”按钮。

1.1 属性窗格

DOM 资源管理器允许内联编辑属性值，但不允许添加、删除或重命名属性。而属性窗格则可对 DOM 资源管理器中当前选定的元素执行这些操作。在属性窗格中，当前元素类型显示在顶部，旁边有用于添加和删除属性的 UI 元素。当前元素的每个属性都显示在列表框中，点击属性名称，可通过输入或从下拉列表中选择来更改属性名称。在“值”列中编辑相应条目，即可更改与命名属性关联的值。对属性所做的更改会立即反映在当前文档中。

1.2 查找、视图和大纲菜单

在大型页面上仅使用 DOM 资源管理器定位特定元素可能会很困难，查找、视图和大纲工具可帮助减轻这一负担。
- 查找菜单 ：只有一个条目“通过点击选择元素”（快捷键：Ctrl + B）。激活此命令后，在当前网页中点击任何元素，即可导航到 HTML 选项卡的 DOM 资源管理器中该元素的定义位置。
- 视图菜单 ：提供有关页面元素上下文的详细信息。其中包括用于报告的命令，如将类、ID、链接路径、制表符索引和访问键信息覆盖到元素上，还能显示页面标记在多种上下文中的情况。