Chrome 调试

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

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

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

Elements

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

Network

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

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

  • 第一个请求的URL是localhost,方法为 GET,响应状态码为 200,响应的Content-Typetext/html,响应大小为712B,文件大小为567B(其余为协议头所占空间),载入时间为13毫秒。
  • 第二个请求Content-Typetext/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请求中的详细信息

1@2x.png

Sources

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

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

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

Console

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

上图中我们首先执行了:

new Date()

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

console.error('test error')

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

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

登录发表评论 注册

反馈意见