第 1 章　jQuery 入门 - Chrome开发者工具 - 《jQuery基础教程（第4版）》

1.5　使用开发工具

通过上面代码的比较，我们知道jQuery代码与对应的纯JavaScript代码相比更短也更清楚。可是，这并不意味着我们写出的代码永远不会有bug，或者永远都能直观地理解页面中都发生了什么。如果能有一些标准的开发工具辅助，编写起jQuery代码来就会更轻松流畅。

现代浏览器中一般都内置了高质量的开发工具。我们可以从中选择自己觉得最方便的工具。下面列出了一些推荐工具：

上面列出来的这些工具都提供了类似的功能，比如：

虽然这些功能在不同的工具中会有所变化，但大体上概念是相同的。本书中的某些示例需要用到这么一个工具，因此我们就以Firebug为例，不过使用其他浏览器的开发工具也没有什么问题。

Chrome开发者工具的详细使用说明可以在它的主页上找到：https://developers.google.com/chrome-developer-tools/。要详细介绍这个工具实在有些复杂，不过在此介绍一些与本书关系最密切的功能还是有必要的。

　关于屏幕截图

Chrome开发者工具是一个发展很快的项目，因此下面的屏幕截图不一定与你实际看到的完全一样。

打开Chrome开发者工具后，当前页面中会出现一个提供信息的新面板。在面板中默认的Elements（元素）标签页中，左侧显示的是当前页面的结构，右侧显示的是当前选中元素的详细信息（例如应用于它的CSS规则）。在研究网页结构，查找CSS问题的时候，这个标签页很有用，如图1-3所示。

图　1-3

Sources（资源）标签页显示的是页面中加载的所有脚本，如图1-4所示。右键单击行号可以设置普通断点、条件断点，还可以让代码执行到当前行。断点是暂停执行脚本，然后一步一步观察执行情况的有效方法。在这个标签页的右侧，可以输入一些想要监控的变量和表达式，以便随时观察它们的值。

图　1-4

Console（控制台）标签页恐怕是学习jQuery的过程中用得最多的一个了，如图1-5所示。可以在里面输入JavaScript语句，按回车后，语句的执行结果就会显示在上方。

图　1-5

在这个例子中，我们使用了与代码清单1-2中相同的选择符，但并未对选中的元素执行操作。即便如此，这条简单的语句也给出了很有价值的信息。我们看到，这个选择符的执行结果是一个jQuery对象，包含页面中的两个.poem-stanza元素。随时都可以在浏览器中通过这个控制台快速地试验jQuery代码。

此外，还可以直接编写与控制台交互的代码，这就要用到console.log()方法了，参见代码清单1-4。

代码清单1-4

$(document).ready(function() {
  console.log('hello');
  console.log(52);
  console.log($('div.poem-stanza'));
});

这里的代码表明，可以向console.log()方法中传入任何表达式。字符串、数值等简单的值会被直接打印出来，而jQuery对象等复杂的值则会以容易理解的格式展示出来，如图1-6所示。

图　1-6

这个console.log()方法（我们提到的所有开发人员工具中都有这个方法）是对JavaScript的alert()函数的绝好替代，在测试jQuery代码时也会非常有用。