软件测试最常用的 3 个浏览器 F12 模块

🌐Network 网络面板

接口与性能分析

请求筛选：按 Fetch/XHR 过滤，3 秒内定位接口请求。
导出：Copy as cURL / Export HAR，接口一键复现到 Postman
性能排查：Timing 标签可拆解 DNS / TCP / TTFB 耗时
环境模拟：Disable cache + 弱网，提前暴露线上问题

🎨Elements 元素面板

UI 与样式的精准操控

常见用途：样式问题复现、元素定位确认、自动化脚本 selector 验证
快速定位：使用左上角选择器按钮，一键精准定位页面元素信息。
元素编辑：右键支持 Edit as HTML 或 Edit attribute，无需修改源码即可实时验证页面改动。
自动化利器：右键 Copy 功能可快速获取 XPath、Selector 或 JS path，是编写自动化测试脚本的必备操作。
样式调试：在 Styles 面板可实时修改 CSS 属性，利用勾选框快速切换样式状态。

📊Console 控制台

逻辑调试与数据可视化

控制台不只是打印日志，更是交互式调试环境。
日志：红字 Error / Warning 快速定位异常
在线脚本运行：临时 JS 验证、变量检查（支持 Tab 补全）
⚠️ 若无法粘贴代码，输入 allow pasting 即可开启权限。

💡 F12 快速排查总结口诀

  ❗  页面报错：先看 Console 红字
🌐 接口异常：看 Network 状态码 + Response
 ⏱ 性能问题：盯 Timing 的 TTFB

转自： 小红书，测试老江