1.3 常用的调试工具

【提出问题】

有没有可以帮助我们分析HTTP请求和响应的实用工具？

【知识储备】

1.3.1 Fiddler抓包工具

Fiddler是一款免费的HTTP数据包抓取软件。它的特点是灵活、功能强大，支持众多的HTTP调试任务，是Web应用、移动应用开发的调试利器。这款软件可以记录所有客户端和服务器之间的HTTP请求，具有监视、设置断点、修改输入/输出数据等功能。Fiddler工具能够帮助开发者或测试人员进一步了解HTTP，其他相同类型的工具有HttpWatch、Firebug、Wireshark等。

Fiddler的工作原理如图1-10所示，它是以代理Web服务器的形式工作的，使用的代理地址为127.0.0.1，端口为8888。对于客户端来说，Fiddler代理扮演的是服务器的角色，可以接收HTTP请求，返回HTTP响应。对于Web服务器来说，Fiddler扮演的是客户端的角色，可以发出请求和接收响应。当正常关闭Fiddler时，它会自动注销，是不会影响其他程序正常运行的。如果Fiddler非正常退出，这时因为Fiddler没有自动注销，会产生网页无法访问的问题，这可以通过重新启动Fiddler的方式来解决。

安装Fiddler之后就可以进行抓包了。在Fiddler打开的状态下，当我们通过浏览器访问网页时，可以在Fiddler的工作界面内看到所有抓包内容，如图1-11所示。其中，左侧区域是抓取到的数据包列表，右侧区域通过多个标签页的形式显示各种类型的信息，其中最常用的标签页是lnspectors，单击数据包列表中的任意一行可以查看抓取到的请求和响应的详细内容。

左侧区域的数据包列表包含若干个字段，如图1-12所示，要分析数据包首先需要了解这些字段的含义。

（1）#:HTTP请求的顺序，从1开始，按照页面加载请求的顺序递增。

（2）Result:HTTP响应的状态，即HTTP响应报文中的状态码。

（3）Protocol：请求使用的协议（如HTTP/HTTPS）。

（4）HOST：请求地址的域名/lP。

（5）URL：请求的服务器路径和文件名，也包含GET参数。

（6）BODY：请求的大小，以byte为单位。

（7）Caching：请求的缓存过期时间或缓存控制header的值。

（8）Content-Type：请求响应的类型。

（9）Process：发出此请求的Windows进程及进程lD。

（10）Comments：用户通过脚本或者菜单给此Session增加的备注。

（11）Custom：用户可以通过脚本设置的自定义值。

右侧的面板除了lnspectors标签页外，主要有Statistics（统计）页、AutoResponder（自动响应）页、Composer（构建）页、Log（日志）页、Filters（过滤）页、Timeline（时间轴）页等。其中Filters页如图1-13所示，过滤器可以对左侧的数据包列表进行过滤，我们可以标记、修改或隐藏具有某些特征的数据包。

Fiddler 软件中的AutoResponder（自动响应）页非常实用，AutoResponder 允许用户拦截指定规则的请求，并返回本地资源或Fiddler资源，从而代替服务器响应。这个功能在开放调试中是很有用的。例如，在前端开发中，如果发现服务器上某个样式或动作脚本文件有问题，直接修改会影响生产环境的稳定。利用Fiddler的AutoResponder功能，可以将需要修改的文件重定向到本地文件上，这样就可以基于生产环境进行修改并验证，确认后再发布。再比如服务器端提供了接口和数据格式给前端调用，可能由于某些原因，接口还未开发完毕，或者返回数据有异常，为了不影响开发进度，前端仍然可以继续调用这个接口，然后通过Fiddler将请求转向本地的数据文件。

1.3.2 Chrome开发者工具

在谷歌浏览器 Chrome 中使用功能键［F12］可以打开开发者工具，它是为前端开发者提供的用来调试和分析前端应用的工具。开发者工具的功能模块包括元素（Elements）检视器、移动终端模拟、控制台（Console）、资源查看器、网络、源代码（Sources）、性能分析、内存使用情况分析、前端应用、安全、审计。

Chrome开发者工具最常用的4个功能模块是元素检视器、控制台、源代码、网络。

