1.5 查看、发送和接收HTTP消息的工具

虽然像Telnet这样的工具对理解HTTP的基础知识很有帮助，但是它们有一些局限性，其中最重要的是，无法处理网页内容比较多的情况。相较于Telnet，有几个工具可以让你更好地发送并查看HTTP请求。其中一些就在我们的Web浏览器里。

1.5.1 浏览器开发者工具

很多浏览器都带有开发者工具，它可以让你查看网站背后的细节，包括HTTP请求和响应。

要打开开发者工具，可以使用快捷键（对于大多数浏览器，在Windows下是F12键，在苹果电脑上是Option+Command+I组合键）；或者在页面上右击，在右键菜单中选择Inspect命令。开发者工具中有很多标签页，用来展示网页背后的技术细节，但是我们最感兴趣的是Network（网络）标签页。打开开发者工具，然后加载页面。Network标签页会显示出所有HTTP请求，单击其中一个，可以查看更多细节，包括请求和响应首部。图1.5所示是加载https://www.google.com时，Chrome开发者工具的内容。

图1.5　Chrome开发者工具中的Network标签页

像往常一样，在地址栏（1）的顶部输入URL。请注意挂锁和https://，这表明Google正在使用HTTPS（但我们之前讲过，Chrome可能会去掉这些标志）。像使用HTTP时一样，网页还是在地址栏下方显示。如果你在打开开发者工具之后加载此页面，则会看到包含各种标签页的新部分。单击Network标签页（2），显示HTTP请求（3），其中包括HTTP方法（GET）、响应状态码（200）、协议（http/1.1）和scheme（https）等信息。可以通过右键单击列标题来更改显示的列。例如，在默认情况下不显示Protocol（协议）、Scheme（请求格式）和Domain（域名）列。对于某些站点（例如Twitter），你会在此列中看到h2（代表HTTP/2），甚至更新的http/2+quic（来自Google，第9章讨论）。

图1.6显示了单击第一个请求时发生的情况（1）。右侧显示标签页的内容，可以在这里查看响应首部（2）和请求首部（3）。前面我们讨论了其中的大多数首部。

图1.6　在Chrome开发者工具中查看HTTP首部

HTTPS由浏览器处理，因此开发者工具只显示加密之前的HTTP请求和解密之后的响应。在大多数情况下，在设置完成后HTTPS可以被忽略，因为我们有合适的工具来处理加/解密。此外，大多数浏览器的开发者工具都能正确显示媒体内容，所以图像会显示正常，并且代码（如HTML、CSS和JavaScript）通常可以被自动格式化以方便阅读。

在本书中，我们会多次讲到开发者工具。大家应该熟练使用这些工具，可以选用你自己的网站或者流行的网站来练习。

1.5.2 发送HTTP请求

尽管Web浏览器的开发者工具是查看HTTP请求和响应的绝佳方法，但它们却不适用于发送HTTP请求。可以使用地址栏发送简单的GET请求，也可以使用网站提供的功能发送请求（例如，通过HTML表单进行POST操作）。除了这些以外，我们不能通过开发者工具来手动发起其他的HTTP请求。

Advanced REST Client[36]为我们提供了一种发送和查看HTTP请求和响应的方法。输入网址https://www.google.com（2），选择GET方法（1），然后点击Send按钮（3）以获取响应（4），如图1.7所示。注意，该程序支持HTTPS。

图1.7　Advanced REST Client（高级REST客户端）

使用此应用程序与使用浏览器没什么不同，但你还可以使用Advanced REST Client发送其他类型的HTTP请求（例如POST和PUT），需要设置要发送的首部或正文数据。起初Advanced REST Client是Chrome浏览器的扩展[37]，后来被封装为单独的应用程序。还有一些和Advanced REST Client类似的浏览器扩展工具，包括Postman（Chrome）、Rested[38]、RESTClient[39]（Firefox）和RESTMan[40]（Opera），它们的功能类似。

1.5.3 其他工具

我们可以使用许多其他的工具在浏览器外发送并查看HTTP请求，其中一些是命令行程序（例如curl[41]、wget[42]和httpie[43]），还有一些是桌面客户端（例如，SOAP-UI[44]）。

如果你希望查看更底层的数据包，则可以考虑Chrome的net-internals页面，或者网络嗅探器程序，如Fiddler[45]和Wireshark[46]。在后面的章节中，讨论HTTP/2的细节时，会用到这些工具。