1 Fork me on GitHub

3. 【测试工具系列】谷歌浏览器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):与网络相关的接口请求响应和网络传输等

========================================
页面操作时,后台的请求
name:请求名称
status:请求状态
tpye:请求类型
time:请求响应时间

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

                                                                                                                            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协议消息中,用来表示具体请求中的媒体信息类型

 
补充:

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

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

                                                                                                                     获取接口信息

获取接口信息以及他的方法:

  • 左侧 Name 栏,选择自己要抓取的接口名称,点击后右侧会出现接口Headers、Response 等
  • Headers 第一栏 General 获取服务器地址、接口地址、以及请求方法等
  • 问号后面则是参数,key - value 形式,每个参数之间使用 & 相隔

 

 

1.  获取请求cookie等

  • Headers 第二栏 Request Headers 很重要,可以获取 Cookie 等

 

 

2.获取入参

将滚动条拖至最下面,获取入参

 

 

 点击:view resource可以看出、入参格式(很明显入参为 key - value 形式,非 json 格式)

 

 当然json接口也是这么看的

3.获取出参
Network 面板 Response

 

4. 查看 Cookie 的 key-value 形式

进入 Application 面板

可以看出 Cookie 的组成其实就是一个个的 key 和 value,同时 domain (作用域)也很重要,没有他 Cookie 就不会生效

 

查看方式2:

 

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

bug相关接口和参数要附上去
get请求:
直接复制接口,参数拼接在接口中。

 

 

 

post请求:
post接口url

 

 

 

 

点击查看源代码:

 

 

Post的参数是json字符串的

 

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

posted @ 2022-04-06 13:43  v_jjling  阅读(1757)  评论(0编辑  收藏  举报
AmazingCounters.com