（1）元素检视器：用户查看或修改HTML元素的属性、CSS属性、监听事件、断点等。CSS可以即时修改、即时显示，方便开发者调试页面。如图1-14所示，单击开发者工具中左上角的箭头图标（或按快捷键【Ctrl】+【Shift】+【C】）进入选择元素模式，然后从页面中选择需要查看的元素，可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。定位到元素的源代码之后，可以从源代码中读出该元素的属性。

（2）控制台：一般用于执行一次性代码，查看JavaScript对象、调试日志信息或异常信息，如图1-15所示；它还可以当作JavaScript APl使用，例如要查看Console有哪些方法和属性，可以直接在Console中输入“console”并执行。

（3）源代码：用于查看页面的HTML文件源代码、JavaScript源代码、CSS源代码，如图1-16所示。此外，最重要的是，它还可以调试JavaScript源代码、为JavaScript代码添加断点。

（4）网络：该模块主要用于查看Headers等与网络连接相关的信息，如图1-17所示。

其中，位于面板左上角的3个按钮较常用，它们的功能如下。

①记录按钮：该按钮处于打开状态时会在此面板进行网络连接的信息记录，该按钮处于关闭状态则不会记录。

②清除按钮：清除当前的网络连接记录信息。

③过滤器：能够自定义筛选条件，找到想要的资源信息，如图1-18所示。

1.3.3 Postman工具

Postman是一款用于发送HTTP请求的工具，其主要功能为：创建+测试。它可以创建和发送任何HTTP请求，请求可以保存到历史中以备再次执行。

Postman的界面分为左、右两部分，如图 1-19 所示。左边是侧边栏，这里可以记录历史（History）请求，还可以根据项目需求将若干请求组装起来进行测试。右边是核心工作区，这里是创建请求的地方，上半部分可以编辑请求参数，主要分为4个部分：URL、请求方法、请求头、请求体；下半部分可以显示响应结果，包括响应状态码、响应体。

【应用案例】——使用postman工具发送GET请求

任务目标

（1）登录Postman，创建一个测试集MyTest。

（2）在浏览器中输入网址https://cnodejs.org，进入CNode网站查阅网站提供的应用程序接口（APl）。

（3）在测试集 MyTest 中创建一个请求Req01，使用 GET 请求方式，查看地址https:// cnode js.org/api/vl/topics的响应结果。

（4）根据CNode网站提供的应用程序接口，在请求中添加参数。

实现步骤

第一步：Postman工具准备。

打开Postman软件，分别单击右上角的“Create Account”和“Sign in”按钮，注册并登录账号，然后创建一个工作空间，再创建一个测试集，如图1-20所示。

第二步：请求测试的数据准备。

使用浏览器打开网页https://cnodejs.org/，这是一个Node.js专业中文社区。单击网站顶部的 APl 菜单项可以查看该网站提供的应用程序接口，以便读者完成请求、响应测试，如图1-21所示。

第三步：发送一个GET请求。

在测试集MyTest中创建一个请求，通过右键快捷菜单Rename修改请求的名称为Req01。单击请求Req01，可以在右侧工作区的上半部分编辑请求信息。请求方法保持默认选项GET，在地址栏中输入上一步中查到的https://cnodejs.org/api/v1/topics，单击“Send”按钮，可以在下半部分看到网站的响应内容，如图1-22所示。

第四步：为请求设置参数。

请求参数是采用键/值对的形式来编辑的，可以根据网站提供的应用程序接口的说明来进行设置。根据任务要求可以设置如下请求参数。

（1）KEY:page,VALUE:1，表示查看第1页的主题。

（2）KEY:tab,VALUE:ask，表示查看问答板块主题。

（3）KEY:limit,VALUE:2，表示显示2个主题。

在设置参数的同时，地址栏会随输入的参数实时更新，最终形成一条完整的请求连接。完成参数设置后，单击“Send”按钮，响应区会按照参数要求重新返回响应，如图1-23所示。

进入CNode技术社区问答板块，查看Postman中得到的响应结果与网站内容是否一致，如图1-24所示。

【梳理回顾】

本节介绍了3款常用的HTTP工具——Fiddler、Chrome开发者工具和Postman，引导读者利用这些工具辅助Web开发。