幻的小屋-[转]测试工具

转自：https://www.cnblogs.com/jiajunling/p/16106009.html

主页部分

ALL：显示所有请求
XHR：显示AJAX异步请求
JS：显示js文件
CSS：显示css文件
Img：显示图片
Media：显示媒体文件，音频、视频等
Font：显示Web字体
Doc：显示html
WS：显示websocket请求
Other：显示其他请求

F12控制台功能：

元素（Elements）:用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。

可以直接点击元素进行CSS、html修改；此修改只会在本地生效；不会上传到服务器端，所以可以用来调试前端代码
控制台（Console）：记录前端javascript对象、log信息、异常信息
源代码（Sources）:查看网页的源代码HTML代码，js代码、CSS代码，可以直接修改代码进行前端调试
可以点击JS代码前面的数字来设置断点；断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发
网络（Network）:与网络相关的接口请求响应和网络传输等
页面操作时，后台的请求
name:请求名称
status：请求状态
tpye:请求类型
time:请求响应时间

network部分

在Headers标签里面可以看到HTTP Request、URL、HTTP Method、Status Code、Remote Address 等基本信息和详细的Response Headers、RequestHeaders以及Query String Parameters或者FormData等信息。
在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。
在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。
cookie:如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。

General部分：

Request URL：请求的URL
Request Method：请求使用的方法
Status Code：响应状态码
Remote Address：远程服务器的地址和端口
Reffer Policy：Referrer判别策略

响应头：

Date：标识产生响应的时间
Content-Encoding：指定响应内容编码
Server：包含服务器信息，如名称，版本号等
Content-Type：文档类型，指出返回的数据类型是什么。如此处的text/html代表返回的是HTML代码
Set-Cookie：设置Cookies。响应头中的Set-Cookie告诉浏览器要将此内容放在Cookies中，下次请求携带Cookies请求
Expires：指定响应过期时间，可以使代理服务器将加载的内容更新到缓存当中。如果再次访问，就可直接从缓存中加载，降低服务器的负载，缩短加载时间。

请求头：

Accept：请求报头域，用于指定客户端可接受哪些信息类型
Accept-Encoding：指定客户端可接受的语言类型
Accept-Language：指定客户端可接受的内容编码
Host：指定请求资源的主机IP和端口号，其为请求URL的原始服务器或网关的位置
Cookie：网站为了辨别用户进行会话跟踪而储存在用户本地的数据。主要功能是维持当前访问会话。（非常重要！！！）
Referer：用来标识这个请求是从哪个网页过来的。服务器拿到这一信息并做相应的处理，如来源统计，防盗链等
User-Agent: 浏览器型号和版本，可以使服务器识别客户使用的操作系统及版本等信息。
Content-Type：互联网媒体类型，在HHTP协议消息中，用来表示具体请求中的媒体信息类型

补充：
query string parameters：
请求参数，get请求的请求参数在url中，用&隔开；
post请求的请求参数写在报文体中query string parameters
request header中的Content-Type:post请求的请求格式，如果是get，没有请求格式