玩转F12

f12主要标签

1、元素（Elements）：页面元素的定位

用于页面元素分析，包括元素大小和元素布局，也用于自动化脚本元素定位。

（1）查看元素代码。点击左上角箭头图标，选择网页中的相应元素即可进行检查页面。

（2）查看元素属性

定位到元素的源代码，从源代码中查看元素的属性。eg：class、src、width等。

（3）修改元素的代码和属性

双击修改span标签，改为小源家

2、控制台（Console）：调试错误

（1）执行js语句

（2）查看当前网站的cookies信息，更改cookies值

控制台输入：consoli.log(document.cookie)     document.cookie

document.cookie = '123456'

3、源代码（Sourse）：前端代码调试、断点

（1）查看文件：在源代码中可以看到当前网页的所有源文件，在左侧栏中展示。

（2）添加断点。

单击源代码左侧蓝色区域，单击给该行添加一个断点，再次单击取消断点。右键编辑断点条件。

（3）中断调试：添加断点后，当js代码运行到断点就会中断（对于添加了中断条件的断点在符合条件时中断

4、网络（Network）：抓包，定位测试问题

（1）网络抓包基本分析

network记录了接口信息，接口封装http协议-定义头部

http请求：请求行（请求方法）、请求头、请求体-客户端发送

http响应：响应行（响应状态码），响应头，响应体-服务器回应

HTTP响应状态码：

200(服务器收到我的请求并且给了我一个回应)

404（资源不存在或者地址给错了）

500 503（表明服务器有问题）

302 304 (重定向)

http请求方法：get、post、put、patch

详细报文内容：消息头、cookies、请求、响应、耗时

eg：百度登录页：

选中一条响应码为200的报文。标头包括，常规：请求地址，请求方法，状态码。响应标头和请求标头等等。

载荷：请求体

响应：响应体

6、内存（Memory）：

7、应用（Application）：存储cookie缓存

本地存储和会话存储的操作代码完全相同，区别在于存储数据的寿命。

本地存储：保存不受时间限制，用于长期保存网站的数据。

会话存储：临时保存一个窗口或标签页的数据，保存收到时间限制，窗口关闭，内容即可删除。用于保存从一个页面传递到下一个页面的数据。

cookies：存储访问过的链接，点击的按钮，登录的信息。还可以记住表单内信息，姓名性别年龄等等。

cookies组成：

name=value; [expires=date]; [path=路径]; [domain=域名]; [secure]

expires=date：表示cookies的失效时间，默认浏览器关闭时失效。

path=路径：访问路径，默认为当前文件所在的目录。

domain=域名：访问域名，默认在该域名下访问。

secure：安全设置，设置后必须使用https才能获取cookies

cookies用户鉴权：登录一次过后用户的一些信息保存到服务器里，以session的形式，即会话，服务器这边的会话也有一定的时效，服务器会把session的一些信息通过set cookies字段发送到客户端，客户端保存到浏览器中，也就是cookies的形式保存。

8、接口测试/数据篡改

qq邮箱登录页面

登录的包，右键-复制-fecth格式复制到控制台。

篡改body的信息，回车