不用装任何软件，打开浏览器按F12，你就能看到网页的"源代码"——这是测试工程师每天必用的技能。

目录

  1. 为什么测试必须会用F12
  2. 如何打开开发者工具
  3. 界面概览：8大面板速览
  4. Elements面板：看穿页面结构
  5. Console面板：你的JavaScript控制台
  6. Network面板：接口测试的核心武器
  7. Sources面板：断点调试不迷路
  8. Application面板：数据仓库探查
  9. 测试实战场景
  10. 常见坑与排错技巧
  11. 总结

一、为什么测试必须会用F12

很多测试新人觉得F12是前端开发才用的工具，跟自己没关系。但实际上，F12是测试工程师定位问题最快、最直接的工具。

不会F12的痛

场景不会F12的做法会F12的做法
页面报错但不知道原因截图发给开发，等回复打开Console看报错信息，直接定位
接口返回数据不对猜、问开发打开Network看请求和响应，秒定位
想改个页面数据测试找开发改代码Elements改HTML，立即验证
Cookie/Token有问题不知道怎么排查Application面板直接查看和修改
前端性能差凭感觉说"有点慢"Performance面板看加载耗时，用数据说话

F12在测试工作中的地位

测试工程师技能树：
┌─────────────────────────────────────┐
│ 基础工具层                           │
│ F12 > Postman > SQL > Linux > Git   │
│                                     │
│ F12是基础中的基础，天天用、随时用      │
└─────────────────────────────────────┘

二、如何打开开发者工具

三种打开方式

方式操作适合场景
快捷键按 F12最常用，一键打开
右键菜单页面任意位置右键 → "检查"想直接定位某个元素
菜单入口浏览器右上角 ⋮ → 更多工具 → 开发者工具找不到F12键时

常用快捷键（提升效率必备）

快捷键功能
F12 或 Ctrl+Shift+I打开/关闭开发者工具
Ctrl+Shift+C快速进入元素选择模式
Ctrl+Shift+J直接打开Console面板
Ctrl+Shift+M切换设备模拟模式（手机/平板）
Ctrl+F在当前面板内搜索
Ctrl+Shift+F在所有文件中搜索

窗口位置调整

点击右上角 ⋮ → 选择停靠位置：

  • 底部：适合宽屏，看Network瀑布图
  • 右侧：适合窄屏，看Elements和样式
  • 独立窗口：双屏工作时的选择

小技巧：如果开发者工具打不开或位置不对，检查一下是不是按到了别的快捷键。

三、界面概览：8大面板速览

打开F12后，你会看到顶部一排标签页：

┌──────────────────────────────────────────────────────────┐
│ Elements  Console  Sources  Network  Performance  Memory │
│ Application  Security  Lighthouse  ...                    │
└──────────────────────────────────────────────────────────┘

测试工程师必会的6个面板

面板图标一句话说明重要程度
Elements📄查看和修改HTML/CSS⭐⭐⭐⭐⭐
Console📟看报错、执行JS命令⭐⭐⭐⭐⭐
Network🌐抓包看接口请求/响应⭐⭐⭐⭐⭐
Sources📁断点调试JS代码⭐⭐⭐⭐
Application💾查看Cookie/Storage/缓存⭐⭐⭐⭐
Performance⚡分析页面加载性能⭐⭐⭐

其他面板（Memory、Security、Lighthouse等）偏进阶，入门阶段先掌握上面6个就够用了。

四、Elements面板：看穿页面结构

4.1 它能做什么

  • 查看页面的HTML结构
  • 查看和修改CSS样式
  • 临时修改页面文字和样式（刷新后恢复）
  • 模拟元素状态（hover、focus、active）

4.2 选择元素

方法一：鼠标选择（最常用）

  1. 点击左上角的箭头图标 📍（或按 Ctrl+Shift+C）
  2. 鼠标移到页面上，元素会高亮
  3. 点击你要查看的元素

方法二：在HTML树中查找

  • 按 Ctrl+F，输入关键字搜索

4.3 测试最常用的操作

① 修改页面文字
1. 选中文字元素
2. 双击文字内容
3. 输入新文字，回车

测试场景：验证不同长度的文字显示效果、特殊字符测试

② 修改CSS样式

右侧Styles面板：

  • 点击某个CSS属性值，修改后回车
  • 勾选/取消勾选前面的复选框来启用/禁用样式
  • 点击空白处可以添加新样式
测试场景：
- 把按钮宽度改成500px，看会不会撑破布局
- 把字体改成很大，看换行是否正常
- 把颜色改成和背景一样，看文字是否"消失"
③ 模拟元素状态

