利用chrome F12 测试应用实践详解

Chrome F12开发者工具作为一款强大的抓包工具，不仅可以帮助前端开发者调试页面问题，还可以用于接口测试、性能分析以及安全检测等多个方面。

1、常用配置

1）F12 窗口位置设置

点击右侧三个点，可以设置F12窗口位置

2）F12 中文界面设置

① 点击齿轮进入设置界面

② 点击preferences—>language，可以设置为中文

③ 设置完成后，点击关闭窗口，关闭F12界面，再次点击F12，即可查看到F12已是中文展示

2、抓包

1）元素（Elements）

元素面板用于查看和修改网页的HTML结构、CSS样式以及JavaScript代码。用户可以通过右键菜单选择元素并查看其属性，还可以直接在页面上修改HTML或CSS代码，实时看到效果。此外，还可以设置断点以调试事件监听器。

① 选中某个界面元素后，我们可以通过修改元素值，从而进行页面参数的修改

② 还可在某个元素标签右键，进行xpath的复制，以便于进行web测试时进行元素的定位

按ctrl+f，即可进行元素搜索定位，定位到的元素会有颜色标识

2）控制台（Console）

控制台是用于执行JavaScript代码、查看调试日志信息和异常信息的地方。开发者可以在这里运行单行代码、查看对象属性、捕获错误信息，并通过快捷键如Ctrl+Shift+I快速打开。它还支持调试JavaScript代码中的断点。

3）源代码（Sources）

源代码面板用于查看和编辑网页的HTML、CSS和JavaScript源文件。开发者可以在此处设置断点、调试代码逻辑，并实时观察变量值的变化。此外，还可以查看文件树结构，方便定位代码位置。

4）网络（Network）--最常用

网络面板用于分析网页加载过程中的网络请求，包括请求头、响应头、状态码、资源大小等信息。开发者可以通过时间线功能查看不同请求的耗时情况，并设置缓存、限速等选项来优化网络性能。

① 录制和清空操作

② 过滤xhr请求（XMLHttpRequest）请求是一种用于客户端与服务器之间进行异步通信的技术，允许开发者发起HTTP请求，支持GET、POST等方法，并且可以处理响应数据

③标头（Headers）

标头部分显示了HTTP请求和响应的详细信息，包括请求的URL、HTTP方法（如GET、POST）、状态码（如200 OK）、响应头信息以及请求头信息等。此外，还可以查看查询字符串参数和其他HTTP头信息。

④ 载荷（payload）

请求的参数

⑤预览（preview）

预览部分用于预览资源内容。如果资源是文本格式（如HTML、JSON），可以直接查看其格式化后的文本内容。如果资源是二进制文件（如图片、视频），则会显示为预览图像或文件大小。

⑥ 响应（response）

响应部分展示了HTTP响应的内容，包括响应头和响应体。响应头中可能包含日期、内容编码、文档类型等信息，而响应体则显示实际返回的数据

⑦ 启动器（Initiator）

启动器列显示了发起该请求的对象或进程，例如HTML解析器（Parser）、重定向（Redirect）、脚本（Script）或其他外部请求（Other）。这有助于了解请求是如何被触发的。

⑧ 时间（Timing）

时间部分提供了资源加载过程中的时间分析，包括DNS解析时间、TCP连接建立时间、SSL握手时间、等待时间（Waiting）、下载时间等。这些数据可以帮助分析资源加载的性能问题。

⑨ Cookie

Cookie部分列出了在请求和响应过程中传输的所有Cookie信息。每条Cookie记录包括名称、值、域名、路径、过期时间、大小以及是否安全等字段。如果资源的请求或响应中包含Cookie，该部分会自动显示

⑩ 对获取的请求再次发送

右键请求，选中复制下以cURL（bash）格式复制所有列的项，可以导入postman或jmeter中进行请求的再发送

在postman中选中import—>raw_text，复制上面的内容，再发送即可

5）性能（Performance）

性能面板用于测量网页的运行性能，包括渲染时间、JavaScript执行时间等。开发者可以通过“记录性能”功能分析网页加载过程中的瓶颈问题，并生成性能报告以优化网页性能。

