分分钟学会 F12 抓包图文教程

简介: ​一、步骤1)打开浏览器(本文以谷歌浏览器为例)2)按“F12”或者鼠标右键选择“检查”,点击右上角的“设置”小齿轮图标,英文切换中文,具体如下图所示(此步骤和接下来的3)为浏览器控制台为英文状态下的设置,若已设置为中文可跳过此步骤和3)步骤)3)点击右上角“X”关闭图标按钮,关闭浏览器控制台,再次进入开发者选项(F12或者右键检查),此时浏览器控制台界面语言从英文变成中文页面,如下图所示二、Tabs介绍1)切换到网络tab下第一个按钮:停止和开启按钮,默认是开启抓包第二个按钮:清空抓包记录第三个按钮:过滤器,可以通过搜索想要的关键字第四个按钮:保留日

一、步骤

1)打开浏览器(本文以谷歌浏览器为例)


2)按“F12”或者鼠标右键选择“检查”,点击右上角的“设置”小齿轮图标,英文切换中文,具体如下图所示(此步骤和接下来的3)为浏览器控制台为英文状态下的设置,若已设置为中文可跳过此步骤和3)步骤)


3)点击右上角“X”关闭图标按钮,关闭浏览器控制台,再次进入开发者选项(F12或者右键检查),此时浏览器控制台界面语言从英文变成中文页面,如下图所示


二、Tabs介绍

1)切换到网络tab下


第一个按钮:停止和开启按钮,默认是开启抓包

第二个按钮:清空抓包记录

第三个按钮:过滤器,可以通过搜索想要的关键字

第四个按钮:保留日志(建议必须勾上,不然有些跳转页面无法抓取)

第五个按钮:停用缓存

第六个按钮:弱网模拟


三、怎么抓到正确的包

    • 在页面上把所有前置操作做完
    • 在F12里面清除掉之前的抓包记录
    • 开始抓包
    • 进行目标操作(查询)
    • 停止抓包

    四、怎么看懂你抓的包

    http/https协议包的基本组成


      • 请求信息:

      请求网址:包的网络地址

      请求方法:发包方式

      状态代码:http状态码

        • 参数:前端传递给服务器的信息


        • 响应:服务器返回给前端的结果信息


        • 头:请求头:本次请求需要的验证信息
                响应头:本次请求产生的验证信息,别的请求可能用到



        若本文有帮助到阅读本文的同学,欢迎点赞、关注、收藏,互相学习交流。

        相关文章
        |
        4月前
        |
        监控 前端开发 网络协议
        《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(5)-Fiddler监控面板详解
        【7月更文挑战第20天】Fiddler是一款强大的HTTP协议调试代理工具,它的监控面板是核心功能,记录服务器的请求会话,包括HTTP和HTTPS。监控面板分为多个标签,如统计数据(Statistics)展示性能指标,Inspector用于查看请求和响应的详细内容,AutoResponder允许重定向请求到本地资源,Composer用于构造和调试HTTP请求,还有Orchestra Beta、Fiddler Script、Log和Filters等功能。
        183 14
        《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(5)-Fiddler监控面板详解
        |
        4月前
        |
        缓存
        《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(6)-Fiddler状态面板详解
        【7月更文挑战第21天】Fiddler状态面板详解:开启/关闭捕获(F12),筛选All Processes/Web Browsers/Non-Browser/Hide All,断点控制请求或响应暂停。显示捕获的session总数及选中数量,URL预览。QuickExec命令行(Alt+Q)支持多种命令和快捷键操作,如`?text`, `>size`, `<size`, `=code`, `@host`, `select type`, `cls`, `dump`, `start`, `stop`,便于快速管理和清理会话。
        50 3
        《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(6)-Fiddler状态面板详解
        |
        4月前
        |
        XML JSON 网络协议
        《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(7)-Fiddler状态面板-QuickExec命令行
        【7月更文挑战第22天】Fiddler成了网页调试必备的工具,抓包看数据。Fiddler自带命令行控制,并提供以下用法。Fiddler的快捷命令框让你快速的输入脚本命令。除了输入默认命令,也可以自定义命令,你可以通过编辑 FiddlerScript 来增加新命令,找到 OnExecAction 函数增加新命令。多数命令是存在本地 CustomRules.js 文件中,如果不是最新版 Fiddler,可能没有最新的命令。
        57 2
        《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(7)-Fiddler状态面板-QuickExec命令行
        |
        4月前
        |
        Web App开发 监控 前端开发
        《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(2)-初识Fiddler让你理性认识一下
        【7月更文挑战第17天】Fiddler是一款强大的HTTP(S)抓包与调试工具,适用于Windows,免费且跨平台,可用于查看、分析、修改客户端与服务器之间的数据包。它在开发和测试中尤其有用,帮助定位bug、进行接口测试、模拟数据、分析性能。Fiddler支持HTTPS解密和移动设备抓包,与其他抓包工具如Wireshark、Charles相比,它更易用且支持移动应用。通过设置代理,Fiddler能监控所有通过的HTTP流量,包括请求和响应,允许设置断点和篡改数据。对于初学者,它是理解HTTP协议和解决网络问题的利器。
        179 3
        |
        6月前
        |
        监控 前端开发 网络协议
        《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(5)-Fiddler监控面板详解
        【2月更文挑战第7天】《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(5)-Fiddler监控面板详解 按照从上往下,从左往右的计划,今天就轮到介绍和分享Fiddler的监控面板了。监控面板主要是一些辅助标签工具栏。有了这些就会让你的会话请求和响应时刻处监控中毫无隐私可言。监控面板是fiddler最核心的功能之一。记录了来自于服务器端(webServer)的请求会话。包括页面的请求和静态文件的请求。状态面板主要显示的是会话及会话的状态。位于软件界面右边的这一大块面板,即为辅助标签 + 工具,宏哥称之为监控。
        172 0
        |
        6月前
        |
        XML JSON 网络协议
        《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(7)-Fiddler状态面板-QuickExec命令行
        【2月更文挑战第8天】《吐血整理》保姆级系列教程-玩转Fiddler抓包教程(7)-Fiddler状态面板-QuickExec命令行
        68 5