1. F12和接口文档

接口文档手册教学：https://hellosean1025.github.io/yapi/documents/index.html
Yapi接口管理平台。
参考文档01：https://hellosean1025.github.io/yapi/openapi.html
参考文档02：https://blog.csdn.net/ningmengban/article/details/118738013?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&utm_relevant_index=2

==============================

F12界面详解：

 

 

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

F12控制台功能：
1.  元素（Elements）:用于查看或修改HTML元素的属性、CSS属性、监听事件、断点等。

 

可以直接点击元素进行CSS、html修改；此修改只会在本地生效；不会上传到服务器端，所以可以用来调试前端代码

 

 

 2.  控制台（Console）：记录前端javascript对象、log信息、异常信息

 

 

3.  源代码（Sources）:查看网页的源代码HTML代码，js代码、CSS代码，可以直接修改代码进行前端调试
可以点击JS代码前面的数字来设置断点 ；断点可以在DOM元素节点发生改变时、XHR生命周期状态改变时、指定的事件执行时被触发

4.  网络（Network）:与网络相关的接口请求响应和网络传输等

 

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

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

 

 

 2.  响应头：

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


3.  请求头：

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

===================================
接口查看：

关于编辑：