4.8 基于浏览器调试

使用Jasmine进行单元测试时，测试用例是运行在浏览器里的，所以测试用例代码和前端JavaScript代码一样，都可以使用浏览器进行调试。

现代浏览器都内建开发者工具，帮助开发者调试前端程序。以Chrome为例，可以使用快捷键Shift+Ctrl+I启动开发者工具。（启动IE开发者工具的快捷键是F12）

Chrome开发者工具除了具有断点设置、删除，单步调试等基本功能以外，还在Source标签页（参见图4-15）提供了以下几种常用的调试功能：

图4-15 Chrome开发者工具Source标签页

1）自动异常断点

这个功能开启后，当JavaScript代码发生异常时，会在异常发生处暂停运行，供开发人员查找异常产生的原因。

2）DOM变化和XHR断点

这两项功能可以对DOM结构改变/属性改变等设置断点，也可以对Ajax请求设置断点。

3）事件断点

此功能可对某个事件（例如鼠标单击）设置断点。

4）调用堆栈分析

此功能可列出当前的调用堆栈。

5）实时代码编辑

代码编辑区可用于在运行时动态改变JavaScript代码。

在进行JavaScript应用开发的过程中，开发人员会添加必要的调试日志输出语句，方便进行问题定位。这些日志信息可以在Console标签页内找到，并且能通过单击该日志的末端文件链接直接跳转到Source标签页的源文件中，极大方便了相关代码的定位。

Network标签页（参见图4-16）列出了所有的HTTP请求，以方便用户查看请求内容、HTTP头、请求时间等信息。

图4-16 Chrome开发者工具Network标签页

如果想要了解更多Chrome开发者工具的信息，可以访问https://developers.google.com/web/tools/chrome-devtools/。