web测试F12工具

1、F12介绍

浏览器开发者工具（如F12）是我们日常工作中必不可少的一项利器。有着强大的调试功能，可以帮助我们快速定位并解决问题。

2、检查元素

以谷歌浏览器介绍F12开发者工具的常用的使用方法。
在Elements选项卡下可以查看和编辑网页的HTML结构和CSS样式。通过鼠标悬停或选择特定元素，你可以实时看到其在页面中的位置。

3、修改样式

在Elements选项卡中，你可以直接编辑和调试元素的CSS样式。你可以添加、修改或禁用特定的样式规则，以实时预览页面的变化。
“password”修改成“text”，密码直接变成明文

4、调试代码

在Sources选项卡下，你可以查看和调试网页中的t代码。你可以设置断点，逐行执行代码，并查看变量的值和函数的调用堆栈，以帮助你找出问题所在。

5、网络分析

在Network选项卡中，你可以监视浏览器与服务器之间的网络请求和响应。你可以查看请求的详细信息、响应的状态码和内容，并分析网络性能。

6、控制台输出

在Console选项卡中，你可以查看和调试JavaScript代码的输出和错误信息。你可以输出日志、警告和错误消息，或者执行特定的命令来与页面进行交互。

7、缓冲管理

在Application选项卡下，你可以查看和管理浏览器的缓存内容。你可以清除缓存、禁用缓存或手动添加缓存条目，以测试网页的离线访问能力。

8、性能分析

在Performance选项卡中，你可以进行性能分析，识别潜在的性能瓶颈和优化机会。它提供了一些有用的工具和视图，如时间轴、内存分配和CPU占用等

9、接口分析

收到接口，分析接口
1）接口的请求方法：

get （常用）

post（常用）

put

delete

2）get和post请求的区别

（1）get的请求数据在地址栏上，post在请求数据在body中

（2）get的安全性，要低于post

（3）get请求数据量比较小，post请求量相对于更大

响应状态码（重点：常用的状态码必须记下来）

常见的HTTP状态码：

200 - 请求成功

301 - 资源（网页等）被永久转移到其它URL

200和304都可以认为请求成功，200还要readystatus为4，这两个符合就可以去加载了

404 - 请求的资源（网页等）不存在，请求故障

500 - 内部服务器错误，服务端故障

HTTP状态码分类

HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型：

HTTP状态码分类

1 信息，服务器收到请求，需要请求者继续执行操作

2 成功，操作被成功接收并处理

3 重定向，需要进一步的操作以完成请求

4 客户端错误，请求包含语法错误或无法完成请求

5服务器错误，服务器在处理请求的过程中发生了错误

HTTP状态码列表:

100 Continue 继续。客户端应继续其请求

101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议

200 OK 请求成功。一般用于GET与POST请求

201 Created 已创建。成功请求并创建了新的资源

202 Accepted 已接受。已经接受请求，但未处理完成

203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本

204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档

205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域

206 Partial Content 部分内容。服务器成功处理了部分GET请求

300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

303 See Other 查看其它地址。与301类似。使用GET和POST请求查看

304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

305 Use Proxy 使用代理。所请求的资源必须通过代理访问

306 Unused 已经被废弃的HTTP状态码

307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向

400 Bad Request 客户端请求的语法错误，服务器无法理解

401 Unauthorized 请求要求用户的身份认证

402 Payment Required 保留，将来使用

403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

405 Method Not Allowed 客户端请求中的方法被禁止

406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求

407 Proxy Authentication Required 请求要求代理的身份认证，与401类似，但请求者应当使用代理进行授权

408 Request Time-out 服务器等待客户端发送的请求时间过长，超时

409 Conflict 服务器完成客户端的PUT请求是可能返回此代码，服务器处理请求时发生了冲突

410 Gone 客户端请求的资源已经不存在。410不同于404，如果资源以前有现在被永久删除了可使用410代码，网站设计人员可通过301代码指定资源的新位置

411 Length Required 服务器无法处理客户端发送的不带Content-Length的请求信息

412 Precondition Failed 客户端请求信息的先决条件错误

413 Request Entity Too Large 由于请求的实体过大，服务器无法处理，因此拒绝请求。为防止客户端的连续请求，服务器可能会关闭连接。如果只是服务器暂时无法处理，则会包含一个Retry-After的响应信息

414 Request-URI Too Large 请求的URI过长（URI通常为网址），服务器无法处理

415 Unsupported Media Type 服务器无法处理请求附带的媒体格式

416 Requested range not satisfiable 客户端请求的范围无效

417 Expectation Failed 服务器无法满足Expect的请求头信息

500 Internal Server Error 服务器内部错误，无法完成请求

501 Not Implemented 服务器不支持请求的功能，无法完成请求

502 Bad Gateway 充当网关或代理的服务器，从远端服务器接收到了一个无效的请求

503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求

505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理