《jQuery与JavaScript入门经典》——2.2　调试HTML元素

调试HTML元素有时候很困难。浏览器渲染HTML文档时，简单的语法错误都可能导致严重的问题。另外，HTML元素的有些属性不影响网页的外观，但会影响网页的行为。

HTML检查器（Inspector）和DOM编辑器可帮助您找出并修复HTML代码中的问题。下面通过一些简单的示例演示如何使用这些工具。

2.2.1 查看HTML元素
HTML检查器让您能够查看浏览器分析的每个HTML元素，这让您能够从浏览器的角度审视HTML，让语法错误更为明显。

图2.5显示了Firebug的HTML检查器。HTML检查器提供了一些很有用的功能。

在 DOM 改变时中断：如果启用了该选项，浏览器将在 DOM 元素被修改时中断JavaScript调试器。这有助于您实时地捕获发生的问题。
编辑：启用该选项后，树视图将切换到文本编辑器视图，让您能够直接在浏览器中编辑HTML代码。浏览器将根据您所做的修改调整渲染结果。虽然这不会修改项目中的代码，但使用这项功能尝试不同的修改要容易得多。将问题修复后，您可复制编辑器中的代码，再将其粘贴到项目文件中。
鼠标指向时呈高亮显示：将鼠标指向DOM树中的HTML代码时，浏览器中的相应元素将呈高亮显示。这是我最喜欢的HTML检查器功能之一，因为它提供了很好的视觉线索，让我知道DOM树节点与渲染的网页元素之间的关系。在图2.5中，我将鼠标指向了< h1 >元素，而网页中的标题呈高亮显示。

注意：将鼠标指向DOM树中的元素时，该元素将在网页中呈高亮显示：HTML元素的内容为淡蓝色、内边距为紫色、外边距为黄色。

使用HTML检查器调试HTML

下面使用程序清单 2.2 所示的代码来演示如何使用 HTML 检查器。这是一个基本的HTML文档，包含一个电影列表和一个标题，并要以斜体方式显示标题中的Favorite。然而，从图2.6所示的渲染结果可知显然存在一些问题：所有内容都为斜体，而第一个列表项没有项目符号。这些问题都是由两个字符导致的。

程序清单2.2 一个非常简单的HTML文档，其中存在一些HTML语法错误，如图2.6所示

请使用HTML检查器按如下步骤找出并修复HTML语法错误。

单击Firebug中的标签HTML，再依次展开标签< html >、< body >和，如图2.7所示。注意到在标签下，唯一的元素是另一个标签。这不对，因此回到Aptana并查看第7行的标签 。注意到结束标签缺少/。
将第二个标签改为结束标签，再保存文档。
在浏览器中刷新网页，注意到现在只有单词Favorite为斜体了，但第一个列表项还是没有列表符号，如图2.8所示。
在HTML检查器中，依次展开标签< html >、< body >、< ul >和< ll >，如图2.9所示。在元素< ul >下，包含的不是4个< li >元素，而是一个< ll >元素，其中又包含< li >元素。本书还未介绍HTML标签，但如果您熟悉HTML列表，就知道ll不是合法的HTML标签，它应为< li >。