在Styles面板右上角点击 :hov：

  • 勾选 :hover → 模拟鼠标悬停
  • 勾选 :focus → 模拟输入框聚焦
  • 勾选 :active → 模拟点击态
  • 勾选 :visited → 模拟已访问链接

测试场景：不用真的去操作，就能看hover态、focus态的样式是否正确

④ 强制元素状态

右键HTML元素 → Force state → 选择状态

⑤ 隐藏/删除元素
  • 选中元素按 Delete 键 → 删除该元素
  • 在Styles中加 display: none → 隐藏元素

测试场景：模拟某个模块加载失败的情况

⑥ 截图元素

右键元素 → Capture node screenshot → 只截该元素的图

4.4 测试用例设计思路

测试点Elements面板怎么测
超长文本显示修改文字为超长内容，看是否溢出/截断
特殊字符修改文字包含 <>&"' 等，看是否XSS
边界样式修改宽高、边距，看布局是否正常
多状态覆盖用 :hov 模拟各种状态
异常展示删除/隐藏元素，看页面是否健壮

五、Console面板：你的JavaScript控制台

5.1 它能做什么

  • 看报错：红色报错信息是最直接的Bug线索
  • 执行JS：在页面环境下直接运行JavaScript代码
  • 查看变量：打印和查看页面中的变量值
  • 调用接口：直接在Console发请求测试

5.2 看报错——最重要的功能

打开一个有问题的页面，Console里可能出现这些：

javascript

复制

// ❌ JS报错（红色）
Uncaught TypeError: Cannot read property 'name' of undefined
    at script.js:42

// ⚠️ 警告（黄色）
[Warning] The resource was blocked due to mixed content

// ℹ️ 信息
[Info] Page loaded in 1.2s

// 📝 自定义日志
用户登录成功

报Bug必备：截Console报错图，开发无法抵赖。

5.3 执行JS命令——测试利器

在Console底部输入框，可以执行任何JS代码：

javascript

复制

5.4 Console常用命令速查

命令说明测试场景
document.title查看页面标题验证标题是否正确
document.cookie查看/修改Cookie测试登录态
localStorage.getItem('key')获取本地存储验证数据缓存
sessionStorage.getItem('key')获取会话存储验证临时数据
location.href当前URL验证跳转
document.querySelectorAll('.item')获取匹配元素验证元素数量
console.log(变量)打印变量调试脚本
console.table(数组)表格形式打印查看数据列表

5.5 测试常用技巧

javascript

复制

// ① 一键获取所有链接
$$('a').forEach(a => console.log(a.href, a.textContent))

// ② 检查页面是否有console报错（自动化可用）
// 如果Console里有红色报错，说明有问题

// ③ 模拟移动端
// 在Console里无法直接切换，但可以执行：
document.querySelector('meta[name="viewport"]')

// ④ 获取页面加载时间
performance.timing

六、Network面板：接口测试的核心武器

这是测试工程师使用频率最高的面板。

6.1 它能做什么

  • 查看所有网络请求（接口、图片、JS、CSS等）
  • 查看每个请求的详细信息（URL、Header、参数、响应）
  • 分析请求耗时
  • 导出请求为cURL，导入Postman测试
  • 模拟弱网环境
  • 拦截和修改请求

6.2 使用步骤（5步法）

第1步：打开Network面板
第2步：勾选 Preserve log（保留日志，页面跳转不丢失）
第3步：清空旧记录（点击 🚫 按钮）
第4步：在页面上执行你要测试的操作
第5步：查看捕获到的请求

6.3 面板区域解读

┌────────────────────────────────────────────────────────┐
│ 🔴 ●  🚫  🔍  □ Preserve log  □ Disable cache        │  ← 工具栏
├────────────────────────────────────────────────────────┤
│ Name          Status  Type    Size    Time    Waterfall │  ← 请求列表
│ /api/login    200     xhr     1.2KB   230ms   ████     │
│ /api/user     200     xhr     0.8KB   150ms   ███      │
│ logo.png      200     png     12KB    80ms    █        │
├────────────────────────────────────────────────────────┤
│ Headers  Preview  Response  Cookies  Timing            │  ← 详情面板
│ Request URL: https://api.example.com/login             │
│ Request Method: POST                                   │
│ Status Code: 200 OK                                    │
└────────────────────────────────────────────────────────┘

6.4 请求列表——快速筛选

按类型筛选

