本节书摘来自异步社区《jQuery与JavaScript入门经典》一书中的第2章，第2.2节，作者：【美】Brad Dayley著，更多章节内容可以访问云栖社区“异步社区”公众号查看
2.2 调试HTML元素
调试HTML元素有时候很困难。浏览器渲染HTML文档时，简单的语法错误都可能导致严重的问题。另外，HTML元素的有些属性不影响网页的外观，但会影响网页的行为。
HTML检查器（Inspector）和DOM编辑器可帮助您找出并修复HTML代码中的问题。下面通过一些简单的示例演示如何使用这些工具。
2.2.1 查看HTML元素
HTML检查器让您能够查看浏览器分析的每个HTML元素，这让您能够从浏览器的角度审视HTML，让语法错误更为明显。
图2.5显示了Firebug的HTML检查器。HTML检查器提供了一些很有用的功能。
- DOM树：这是一个非常简单的DOM树视图。您可单击+图标来展开DOM树的各个部分，还可单击-图标将DOM树的各个部分折叠起来。
- 在 DOM 改变时中断：如果启用了该选项，浏览器将在 DOM 元素被修改时中断JavaScript调试器。这有助于您实时地捕获发生的问题。
- 编辑：启用该选项后，树视图将切换到文本编辑器视图，让您能够直接在浏览器中编辑HTML代码。浏览器将根据您所做的修改调整渲染结果。虽然这不会修改项目中的代码，但使用这项功能尝试不同的修改要容易得多。将问题修复后，您可复制编辑器中的代码，再将其粘贴到项目文件中。
- 鼠标指向时呈高亮显示：将鼠标指向DOM树中的HTML代码时，浏览器中的相应元素将呈高亮显示。这是我最喜欢的HTML检查器功能之一，因为它提供了很好的视觉线索，让我知道DOM树节点与渲染的网页元素之间的关系。在图2.5中，我将鼠标指向了< h1 >元素，而网页中的标题呈高亮显示。
注意：将鼠标指向DOM树中的元素时，该元素将在网页中呈高亮显示：HTML元素的内容为淡蓝色、内边距为紫色、外边距为黄色。
- 面包条：面包条显示了节点层次结构—从根节点< html >到当前选择的节点。这让您能够轻松地导航，尤其是处于编辑视图时。
使用HTML检查器调试HTML
下面使用程序清单 2.2 所示的代码来演示如何使用 HTML 检查器。这是一个基本的HTML文档，包含一个电影列表和一个标题，并要以斜体方式显示标题中的Favorite。然而，从图2.6所示的渲染结果可知显然存在一些问题：所有内容都为斜体，而第一个列表项没有项目符号。这些问题都是由两个字符导致的。
程序清单2.2 一个非常简单的HTML文档，其中存在一些HTML语法错误，如图2.6所示
请使用HTML检查器按如下步骤找出并修复HTML语法错误。
- 在项目的文件夹hour02中，新建文件hour0202.html，在其中输入程序清单2.2所示的代码，再保存这个文档。现在您应该能够熟练地完成这个过程。
- 启动Firefox，并单击Firebug图标以启用Firebug。
- 在Firefox中输入下面的URL，网页将类似于图2.6所示。
- 单击Firebug中的标签HTML，再依次展开标签< html >、< body >和< i >，如图2.7所示。注意到在标签< i >下，唯一的元素是另一个标签< i >。这不对，因此回到Aptana并查看第7行的标签 < i >。注意到结束标签< i >缺少/。
- 将第二个< i >标签改为结束标签< /i >，再保存文档。
- 在浏览器中刷新网页，注意到现在只有单词Favorite为斜体了，但第一个列表项还是没有列表符号，如图2.8所示。
- 在HTML检查器中，依次展开标签< html >、< body >、< ul >和< ll >，如图2.9所示。在元素< ul >下，包含的不是4个< li >元素，而是一个< ll >元素，其中又包含< li >元素。本书还未介绍HTML标签，但如果您熟悉HTML列表，就知道ll不是合法的HTML标签，它应为< li >。
- 回到Aptana，将第9行的< ll >改为< li >并保存文档。
- 在浏览器中刷新网页，网页将正确地显示，如图2.10所示。
2.2.2 查看和编辑DOM
调试HTML时，另一个重要的工具是DOM检查器。DOM检查器功能极其强大，让您能够查看DOM中每个HTML元素的特性（attribute）、属性、函数、子节点、父节点等一切。信息是以树视图的方式显示的，让您能够展开和折叠各个编组。
可通过两种方式访问DOM检查器：单击Firebug中的DOM标签；查看HTML时单击HTML检查器中的DOM标签。
图2.11显示的是主DOM检查器。在主DOM检查器中，可访问有关浏览器环境的各种信息。例如，在图2.11中，展开了window对象的screen特性，这让您能够看到浏览器窗口的可用尺寸和实际尺寸。
通常，在HTML检查器中打开DOM检查器是更佳的选择，如图2.12所示。使用HTML检查器中的DOM选项卡时，只能看到当前选定的HTML元素的DOM。这减少了显示的信息量；另外，还可在浏览器中快速修改HTML元素的特性值，让调试和开发工作容易得多。
在DOM检查器中编辑HTML元素的值
例如，可按如下步骤修改前述示例中HTML元素的值。
- 在FireFox中显示文件hour0202.html，并启用Firebug。
- 单击Firebug中的标签HTML。
- 依次展开节点< html >、< body>和< ul>。
- 选择第一个< li>节点。
- 单击右边的DOM标签，如图2.12所示。
- 在DOM检查器中，向下滚动到节点firstChild并展开它，这是一个< TextNode>元素。
- 双击特性data右边的值，并按图2.12那样修改文本。注意到网页中渲染的HTML元素也变了。操纵HTML节点的可编辑特性就这么简单。