6）内存（Memory）

内存面板用于分析网页的内存使用情况，帮助开发者定位内存泄漏问题。通过此面板，可以查看对象的引用链、垃圾回收情况以及内存占用的变化趋势。

7）应用（Application）

应用面板用于查看和管理网页的存储数据，包括本地存储（Local Storage）、会话存储（Session Storage）、IndexedDB、Cookies等。此外，还可以查看缓存数据、字体、图片、脚本和样式表等资源信息。

表示其请求中所存放的cookies、token、缓存内容、css、js等一些值。如果是测试cookies相关，可以进行在这个页面中查看cookies内容

8）安全（Security）

安全面板用于检查网页的安全性，包括HTTPS连接状态、混合内容问题以及跨站请求伪造（CSRF）防护等。开发者可以通过此面板确保网页的安全性。

3、弱网测试

节流模式是Chrome开发者工具中的一种网络模拟功能，用于模拟低速网络环境（如3G、4G等），以便开发者测试网页在不同网络条件下的表现。当节流模式被启用时，浏览器会限制网页加载速度，以模拟网络延迟和带宽限制。

① 已停用节流模式

如果用户在开发者工具中选择了“已停用节流模式”，则表示网络模式被切换回了正常模式（No Throttling）或在线模式（Online）。这意味着网页将按照实际网络速度加载，而不是被限制在低速模式下。

② 高速4G

③ 低速4G

④ 3G

⑤ 离线

⑥ 自定义设置

4、判断是前端还是后端的问题

1）前端bug

如果前端页面显示错误，但后端返回了正常数据，则可能是前端代码的问题。例如：

• 控制台报错：通过“Console”标签页查看是否有JavaScript错误，并在Network中没看到前端对后端的功能接口发起调用，点击按钮无返回数据。
• 参数绑定错误：检查前端传入的参数是否正确，例如参数类型错误或缺少必填项。
• 页面展示问题：如果后端返回的数据与前端展示内容不一致，可能是前端渲染逻辑出错。

2）后端bug

如果后端返回了错误数据或无数据，可能是后端的问题。例如：

• 状态码异常：在网页点击某个按钮无反应时，在Console处看到js没有报错，并在Network中看到请求返回的状态码是500。

• • HTTP状态码是用于指示客户端请求处理结果的三位数字代码，广泛应用于HTTP协议中。根据不同的用途和含义，状态码被分为五大类

常见各错误代码：
1.  信息性状态码（1xx）
 100 Continue：服务器已收到请求，客户端应继续发送请求的剩余部分。
 101 Switching Protocols：服务器将遵从客户端的请求切换协议。

2.  成功状态码（2xx）
 200 OK：请求成功，服务器已处理请求并返回响应内容。
 201 Created：请求成功且已创建新资源。
 204 No Content：请求成功但没有返回任何内容。
 206 Partial Content：请求部分成功，返回请求范围内的内容

3.  重定向状态码（3xx）
 301 Moved Permanently：请求的资源已被永久移动到新的URL。
 302 Found（临时重定向） ：请求的资源临时移动到新的URL。
 304 Not Modified：请求的资源未被修改，可以使用缓存内容。

4.  客户端错误状态码（4xx）
 400 Bad Request：请求语法错误或无法理解。
 401 Unauthorized：请求需要用户认证。
 403 Forbidden：服务器理解请求但拒绝执行。
 404 Not Found：请求的资源不存在。
 413 Payload Too Large：请求体过大，服务器无法处理。
 415 Unsupported Media Type：请求体的媒体类型不被支持。
 
5.  服务器错误状态码（5xx）
 500 Internal Server Error：服务器内部错误。
 502 Bad Gateway：网关错误，通常是代理服务器的问题。
 503 Service Unavailable：服务器暂时无法处理请求。

• 数据缺失：后端response和preview返回的数据为空或不符合预期，可能是数据库查询错误或业务逻辑问题。
• 接口未定义：如果前端发起的请求没有对应的后端接口，则可能是后端未实现该接口。