浏览器F12开发者工具的使用

什么是F12

是浏览器自带的一个开发调试工具，因为可以用F12快捷键直接启动，所以简称为F12工具。

• 简单轻量级，是浏览器内置的开发者工具来提供捕获浏览器的数据报文的功能。
• F12作为浏览器的一部分，是数据收发的一端，抓取到的HTTPS报文是可以得到明文数据的
  

如何启动F12

1. 键盘按F12启动
2. 鼠标右键选检查页面启动
3. 菜单里更多工具里–>开发者工具
4. ctrl+shift+i 快捷键启动

F12常规设置

1. 显示的位置调整：靠右 靠左 靠下 独立窗口
2. 设置颜色和语言 (chrome)
3. 手机版本的切换，适合测试H5页面 小程序测试，可以方便在电脑操作和调试；也可以选择尺寸和不同的手机型号

F12的主要标签页

• 元素/查看器（Element）：实时调试DOM与CSS，可修改HTML属性、样式并即时预览。

• 控制台（Console）：执行JS命令、查看日志，支持调用函数、测试API或获取元素值。

• 源代码/调试器（Sources）：查看页面资源代码，支持断点调试与脚本调试。

• 网络（Network）：监控资源请求（XHR/脚本等），分析耗时、状态与大小，支持弱网模拟。

• 性能（Performance）：记录运行时CPU/内存/帧率数据，生成火焰图定位性能瓶颈。

• 内存（Memory）：查找影响页面性能的内存问题，包括内存泄漏、内存膨胀和频繁的垃圾回收。

• 应用程序（Application）：用程序 使用 应用程序 工具管理 Web 应用页的存储，包括清单、服务辅助角色、本地存储、Cookie、缓存存储和后台服务。

Elements/元素

用途

可用于页面结构分析，也可用于自动化脚本的元素定位；或者页面元素分析（元素大小，元素布局等）。前端页面 - html页面，标签语言。

1、查看元素的代码

点击左上角的箭头图标（或按快捷键Ctrl+Shift+C）进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。

2、查看元素的属性

定位到元素的源代码之后，可以从源代码中读出该元素的属性。如class、src、width等属性的值。

3、修改元素的代码与属性

点击元素，查看右键菜单，可以看到浏览器提供的可对元素进行的操作。当然，这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，所以这个功能也是作为调试页面效果而使用。

使用场景

可以作为软件测试的:UI自动化的元素定位
案例：找到页面的输入框输入内容，点击搜索按钮，完成页面的自动化登陆操作（selenium工具）


如图找到了百度的输入框和搜索按钮，他们的id分别是"kw"和"su"，因此可以通过id来定位到，配合下面的python代码实现自动输入和搜索。

from selenium import webdriver
from selenium.webdriver.common.by import Bydriver = webdriver.Edge()try:driver.get("https://www.baidu.com")input_box = driver.find_element(By.ID,"kw")submit_button = driver.find_element(By.ID,"su")input_box.send_keys("python")submit_button.click()except Exception as e:print(f"操作出错: {e}")
finally:input("按回车键退出...")driver.quit()

Cookies

Cookies：是下载到计算机上的小文件。比如访问过的链接，单击的按钮，登录信息或过去访问过的页面，当我们下次访问该网站时，该网站将使用该信息来跟踪我们先前在其网站上的活动。他还可以记住以前输入到表单字段中的信息。
Cookies的组成部分：
expires = date:表示cookie的失效时间，默认是浏览器关闭时失效（可选）-- 会话 默认
path = 路径：访问路径，默认为当前文件所在目录（可选）；设置了之后，只有设置的哪个路径文件才可以访问Cookies
domain = 域名：访问域名，限制在该域名下访问（可选）= 设置的域名才可以访问cooies 没有设置 默认当前域名
secure：安全设置，如果设置了则必须使用https协议才可获取Cookies（可选）

完整格式为：
name = value;[expires=date];[path=路径];[domain=域名];[secure]

Cookies用于用户身份验证：服务器会将用户信息以会话形式（Session）存储，并设置时效性。服务器通过生成Session ID并将其存入Cookies字段发送给客户端。客户端浏览器保存该Cookies，从而实现Session与Cookies的配合使用。

Console/控制台