点击顶部的筛选按钮：

  • All：全部请求
  • XHR/Fetch：只看接口请求（测试最常用）
  • JS：JS文件
  • CSS：样式文件
  • Img：图片
  • Media：媒体文件
  • Doc：HTML文档

核心操作：测试接口时，直接点 XHR/Fetch，只看接口请求！

搜索过滤

在Filter输入框可以输入：

  • 接口路径关键词：login
  • 状态码：status-code:200、status-code:500
  • 请求方法：method:POST、method:GET
  • 域名：domain:api.example.com

6.5 查看请求详情——核心中的核心

点击任意一个请求，下方出现详情面板：

Headers标签（请求头和响应头）
General:
  Request URL: https://api.example.com/api/login
  Request Method: POST
  Status Code: 200 OK

Request Headers:
  Content-Type: application/json
  Authorization: Bearer eyJhbGciOi...
  Cookie: session_id=abc123

Response Headers:
  Content-Type: application/json
  Set-Cookie: token=xyz789

测试关注点：

  • ✅ 请求方法对不对（GET/POST/PUT/DELETE）
  • ✅ Content-Type对不对（application/json 还是 form-data）
  • ✅ 有没有带上认证信息（Token/Cookie）
  • ✅ 状态码对不对（200/201/400/401/500）
Payload标签（请求参数）
▼ Request Payload
{
  "username": "admin",
  "password": "123456"
}

测试关注点：

  • ✅ 参数名称和类型对不对
  • ✅ 必填参数是否都传了
  • ✅ 参数值格式对不对
  • ✅ 敏感信息（密码）是否明文
Preview/Response标签（响应数据）

json

复制

{
  "code": 200,
  "message": "success",
  "data": {
    "userId": 10001,
    "username": "admin",
    "token": "eyJhbGci..."
  }
}

测试关注点：

  • ✅ 响应结构和接口文档一致吗
  • ✅ 关键字段的值对不对
  • ✅ 数据类型对不对（该是数字的是不是数字）
  • ✅ 错误场景的code和message是否正确
Timing标签（耗时分析）
Queueing:        5ms
DNS Lookup:      12ms
Initial Connection: 45ms
SSL:             30ms
Request sent:    2ms
Waiting (TTFB):  180ms  ← 服务器处理时间
Content Download: 3ms
─────────────────────
Total:           277ms

TTFB（Time To First Byte）是关键指标，如果这个值很大，说明服务器处理慢。

6.6 复制请求到Postman

这是非常高效的操作：

  1. 在Network面板找到目标接口
  2. 右键请求 → Copy → Copy as cURL
  3. 打开Postman → Import → Raw text → 粘贴
  4. 自动生成完整的请求配置

从此不用手动填URL、Header、Body了！

6.7 模拟弱网环境

Network面板 → 在线右侧的下拉框（默认是"No throttling"）：

选项模拟场景
Online正常网络
Fast 3G快速3G
Slow 3G慢速3G
Offline断网
Custom...自定义（设置上传/下载速度和延迟）

测试场景：弱网下页面加载是否正常、是否有友好提示、是否超时崩溃

6.8 禁用缓存

勾选 Disable cache，每次请求都从服务器获取，不走缓存。

测试场景：确保测的是最新版本，不受缓存干扰

6.9 保留日志

勾选 Preserve log，页面跳转后请求记录不丢失。

测试场景：测试登录→跳转→首页加载这一完整流程

七、Sources面板：断点调试不迷路

7.1 它能做什么

  • 查看页面的所有源文件（HTML、JS、CSS、图片）
  • 在JS代码中打断点，逐步执行
  • 查看变量的实时值
  • 修改代码并实时预览效果

7.2 测试常用场景

① 断点调试（定位Bug利器）
1. 打开Sources面板
2. 左侧找到要调试的JS文件
3. 点击行号设置断点（蓝色标记）
4. 刷新页面或触发操作
5. 代码执行到断点处暂停
6. 鼠标悬停在变量上查看当前值
7. 按 F10 逐行执行，F11 进入函数

测试场景：表单提交时数据格式不对？在提交函数打断点，看数据在哪个环节出了问题。

② 查看XHR断点

右侧 XHR/fetch Breakpoints → 添加URL片段 → 任何匹配的请求都会自动断点

测试场景：不确定某个接口在哪里被调用，用这个功能，一调就断住。

③ Event Listener断点

右侧 Event Listener Breakpoints → 展开 Mouse → 勾选 click

测试场景：点击按钮没反应？勾选click断点，看点击后有没有触发代码。

7.3 快捷键

