目录
新手必看
1.对浏览器有要求吗？
推荐用谷歌或其他主流浏览器，熟悉界面。
2.准备工作
现在打开电脑，双击下载好的浏览器进入网页吧。
一、 初步认识F12
1、怎么启动F12
只需几个小步骤，就能轻松开启F12。
1.快捷键启动：最直接的方式，按下键盘上的F12键。
2.鼠标操作：右键点击页面，选择“检查”。
3.菜单导航：在浏览器菜单中找到“更多工具”，然后点击“开发者工具”。
4.快捷组合键：Ctrl+Shift+I，开发者工具立即出现。
了解一下即可，实际工作里面都是按下键盘。
2、F12 常规设置
1) 显示位置调整
调整F12开发者工具的显示位置和布局
2) 语言切换
点击设置后选择要切换的语言，关闭后再次打开语言成功切换。
中英文对照，本图片来自网络。
3) 手机版本切换
设置为适合测试H5页面小程序测试，可以方便在电脑操作和调试；也可以选择尺寸和不同的手机型号。
二、 F12 里的具体模块了解
1、Elements 元素（用的少）
可用于页面结构分析，也可用于自动化脚本的元素定位；或者页面元素分析(元素大小，元素布局等)。前端页面-html页面，标签语言。
1) 查看元素的代码
点击左上角的箭头图标(或者快捷键Ctrl+Shift+C)进入选择元素模式，从页面中选择需要查看的元素，然后可以在开发者工具元素(Elements)一栏中定位到该元素源代码的具体位置。
2) 查看元素的属性
通过F12开发者工具成功定位到某个元素的源代码，获取到元素信息，可以方便ui自动化测试时候的元素定位。
3) 修改元素的代码与属性
F12开发者工具，支持编辑元素的HTML，双击代码即可编辑，可以即时看到更改的效果，而不必担心影响服务器的源代码。
2.Console控制台
可以查看页面上的错误信息、可以打印调试信息(console.log())、可以写一些测试脚本，还可以当作JavaScript API查看用。不要怕，一般测试用不上，知道干嘛的就行。
3.Sources 源代码
在Sources标签里，是web页面实现的一部分源代码，主要是JS文件、CSS文件、图片等。了解即可。
4、Network 网络（重点内容）
这是平时测试用的最多的部分，也就是常说的抓包。
每次找到web端bug的时候，第一反应就是赶紧打开：F12，看看能不能抓到数据。
2.1.Headers页签
1.General（常规）
(1)Request Ur:请求地址
(2)Request Method:请求类型，本图中实例为GET
(3)Status Code: 响应状态码
(4)Remote Address:域名对应的真实ip:port
2.Request Headers（请求标头）
(1)Accept: 客户端/发送端能够接收的数据类型
例如: text/html, application/xhtml+xml, application/xml;q=0.9,image/avif，image/webp,image/apng，/；q=0.8, application/signed-exchange；v=b3;q=0.9
(2)Accept-Encoding:浏览器可以支持的web服务器返回内容压缩编码类型 gzip,deflate
(3)Accept-Language:浏览器可接收的语言
例如:zh-CN,zh;q=0.9
(4)Cache-Contro1: 请求和响应遵循的缓存机制，当前请求的Cache-Control不会影响另一个请求的缓存处理。
(5)Connection:是否保持与服务器的tcp(传输控制协议)长连接。keep-alive代表服务会保留当前连接一段时间被其他请求重复使用:close代表请求之后关闭连接。
(6)Connectin-length:请求体的长度
(7)Content-type:请求内容的格式/类型
(8)Cookie:客户端缓存的Cookie，在请求发送时会发送到服务端
(9)Host: 请求的服务器域名
(10)Referer: 当前请求的来源
(11)User-Agent: 发出请求的客户端信息
3.Response Headers
(1)Cache-Control: 请求和响应遵循的缓存机制
(2)Connection:是否保持与服务器的tcp长连接。keep-alive(默认)、close。keep-alive代表服务会保留当前连接一段时间被其他请求重复使用;close代表请求之后关闭连接。
(3)Content-Type: 响应内容的格式/类型
text/html;charset=UTF-8 标识返回的内容是文本类型,html格式
(4)Content-Encoding:web服务器支持的返回内容压缩编码类型
(5)Content-Language:响应体的语言
(6)Content-Length:响应体的长度
(7)Date:消息发出时间(GMT)
(8)Expires:响应过期时间
(9)Vary:提示使用缓存响应还是从原始服务器请求，即当缓存中存在一个未过期的响应是否能被后续的请求服用
2.2.Preview页签
Preview页签展示请求响应后的预览
2.3.Response页签
Response页签显示响应的具体内容
2.4.Cookie页签
Cookie页签以key-value的形式展示客户端所有的cookie信息
2.5.Timing页签
Timing页签展示的是从请求开始到响应结束整个过程每个阶段经历的时间
三、实际运用场景
1.分析接口请求，协助做接口测试
开发无法提供接口文档的情况下，测试可以通过抓包获取接口信息 ；
2.辅助定位前后端问题
通过抓包可以获取接口请求与响应信息，定位是前端还是后端问题；
四、抓包常见面试题：
1.如何定位前后端BUG？
首先确认bug是不是页面排版布局导致的错误，比如兼容性测试问题，可以通过肉眼对比发现；对于有前后端数据交互的bug，可以通过抓包工具进一步分析问题。先检查抓取的请求是否正确，可以通过跟接口文档做对比，确认接口地址、传参是否跟接口文档一致；如果是正确的，进一步检查接口的响应，如果响应内容不正确，那可能是后端逻辑处理问题，需要进一步查看日志、数据库来定位具体的问题。如果响应内容正确， 但是前段没有正确展示，那么是前端展示的问题。
2、F12可以修改请求或响应吗？
可以。
修改请求步骤：
1.打开 Network 面板 → 找到目标请求 → 右键选择 Copy → Copy as fetch。
2.在 Console 中粘贴代码，修改参数后执行；修改响应步骤；
响应修改步骤
1.打开 Network 面板 → 找到目标请求 → 右键选择 Save for overrides。
2.在 Sources → Overrides 中编辑保存的响应文件（如 .json）。
3.刷新页面，浏览器会返回你修改后的响应。
响应的步骤我没有复现成功，面试的时候可以稍微提一下不要详细讲。
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