用途： 控制台是前端开发中不可或缺的调试工具，主要用于开发和测试阶段的问题排查与分析。通过控制台，开发者可以实时查看代码执行情况、调试JavaScript脚本、验证页面元素定位以及检查网站数据等。

1. console里验证xpath表达式
   • 在控制台输入$x(“your_xpath_expression”)命令，可快速验证XPath表达式是否正确匹配到页面元素
   • 例如：$x(“//div[@class=‘container’]”)会返回所有匹配的div元素
   • 支持实时修改和重新测试，提高开发效率

2.执行js语句

// 修改页面标题
document.title = "测试标题";
// 获取元素并修改样式
document.querySelector(".btn").style.backgroundColor = "red";

3.查看cookies信息：查看当前网站的cookie,支持对cookie进行增删改查操作

// 添加cookie
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";
// 删除cookie
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;"

Network/网络

用途

该模块主要用于测试问题的分析与定位，记录前后端交互过程，是学习F12工具的核心内容。

前端与后端通过接口进行数据传输，Network模块记录了完整的接口信息：（接口封装http–定义头部）

1. HTTP请求消息：包含请求行、请求头和请求体
2. HTTP响应消息：包括响应行（响应状态码）、响应头和响应体

报文分析要素

要素名称	定义说明	示例	分析价值
名称	对报文功能或内容的描述，通常基于URL路径、接口名称或业务场景命名。	login-request、product-list	快速定位业务相关报文，区分不同功能模块的通信。
状态	HTTP响应状态码，标识服务器对请求的处理结果。	200 OK、404 Not Found	判断请求是否成功，定位客户端/服务器错误（如权限问题、资源不存在）。
类型	报文的协议类型或内容类型（MIME类型）。	HTTP/1.1、application/json	确定数据解析方式（如JSON需解析为对象，HTML需解析DOM），识别加密/压缩协议。
发起程序	发送报文的应用程序或进程名称，用于溯源请求来源。	Chrome、Postman、BackendAPI	区分用户行为（浏览器访问）与系统调用（API接口），排查跨系统调用问题。
大小	报文的字节大小，包括请求头、请求体、响应头、响应体的总长度。	Request: 512B、Response: 2.4KB	评估网络带宽占用，优化数据传输效率（如过大响应体可能导致加载延迟）。
时间	报文的发送时间、接收时间或往返耗时（RTT）。	2025-07-01 17:30:22、RTT: 150ms	分析网络延迟来源（如服务器处理慢、网络拥塞），优化性能瓶颈。
履行者	处理请求并返回响应的服务器或服务节点名称/IP，即响应的实际提供者。	web-server-01、192.168.1.100	定位负载均衡下的具体服务节点，排查集群中个别节点的故障或性能差异。

保留日志和禁用缓存

• 保留日志：不清除登录页面刷新导航，开启后重新加载url或者跳转了页面之后，之前的请求4显示资源信息依然会保留下来，不会清空
• 禁用缓存：在开发工具处于打开状态时禁用缓存，开启后，页面资源不会存入缓存，可以再status栏的状态码看文件请求状态

使用场景

案例：如何定位前端问题和后端问题？
步骤：

1. 明显的前端js问题
2. 抓包分析：
   • 前端没有发送请求 – 前端问题
   • 前端发送内容 数据错误 – 前端问题
   • 后端没给响应消息 – 后端问题
   • 后端响应消息，数据错误 – 后端问题
   • 前端没有正确的显示 – 前端问题
     配合数据库数据确认+Linux服务器分析项目日志

过滤

请求过滤
Content type: HTML,CSSS,JS
XHR requests: XMLHttpRequests
WS: WebSocket 链接
报文过滤
url: 域名或者文件部分包含这个URL
status-code: 状态码
method: 请求方法（POST,GET）
domain:域名
remote-ip:远程IP
mime-type:MIME类型(image/png)

搜索请求

1. 点击搜索按钮打开搜索框
2. 搜索关键字可以是请求和响应消息头和响应消息体
3. 大小写敏感：Aa
4. 关闭搜索框
   

接口测试（数据篡改）

1. 右键后点击编辑并查重发

   • 可以修改补货到的请求的数据（参数）
   • 发送接口请求
   • 检查响应结果
     

2. 点击新请求
   自己手动添加请求地址、请求头、请求体等信息进行发送
   这里可以修改参数、请求头、请求地址等，对接口的正常数据+异常数据进行测试
   

使用场景：前端检查了一些异常数据报错，接口层面是否也有检测这种异常数据的能力呢？所以要对接口进行这些异常数据的测试检查。

复制和导入

复制

• 复制网址
• 复制post数据（请求体）：可用于Jmeter这种工具使用
• 复制请求头：可用于Jmeter工具粘贴使用
• 复制为curl命令（linux）可以在postman里粘贴使用
• 复制为HAR格式 / 所有内容保存为HAR模式
• 可以导入到其他工具使用比如Metersphere工具
  导入HAR文件：
  F12可以导入其他工具导出的HAR文件

弱网测试

2G/3G/离线/4G/wifi等
用途：模拟用户网络不佳的场景（web应用，手机模式），保证软件可以正常处理并给出友好的反应和提示信息。

Performance/性能

用途：监控该网页的性能各种指标信息
场景：当我们在进行大并发的直播互动这种类似的场景下，对浏览器的负荷是比较大的，Performance对网页进行分析就可以评估实时网页性能
以及相关的数据。 (直播+游戏)

案例：点击●可以开始录制，它会记录用户的交互以及这些交互对页面性能数据的影响，当交互完成后，点击Stop来停止Record，
Performance面板会展示出刚才录制的页面性能数据
火焰图：显示性能报告，我们根据性能报告用来分析页面得性能，从而找到性能瓶颈

FPS（帧率）：主要和动画性能有关，代表每秒帧数。图表中的绿色长条越高，说明FPS越高，用户体验越好。如果其中有红色长条，代表着这
部分帧数有卡顿，需要优化
NET：主要展示了网络请求的先后顺序以及各自的请求耗时，可以被Network面板完美替代，建议直接查看Network

summary:cpu图表的各种颜色表示在这个时间段内，CPU在处理各种时间上面所花费的时间，如果你看到某段颜色占据了大量的比重，就说明
这个地方可能存在优化的空间
Main：主要用来分析页面性能的部分，它展现了主线程在Record过程中做的所有事情，包括：Loading、Scripting、Rendering等；横轴代
表着时间，纵轴代表着调用堆栈。每一个长条代表执行了一个事件或函数，长条的长度代表着耗时的长短。如果某个长条右上角是红色的则表示
该函数存在性能问题，需要重点关注。

导出&导出火焰图：导入和导出脚本进行分析

Application/应用程序

用途：主要是存储一些cookies和前端本地数据等

本地存储和会话存储

主要是前端开发人员在前端设置，一旦数据保存在本地后，就可以避免再向服务器请求数据，因此减少不必要的
数据请求，减少数据在浏览器和服务器间不必要地来回传递。
本地存储和会话存储的操作代码完全相同，它们的区别仅在于数据的寿命。——提高浏览器访问速度
本地存储：保存不受时间限制，用于长期保存网站的数据；除非用户自己删除，否则不会消失；并且站内任何页面都可以访问该数据
；主要用来保存访客将来还能看到的数据。

会话存储：用于临时保存针对一个窗口(或标签页)的数据，保存受时间限制，当前窗口一旦关闭，内容就会被浏览器删除。会话存储
则用于保存那些需要从一个页面传递给下一个页面的数据。

案例场景：比如页面上输入一些内容信息（注册信息），中途被打断，页面关闭，然后重新打开，能保留上次输入的内容。

一些骚操作

通过F12获取音乐（视频同理）

进入网站后播放音乐，在Network/网络页面对媒体进行筛选，看到有一个ogg格式的音频文件，双击直接就能下载到了。（如果没找到可能是因为第一次加载的时候自动存到了缓存中，那么就需要在Application/应用程序页面找到对应的cookie并清除，然后回到Network/网络页面刷新重试）

通过F12解除付费复制

如图可以看到这个网站想要复制英语作文还得付费

来到Element/元素页面，找到文章对应的html，但是发现文章被分为很多段包在p标签内，这样一段一段复制不方便
于是尝试在Console/控制台 页面输入document.designMode，可以看到返回了’off’，这就是不让我们复制的罪魁祸首

直接赋值为’on’，就可以轻松复制到内容了

通过F12截图

通过命令，可以实现获取一张完整页面的截图，点击三个点弹出下拉菜单并找到运行命令，或者用快捷键Ctrl+Shift+P

以Edge浏览器为例，输入“截图”

点击后即可下载到完整页面的截图