快捷键功能
F8继续执行
F10逐行执行（不进入函数）
F11进入函数内部
Shift+F11跳出当前函数
Ctrl+F8禁用/启用所有断点

八、Application面板：数据仓库探查

8.1 它能做什么

  • 查看和管理Cookie
  • 查看LocalStorage和SessionStorage
  • 查看IndexedDB（本地数据库）
  • 查看Service Worker
  • 清除存储数据

8.2 测试最常用的操作

① 查看和修改Cookie

左侧 Storage → Cookies → 选择域名 → 右侧看到所有Cookie

操作方法
查看Cookie值直接看Value列
修改Cookie值双击Value，输入新值，回车
删除Cookie右键 → Delete
添加Cookie双击空白行，填写Name和Value
清除所有Cookie右键 → Clear

测试场景：

  • 模拟Token过期：删除token Cookie
  • 模拟不同角色：修改role Cookie值
  • 测试Cookie的HttpOnly/Secure属性
② 查看LocalStorage

左侧 Storage → LocalStorage → 选择域名

Key              Value
userInfo         {"name":"张三","role":"admin"}
theme            dark
lastLoginTime    1699999999999

测试场景：

  • 验证登录信息是否正确缓存
  • 修改缓存数据看页面是否刷新
  • 验证敏感信息是否加密存储
③ 清除存储

Application面板 → Storage → Clear site data

或者用快捷键：Ctrl+Shift+Delete 打开清除浏览数据对话框

测试场景：清除缓存后，验证页面是否还能正常加载

8.3 Cookie vs LocalStorage vs SessionStorage

特性CookieLocalStorageSessionStorage
容量~4KB~5MB~5MB
有效期可设置过期时间永久（除非手动删除）关闭标签页即删除
随请求发送是（自动附带）否否
作用域同源+路径同源同源+同标签页
常用场景登录态、用户标识用户偏好、主题临时表单数据

九、测试实战场景

场景一：接口报错了，如何快速定位？

第1步：打开F12 → Network → 勾选 Preserve log
第2步：筛选 XHR/Fetch
第3步：找到红色的请求（状态码 4xx/5xx）
第4步：点击查看详情
第5步：
  - Headers → 看请求URL、方法、Header对不对
  - Payload → 看请求参数对不对
  - Preview → 看返回的错误信息是什么
第6步：截图保存，写入Bug单

场景二：页面空白/样式错乱

第1步：打开Console，看有没有红色报错
第2步：如果有JS报错，截图 → 这是Bug的直接证据
第3步：切换到Network，看有没有资源加载失败（红色状态）
第4步：筛选Img/CSS/JS，看哪些文件404了
第5步：打开Elements面板，查看DOM结构是否完整

场景三：登录失败排查

第1步：Network → 勾选 Preserve log → 清空记录
第2步：输入账号密码，点击登录
第3步：找到 login 相关的 XHR 请求
第4步：查看：
  → Request Payload：用户名密码是否传对了
  → Response：返回的code和message是什么
  → Headers → Set-Cookie：登录成功后有没有返回Token
第5步：如果登录成功但页面没跳转：
  → Console看有没有报错
  → Application看Token有没有存进去

场景四：数据展示不对——前端还是后端的问题？

第1步：Network → 找到数据接口
第2步：查看 Response
  → 如果返回数据就是错的 → 后端问题
  → 如果返回数据是对的但页面显示错 → 前端问题
第3步：后端问题：把接口URL+请求参数+返回数据截图给后端
第4步：前端问题：Console看报错 + Sources断点调试

场景五：弱网测试

第1步：Network → 节流下拉框 → Slow 3G
第2步：刷新页面
第3步：观察：
  → 页面多久能显示？（超10秒？）
  → 加载过程中有loading提示吗？
  → 有没有超时报错？
  → 有没有白屏？
  → 图片是否有占位图？
第4步：拍照/截图记录体验
第5步：恢复正常网络

场景六：没接口文档怎么测？

第1步：打开页面，F12 → Network → XHR/Fetch
第2步：在页面上执行操作（点按钮、翻页、搜索...）
第3步：观察每个接口请求的URL、参数、响应
第4步：复制cURL到Postman
第5步：在Postman里修改参数，验证各种场景
第6步：整理出接口清单，反向出文档

场景七：性能快筛

第1步：Network → 看底部状态栏：
  → 总请求数（requests）
  → 总传输大小（transferred）
  → 总加载时间（DOMContentLoaded / Load）
第2步：按 Size 排序，看哪些资源最大
第3步：按 Time 排序，看哪些请求最慢
第4步：筛选图片，看有没有超大图片

