Chrome 调试

Chrome和Firefox是Web开发中常用的调试工具，我们以Chrome为例。使用以下的任何一种方式都可以打开Chrome调试窗口：

• 在任何一个页面上，点击右键，选择“审查元素”；
• 快捷键F12；
• 设置 -> 更多工具 -> 开发者工具。

打开的调试窗口中，有8个标签页。常用的有 Elements、Network、Sources、Console。

Elements

Elements 中，我们可以查看页面元素，在左侧可以点选某一个元素，该元素会在页面上高亮，同时在右侧显示该元素的所有样式。这些样式还是可编辑的。

Network

Network 中，可以查看当前页面的所有网络请求。比如 AJAX 一节中我们会发送多个请求，在 Network 标签页中，可以看到访问页面时的请求，以及点击按钮获取数据时的请求，如下图所示：

从上图中可以看到这两个请求：

• 第一个请求的URL是localhost，方法为 GET，响应状态码为 200，响应的Content-Type为text/html，响应大小为712B，文件大小为567B（其余为协议头所占空间），载入时间为13毫秒。

• 第二个请求Content-Type为text/plain，这是在服务器代码中决定的。另外其initiator即初始化该请求的代码，在首页（index）的第14行，我们这一行的代码为：

    xhr.send();
  

text/html指示浏览器这是一个HTML文件，浏览器便会把它渲染为一个Web文档。如果将Content-Type设置为text/plain，浏览器则会直接显示HTML源码。

不仅如此，我们还可以点击第二个请求来查看其详情，如下图：

右侧详情窗口中有5个标签页，常用的是 Headers、Preview、Response。其中 Headers 中给出了请求和响应的所有头字段；Response 则给出了响应体的内容，这里是：

Mon Mar 30 2015 21:32:17 GMT+0800 (CST)

它就是xhr.responseText的值。

也可以通过Headers看到HTTP请求中的详细信息

Sources

Sources标签页下，可以查看当前网站的HTML，及其引入的所有CSS、Javascript文件。重要的是，在Javascript文件中的任何一行，我们都可以设置断点，脚本将会在这一行停下来。触发断点时，我们可以查看断点所在的作用域内的所有变量的值，如下图所示：

右侧窗格显示了局部变量、监视变量以及调用栈。右侧窗格的上方有继续、下一步、进入函数、跳出函数、禁用断点等按钮。

还可以切换至Console，在当前作用域下执行任何Javascript语句。

Console

Console与Node.js的控制台类似，这是一个Javascript的交互式环境。在这里可以执行任何Javascript语句，如图：

上图中我们首先执行了：

new Date()

控制台中输出了这个语句的返回值。接着执行：

console.error('test error')

我们便在控制台看到了一则错误，其内容为test error。

在断点触发时（例如上图中的情况），在控制台可以访问当前作用域的任何对象，读取或设置它们的值，甚至在这里调用作用域内的任何函数。如图便是输出了上述断点触发时的xhr对象。