如何用Chrome开发者工具查看 HTTP 请求内容及如何使用

先来讲讲 http 协议报文

• 1.请求报文(请求行/请求头/请求数据/空行)

  • 请求行：
    求方法字段、URL字段和HTTP协议版本
    例如：GET /index.html HTTP/1.1
    get方法将数据拼接在url后面，传递参数受限
    请求方法：GET、POST、HEAD、PUT、DELETE、OPTIONS、TRACE、CONNECT
  • 请求头(key value形式)
    User-Agent：产生请求的浏览器类型。
    Accept：客户端可识别的内容类型列表。
    Host：主机地址
  • 空行
    发送回车符和换行符，通知服务器以下不再有请求头
  • 请求数据
    post方法中，会把数据以key value形式发送请求

• 2.响应报文(状态行、消息报头、响应正文)

  • 状态行
  • 消息报头
  • 响应正文

查看请求

1. 打开 Network

2. 地址栏输入网址

3. 在 Network 点击，查看 request，点击「view source」

4. 可以看到请求的前三部分了

   

5. 如果有请求内容的第四部分（POST），那么在 FormData 或 Payload 里面可以看到

   

查看响应

1. 打开 Network

2. 输入网址

3. 选中第一个响应

4. 查看 Response Headers，点击「view source」

5. 你会看到响应的前两部分

   

6. 查看 Response 或者 Preview，你会看到响应的第 4 部分

   

响应的js文件。会发现这个文件没有请求头,是因为js文件只是服务器响应回来的。

如何使用 curl 命令?

curl，全称CommandLine URL 或 CommandLine Uniform Resource Locator，顾名思义，curl命令是在命令行方式下工作，利用URL的语法进行数据的传输或者文件的传输。

比如下面是最简单的用法，通过这种方式获取一个页面。我输入的www.baidu.com甚至还不是一个完整的URL，因为没有指明所用的协议，curl智能地进行了选择。

运行后，返回的是一个百度主页的HTML代码。

curl www.baidu.com

curl的用法跟一般的linux/Unix命令无异，一般语法如下。

crul -[选项] [URL]

• 1. -v 选项，--verbose，指定该选项后，可以跟踪URL的连接信息。我们可以根据这个选项看看curl是怎么工作的。

比如刚刚演示的那个百度链接，我们加入-v选项，就可以看看它是怎么工作的。

加上选项后返回的信息，包括很多重要信息：

域名解释过程：我们可以得到真正连接的IP地址和端口

请求头信息：其中有使用的协议（HTTP），协议的请求方式（GET）

回应头信息：包含状态码（200），内容格式（text/html），内容长度等

curl -v www.baidu.com

• 2.-i 选项，--include，把回应的头信息包含在内，跟-v大同小异，是-v的子集。

curl -i www.baidu.com

• 3.-I （大写i）选项，--head，只显示返回的头信息，与-v大同小异，是-v的子集。

curl -I www.baidu.com

• 4. -u 选项，带用户验证的连接。可以访问或获取带用户验证的URL。

curl -u username:password ftp://127.0.0.1/hello.txt
curl -u username ftp://127.0.0.1/hello.txt
curl -u username:password https://127.0.0.1/

• 5. -d 选项，带请求参数的连接。比如下面的URL，user=xiaoruan&age=22就是所带的参数。crul可以带请求参数。
     http://127.0.0.1/index.html?user=xiaoruan&age=22

curl -d 'user=xiaoruan&age=22' http://127.0.0.1/index.html

• 6. -X 选项，指定请求方式，我们只能URL可以有多种请求方式，最常见的是GET和POST，但请求的方式，包括GET、PUT、POST、DELETE四种方式。
     这四种请求方式，对于在做RESTFUL接口开发和测试的人来说，非常方便。curl的用法如下：

curl -XGET www.baidu.com
curl -XPOST www.baidu.com
curl -XDELETE www.baidu.com
curl -XPUT www.baidu.com