十、常见坑与排错技巧

10.1 常见坑

坑现象解决
忘记开Preserve log页面跳转后请求记录没了测试前先勾选
忘记筛选XHR请求太多找不到接口点击XHR/Fetch筛选
缓存干扰改了的代码不生效勾选Disable cache
Network没记录操作后没看到请求检查🔴按钮是否在录制状态
Console被清空报错一闪而过右键 → Preserve log
修改了DOM但刷新就没了以为数据真的改了这只是本地临时修改
复制cURL到Postman失败格式问题用Import → Raw text
弱网切不回来网一直很慢下拉框选回No throttling

10.2 快速排查法

遇到任何前端问题 → 先打开Console → 看有没有红色报错
                        ↓
                   有 → 截图 → 写Bug
                        ↓
                     没有
                        ↓
              打开Network → 看有没有失败的请求
                        ↓
                   有 → 分析原因 → 写Bug
                        ↓
                     没有
                        ↓
              用Elements检查DOM和样式 → 定位问题

10.3 关于开发者工具的语言

默认英文界面可切换为中文：

  1. F12 → 右上角 ⚙️（设置）
  2. Preferences → Language → 选择"中文"
  3. 重新打开开发者工具

建议入门阶段用中文，熟悉后用英文（面试和文档通常用英文术语）。

十一、总结

核心速查

我要做什么用哪个面板
看页面元素和样式Elements
看JS报错Console
抓接口请求Network（点XHR筛选）
看Cookie/StorageApplication
断点调试Sources
模拟手机左上角 📱 图标
弱网测试Network → 节流下拉框
导出接口到PostmanNetwork → 右键 → Copy as cURL
清除缓存Application → Clear site data

测试工程师F12技能自检清单

□ 能打开F12并切换面板
□ 能用Elements修改文字和样式
□ 能看Console里的JS报错
□ 能筛选XHR请求
□ 能查看请求的URL、参数、Header、响应
□ 能根据响应判断是前端还是后端问题
□ 能复制cURL到Postman
□ 能模拟弱网
□ 能查看和修改Cookie
□ 能查看LocalStorage
□ 能用手机模拟模式
□ 能截图保存为Bug证据

记忆口诀

F12一按看乾坤，
Elements看元素，Console看报错，
Network抓接口，XHR筛请求，
Application看存储，Sources断点调。
测试不掌握这个，Bug写得不硬气。

下一篇预告：新系列第五篇——「Linux基础命令：测试必会的环境操作与日志排查」，带你从零掌握测试环境部署、日志查看、权限管理等必备技能。

本文约6000字，是「测试基础系列」第4篇。本系列旨在为零基础测试新人提供最实用的技能指南，所有示例均来自真实工作场景。

# 前端
Logo
乐奇 Rokid 开放社区

更多推荐

用径向菜单完成 macOS 窗口管理的 Loop 上手指引

周三上午，你要同时摆好代码、终端、文档三个窗口。别急着来回拖拽，先按住触发键，把鼠标指向屏幕右侧，窗口就落进了右半屏。这就是 macOS 窗口管理工具 Loop，它用径向菜单和预览窗口，替掉了繁琐的拖边操作。## 🚀 5 步装好 Loop 并完成第一次窗口调整**第 1 步：安装**用 Homebrew 一行装好：```brew install loop```也可以克隆源

avatar 乐奇 Rokid 开放社区

Plate 模板 CI 修复实战：Registry 辅助依赖与 RSC 客户端边界的完整排查指南

本文以 Plate 仓库中 [2026-04-06-fix-template-ci-registry-helper-deps.md](https://link.gitcode.com/i/4790f561dac586c6b2e17e1cadaa2911) 这份修复计划为骨架，完整复盘一次"模板 CI 构建失败"的真实排查过程：注册表（registry）UI/插件重构引入了一批辅助文件后，`plat

avatar 乐奇 Rokid 开放社区

llmfit 姊妹项目生态：sympozium、llmserve 与 llama-panel 完整指南

**llmfit** 是一个帮你确认本地硬件能跑哪些开源大模型的实用工具：它自动检测 CPU、内存、GPU 和显存，为数百个模型打分排序。但它并不是孤立的——项目 README 的 "Sister projects" 章节列出了三到四个姊妹项目：**sympozium、llmserve、llama-panel**（以及 llmfit-gui），分别补齐了"选模型 → 跑服务 → 管实例 → 上集群

avatar 乐奇 Rokid 开放社区