本节书摘来自异步社区《21天学通HTML+CSS+JavaScript Web开发（第7版）》一书中的第2章，第2.3节，作者：【美】Laura Lemay（劳拉·莱梅） , Rafe Colburn（雷夫·科尔本） , Jennifer Kyrnin（珍妮弗·凯瑞恩）著，更多章节内容可以访问云栖社区“异步社区”公众号查看
2.3 使用Google Chrome 开发者工具
下载并安装Google Chrome后，启动它并访问http://getbootstrap.com/。Bootstrap是一个通用的网页框架，将在本书后面讨论。就当前而言，它很有用，因为这个网页的源代码易于理解。在Chrome中，选择菜单“更多工具”>“开发者工具”，这将打开开发者工具，如图2.4所示[1]。
有一个打开开发者工具的快捷键，在Windows中为Ctrl + Shift + I，在OS X中为Command + Option + I。您经常会用到开发者工具，因此绝对值得记住这个快捷键。
开发者工具是作为浏览器中的一个面板打开的，覆盖了网页的下半部分。如果您愿意，可单击右上角的按钮，将开发者工具与浏览器窗口分离。这让您能够在两个窗口中看到更多内容，但必须在它们之间切换。如果您愿意，还可以将开发者工具移到浏览器窗口右边，而不是让它位于底部。请将开发者工具放在您认为看起来最舒服的地方。
从Web面世起，浏览器就支持一种名为“查看源代码”的功能，它显示当前网页的HTML源代码。在Google Chrome中，要查看当前网页的源代码，可选择菜单“更多工具”> “查看源代码”。图2.5显示了http://getbootstrap.com/的源代码。
开发者工具是这种概念的扩展，但功能强大得多。开发者工具包含很多选项卡，默认显示的是选项卡Elements，其中包含的内容类似于网页的源代码。浏览器下载网页时，将其进行转换，让设置HTML格式并显示它的引擎能够明白。根据网页的有效性程度，这种转换所做的修改很少。Elements选项卡显示的是浏览器看到的HTML，而“查看源代码”显示的是浏览器下载的HTML，如果您比较“查看源代码”窗口和Elements选项卡中的内容，将发现它们有几个不同的地方，这佐证了我前面的说法。
现在暂时不要考虑这些HTML是做什么的，我马上就会详细介绍；当前的重点是开发者工具。如果您将鼠标指向Elements选项卡中的元素，相应的网页部分将呈高亮显示，让您知道网页各部分与HTML源代码的对应关系。如果您单击Elements选项卡中的元素，右边的窗格将更新以显示该元素的样式信息，等您开始使用级联样式表时，这种功能将很有帮助，因为它准确地指出了浏览器是如何解读样式的。
最后，开发者工具面板的右上角有三个按钮，其中最右边的那个用于将开发者工具窗口和浏览器窗口分离和合并，而最左边的那个按钮显示/隐藏第17章将开始介绍的JavaScript 控制台。另外，左上角还有两个按钮，其中左边的那个像放大镜，如果您单击它，再单击网页的内容，将在Elements选项卡中选中相应的HTML元素，在您需要审查网页上的特定元素时，这很有用。
练习2.1：使用审查器（Inspector）
这里有必要研究一下审查器的工作原理，看看如何使用开发者工具来查找Elements选项卡中与网页内容对应的HTML元素。如果您当前在浏览器中访问的不是http://getbootstrap.com/，请打开该网站，再打开Chrome开发者工具。您可能想尝试前面的“提示”所说的键盘快捷键。前面说过，您将经常这样做。
打开开发者工具后，单击左上角的审查器按钮—放大镜，它将变成蓝色，表明开发者工具为审查您单击的元素做好了准备。现在，在浏览器窗口中移动鼠标，将其指向网页顶部附近的大标题，浏览器窗口将类似于如图2.6所示。
正如您看到的，该标题呈高亮显示，且工具提示中显示了一些有关该元素尺寸的信息。这个元素正是您要审查的，因此请在浏览器中找到并单击它。您刚打开开发者工具时，Elements选项卡显示的网页源代码几乎处于完全折叠的状态，如图2.4所示；但当您审查元素时，源代码将展开到足够的程度，让您能够看到被单击的网页元素对应的HTML源代码。现在，开发者工具窗口应显示用来创建您单击的标题的HTML标签，如图2.7所示。
我并不奢望您现在就理解开发者工具窗口中的众多内容，但这里需要指出一些重点。在左边的窗格中，显示的是网页的HTML源代码；右边窗口显示的样式信息指出了为何选定元素有当前这样的外观。在左边窗格的底部，指出了选定元素在网页结构中的位置：选定的元素显示在最后，它是包含B的span元素，在网页中被嵌套了4层，并对其应用了3个CSS类。
您经常要求助于开发者工具，尤其是在网页的外观不符合预期时。它指出了浏览器眼中的网页是什么样的，让您能够轻松地向下挖掘，找到您要寻找的元素，这在网页庞大而复杂时尤其有用。
