1. 项目概述当QA遇上Vibe Coding作为一名在测试一线摸爬滚打了十多年的老QA我深知一个趁手的抓包工具对我们有多重要。无论是排查前后端接口数据不一致还是复现线上偶现的诡异Bug抓包分析都是我们定位问题的“火眼金睛”。但现实情况是市面上主流的抓包工具如Fiddler、Charles、mitmproxy功能虽强大却各有各的“脾气”。Fiddler在Windows上如鱼得水到了Mac上就水土不服Charles的证书配置对新手来说是个不小的门槛而mitmproxy命令行操作对零代码基础的同事来说简直是天书。我们常常需要在这些工具间切换或者忍受某些不顺手的功能效率大打折扣。最近一个叫“Vibe Coding”的概念火了起来。简单说它就是一种通过自然语言描述需求让AI比如DeepSeek、豆包等大模型直接生成可运行代码的开发方式。这让我眼前一亮我们这些日常跟测试用例、需求文档打交道的QA大多没有深厚的编程功底但我们对测试场景、对工具的需求痛点却了如指掌。能不能用Vibe Coding为自己量身定制一款抓包工具呢一款能同时监听HTTP/HTTPS、界面直观、过滤方便、还能一键导出报告的工具这个想法让我很兴奋。经过一番摸索和实践我真的用Vibe Coding“拼”出了一款足够好用的抓包工具原型。整个过程我没有写一行传统意义上的代码全靠和AI“对话”来完成。这篇文章我就把这套方法、踩过的坑以及最终成型的工具思路完整地分享出来。无论你是零代码基础的测试新人还是想提升效率的资深QA相信都能从中获得启发打造属于你自己的“瑞士军刀”。2. 核心思路与方案选型为什么是Vibe Coding mitmproxy决定动手之前我先盘点了需求和现有方案。我们的核心诉求很明确图形化界面、支持HTTPS解密、请求/响应过滤、数据搜索、导出功能。市面上成熟的抓包工具底层无一例外都依赖于代理服务器和SSL/TLS中间人攻击技术。这意味着我们没必要从零发明轮子而是应该找一个可靠、开源的核心库然后为它套上一个我们喜欢的“壳”。2.1 底层核心库选型mitmproxy的胜出我评估了三个常见的底层库FiddlerCore.NET库功能强大但绑定Windows平台且授权复杂。Charles的Java版本并未提供独立的可嵌入库主要是商业桌面应用。mitmproxyPython编写完全开源不仅是一个工具更是一套完整的、可编程的代理框架。它提供了mitmproxy命令行工具、mitmdump数据导出工具以及最重要的mitmproxy的Python库允许你通过编写插件addon来深度定制每一个请求和响应的处理逻辑。对于Vibe Coding来说mitmproxy几乎是唯一选择。原因有三第一Python是AI大模型生成代码最熟练、最可靠的语言之一生态丰富出错率低。第二mitmproxy的文档和社区非常活跃任何遇到的问题几乎都能找到答案或思路。第三它的架构清晰事件驱动模型如request、response事件非常容易理解我们只需要告诉AI“当收到请求时把数据存起来并显示在表格里”AI就能生成对应的代码框架。2.2 图形界面选型Tkinter的务实之选确定了“发动机”mitmproxy接下来要选“驾驶舱”UI。Python的GUI库很多PyQt/PySide功能强大但复杂打包后体积大Kivy适合移动端Web技术如Flask浏览器需要启动服务稍显笨重。 对于我们的定制化工具Tkinter脱颖而出。它是Python的标准库无需额外安装AI对其生成代码的掌控力非常强。虽然界面复古但实现列表、按钮、文本框、菜单等核心组件绰绰有余。我们的目标是“好用”而非“好看”Tkinter完全满足需求且最终打包成单个可执行文件如用PyInstaller也非常方便。2.3 Vibe Coding工作流设计方案定了怎么用Vibe Coding实现我总结了一个高效的工作流分治不要求AI一次性生成整个复杂程序。而是将大项目拆解成独立的小模块例如“设计主窗口布局”、“实现请求列表显示”、“集成mitmproxy核心并启动代理”、“实现HTTPS证书安装指引”、“添加过滤搜索功能”。精准描述给AI的指令Prompt必须具体、清晰包含输入、处理、输出的期望。例如不是“给我一个表格”而是“使用Tkinter的Treeview组件创建一个表格表格有这些列序号、方法、URL、状态码、耗时、大小。当有数据来时插入新行。”迭代与调试AI生成的代码很少能一次完美运行。我们需要扮演“测试员”和“产品经理”的角色运行代码看报错信息然后将错误日志或异常现象反馈给AI让它修正。这个过程本身就是一种“对话式开发”。基于以上思路我们的技术栈最终确定为Python mitmproxy核心库 TkinterUI通过Vibe Coding我主要使用了DeepSeek进行串联开发。注意这里有一个关键点mitmproxy本身是一个独立的进程我们的Tkinter GUI是另一个进程。如何让它们通信我采用了线程队列的方式。在GUI应用中启动一个线程来运行mitmproxy并通过mitmproxy的addon将抓到的数据放入一个队列GUI主线程定时从队列中取数据并更新UI。这个架构思路需要提前明确并在给AI的指令中说明。3. 分步实现与核心代码解析下面我将按照实际开发顺序拆解各个核心模块的实现。你可以把这些Prompt和代码思路当作模板直接用于你的AI对话。3.1 第一步构建图形化主界面骨架首先我们需要一个能看见、能操作的窗口。我给AI的Prompt如下 “请用Python Tkinter创建一个窗口标题为‘QA抓包工具’。窗口布局分为上中下三部分顶部是工具栏放置‘开始抓包’、‘停止抓包’、‘清除日志’按钮和过滤输入框中间主体部分是一个表格Treeview用于显示抓到的HTTP请求列表列包括ID、方法、URL、状态码、内容类型、大小底部是一个多行文本框Text用于显示选中某条请求的详细内容包括请求头和响应头。请使用grid或pack布局管理器确保界面整洁。”AI通常会生成一个结构清晰的代码。这里我强调几个需要手动调整或注意的关键点Treeview样式优化AI生成的Treeview可能没有滚动条或者列宽不合适。你需要补充指令“为表格添加垂直和水平滚动条并设置每列的初始宽度让URL列更宽一些。”数据存储结构我们需要在内存中保存抓到的数据以便在表格和详情框之间联动。我会定义一个全局列表如request_list []来存储字典格式的请求数据字典的键对应表格的每一列。事件绑定需要告诉AI为Treeview绑定事件例如TreeviewSelect当用户点击表格某一行时底部详情框应显示该请求的详细信息。Prompt可以是“为Treeview组件绑定选择事件当用户选中一行时从request_list中根据ID找到对应的请求数据并将其请求头和响应头格式化后显示在底部的Text组件中。”3.2 第二步集成mitmproxy并实现数据捕获这是最核心的一步。我们需要在后台启动mitmproxy并捕获所有流经的请求。首先安装依赖。在项目目录下你需要一个requirements.txt文件内容为mitmproxy10.0通过pip install -r requirements.txt安装。然后编写mitmproxy插件。我给AI的Prompt较长但必须详细 “请编写一个mitmproxy的addon插件命名为CaptureAddon。这个addon需要做两件事1. 在request事件中捕获请求的method、url、headers并生成一个唯一ID。2. 在response事件中捕获状态码、响应头、响应体大小和内容类型。请将每次请求和对应的响应信息组合成一个字典对象。为了能让Tkinter界面获取到这些数据请使用一个queue.Queue队列。将这个字典放入队列中。同时请确保这个addon能处理HTTPS流量这意味着不需要在addon内做额外配置但主程序需要能引导用户安装mitmproxy的根证书。”AI生成的addon.py代码骨架会类似这样# addon.py import queue from mitmproxy import http class CaptureAddon: def __init__(self, data_queue: queue.Queue): self.data_queue data_queue self.request_map {} # 临时存储请求信息用flow.id关联 def request(self, flow: http.HTTPFlow): # 存储请求信息 request_id f{flow.id}_{flow.request.timestamp} self.request_map[flow.id] { id: request_id, method: flow.request.method, url: flow.request.pretty_url, request_headers: dict(flow.request.headers), timestamp: flow.request.timestamp } def response(self, flow: http.HTTPFlow): # 关联请求组合完整信息 req_info self.request_map.pop(flow.id, {}) if req_info: response flow.response item { **req_info, status_code: response.status_code, content_type: response.headers.get(Content-Type, ), size: len(response.content) if response.content else 0, response_headers: dict(response.headers), # 注意谨慎保存响应体可能很大。可以只保存文本类型的预览。 response_preview: self._get_preview(response) } # 放入队列供GUI消费 self.data_queue.put(item) def _get_preview(self, response): # 一个简单的预览生成函数只处理文本内容 content_type response.headers.get(Content-Type, ).lower() if json in content_type or text in content_type: try: return response.content.decode(utf-8, errorsignore)[:500] # 只取前500字符 except: pass return [Binary Data]接着在GUI中启动mitmproxy线程。我们需要修改主程序在点击“开始抓包”按钮时在一个独立线程中启动mitmproxy。 Prompt“在Tkinter程序中为‘开始抓包’按钮编写事件处理函数。点击后在一个新线程中启动mitmproxy。启动命令需要1. 指定代理监听的端口如8080。2. 加载我们刚才写的CaptureAddon插件并将一个队列实例传递给它。3. 设置quietTrue以减少控制台输出。请确保线程能正确启动和停止当点击‘停止抓包’按钮时能安全地关闭mitmproxy。”关键代码段会涉及线程管理和mitmproxy的options、master等对象AI可能会需要几次调试才能生成正确代码。核心是学会使用from mitmproxy import options, master和from mitmproxy.tools.dump import DumpMaster。3.3 第三步实现GUI与抓包数据的联动数据在队列里UI需要定时去取。这里我们需要一个定时任务。 Prompt“在Tkinter主窗口类中添加一个方法例如update_request_list。使用after方法每100毫秒调用一次自己。在这个方法里从与CaptureAddon共享的数据队列中尝试获取所有新到达的请求数据。如果取到数据就将其追加到request_list中并在Treeview表格中插入新的一行。同时更新状态栏显示抓包数量。”这个环节要注意线程安全。Tkinter的UI操作必须在主线程中进行。我们的队列queue.Queue是线程安全的所以从队列取数据这个操作在after回调函数在主线程执行中进行是安全的。取到数据后直接操作request_list和Treeview即可。3.4 第四步处理HTTPS解密与证书安装这是让很多新手QA头疼的问题。mitmproxy要解密HTTPS流量必须在客户端手机或浏览器安装其根证书。 我们的工具不能指望用户自己去命令行生成证书必须提供一键式或向导式的安装指引。我的做法是在工具内提供证书生成与查看功能。Prompt“在菜单栏添加一个‘证书’菜单其下有一个‘安装根证书’选项。点击后执行以下步骤首先检查用户目录下是否存在mitmproxy的证书文件通常位于~/.mitmproxy/mitmproxy-ca-cert.pem。如果不存在则弹窗提示用户需要先启动一次抓包工具以自动生成证书。如果存在则用Tkinter的filedialog和messagebox引导用户将证书文件复制到桌面并弹出详细的操作说明图文并茂说明如何将证书安装到手机描述通用路径或电脑浏览器。”编写详细的指引文档。这部分可以提前写好放在一个帮助对话框里。内容包括iOS安装描述如何通过Safari访问http://mitm.it下载证书后到“设置-通用-关于本机-证书信任设置”中启用完全信任。Android安装描述如何通过浏览器访问http://mitm.it下载证书后在设置中搜索“安装证书”或“CA证书”进行安装不同品牌路径不同需给出常见品牌的查找关键词。Windows/浏览器安装引导用户将.pem文件导入到系统的受信任根证书颁发机构。实操心得证书安装是成功率的关键。我在工具里直接内置了一个简单的HTTP服务器当用户点击“生成安装指引”时自动在本地启动一个页面用更直观的HTML页面展示针对不同设备的安装步骤截图和视频链接可以是录制好的GIF这比纯文字说明体验好得多。这个HTTP服务器也可以用Vibe Coding让AI生成就是一个简单的Pythonhttp.server指向一个我们准备好的静态HTML目录。3.5 第五步增强功能——过滤、搜索与导出基础抓包功能有了接下来是提升效率的增强功能。过滤工具栏上的过滤输入框可以实时过滤表格中显示的请求。Prompt“为过滤输入框绑定KeyRelease事件。每当输入框内容变化时遍历request_list将URL或方法包含输入文本的请求重新显示在Treeview中隐藏不匹配的项。” 这里注意性能如果请求量很大需要做防抖处理比如延迟300毫秒再执行过滤。搜索实现一个独立的搜索对话框可以搜索请求头、响应体中的内容。这需要遍历request_list中保存的response_preview和request_headers。Prompt“创建一个新的Toplevel窗口作为搜索框。提供一个输入框和一个‘搜索’按钮。点击按钮后在新的窗口中列出所有请求URL、请求头或响应预览中包含搜索关键词的条目并支持点击跳转到主窗口的对应请求。”导出这是报告的关键。QA经常需要把抓包记录保存下来。Prompt“在菜单栏添加‘导出’菜单支持两种格式1. 导出为JSON完整数据便于程序分析。2. 导出为HTML报告便于阅读和分享。HTML报告可以用Jinja2模板生成模板需要展示请求列表和每个请求的详情。” 你可以让AI先写一个简单的Jinja2 HTML模板然后让AI写代码将request_list数据渲染进去并保存为文件。4. 常见问题、调试技巧与避坑指南用Vibe Coding开发整个过程就是与AI不断调试、磨合的过程。我遇到了不少典型问题这里分享出来帮你节省时间。4.1 mitmproxy启动失败或无法抓包问题点击开始后控制台报错Address already in use。原因端口默认8080被其他程序如你之前打开的Charles、Fiddler或其他mitmproxy实例占用。解决在工具设置里增加端口配置选项或提示用户更换端口如8081, 8888。Prompt“修改启动mitmproxy的代码从界面的一个Spinbox组件中读取端口号而不是写死8080。”问题工具显示已启动但手机/浏览器设置代理后无法上网。原因1电脑防火墙阻止了mitmproxy。解决在防火墙设置中允许Python或你打包后的可执行程序通过防火墙。原因2代理设置不正确。解决在工具界面明确显示“代理服务器地址本机IP:端口”例如192.168.1.100:8080并提供“复制地址”按钮。指导用户必须在同一局域网下设置代理。4.2 HTTPS流量显示为Tunnel to或无法解密问题抓到的HTTPS请求URL列显示为Tunnel to xxx:443没有具体的请求路径。原因客户端手机/浏览器没有正确安装或信任mitmproxy的根证书。这是最常见的问题。解决确保你的工具已成功引导用户安装了证书。对于iOS必须额外在“设置-通用-关于本机-证书信任设置”里启用对mitmproxy证书的完全信任这一步极易被忽略。对于某些App如银行类、强校验的App它们可能使用了证书绑定技术会拒绝mitmproxy的证书。这种情况下常规抓包无效需要更高级的逆向手段这超出了本工具的范围。在工具帮助文档中应说明这一点。4.3 GUI界面卡顿或无响应问题抓包一段时间后界面卡死或者滚动表格时很卡。原因UI线程被阻塞或数据量太大导致Treeview操作变慢。解决确保耗时操作在独立线程启动/停止mitmproxy、导出报告等操作必须放在单独线程避免阻塞Tkinter主循环。优化数据存储与显示request_list不要无限制增长可以提供“清除”按钮。对于Treeview可以尝试只显示最近N条如500条请求更早的存入文件或内存数据库如sqlite。AI可以帮你写一个带最大长度限制的列表管理逻辑。使用after进行异步更新我们已经用了after来更新UI这是正确的。确保在update_request_list方法中每次从队列取数据的操作要快如果队列里积累了太多数据可以分批取出比如一次最多处理10条。4.4 Vibe Coding过程中的调试技巧精准报错当AI生成的代码运行出错不要简单地说“代码错了”。把完整的错误信息Traceback复制给AI。AI能根据错误信息精准定位问题所在比如是导入错误、变量未定义还是逻辑错误。分步验证不要等所有模块都写完再测试。每让AI生成一个功能模块如按钮点击事件、表格更新函数就立刻运行测试一下。确保这个小模块是work的再继续下一个。提供上下文当你要求AI修改或添加功能时最好把相关的那段代码也贴给它并说明“在以下代码的基础上请添加...功能”。这能避免AI凭空想象生成不兼容的代码。自己理解逻辑不要完全做“甩手掌柜”。AI生成的代码你要尽量去读懂它。这不仅能帮你排查问题更是你学习的过程。下次遇到类似需求你甚至能自己修改几行代码就搞定。5. 打包分发与后续迭代当你的工具开发完成你肯定想把它分享给组里的其他QA同事他们可能没有Python环境。打包成可执行文件使用PyInstaller。这是另一个可以用Vibe Coding完成的步骤。创建一个spec文件或直接使用命令行。Prompt“我有一个Tkinter程序主文件是main.py依赖了mitmproxy。请给出使用PyInstaller将其打包为单个Windows可执行文件exe的命令并处理可能遇到的隐藏导入问题。”典型的命令是pyinstaller --onefile --windowed --add-data “./cert_help;cert_help” main.py。其中--add-data是为了包含我们之前做的证书帮助文档的静态资源文件夹。后续迭代你的工具1.0版上线后同事们会给你反馈。“能不能加一个重放请求的功能”“能不能对比两次请求的差异”“能不能自动生成接口测试用例” 这些都可以作为2.0、3.0版本的需求。因为核心框架已经搭好每个新功能都可以作为一个独立的模块继续用Vibe Coding的方式去实现。例如“重放请求”功能其实就是从request_list中取出某条请求的历史数据再用requests库按照原样发出去。把这个需求描述给AI它就能帮你生成一个带参数设置的“重放”对话框和对应的执行代码。整个过程下来我从一个只会提需求的QA变成了一个能为自己团队打造专属工具的“开发者”。这种成就感远超于找到一个严重的Bug。Vibe Coding并没有让我变成真正的程序员但它给了我一把“翻译”的钥匙把我对测试工作的深刻理解翻译成了实实在在的生产力工具。如果你也在为找不到顺手的工具而烦恼不妨现在就打开你的AI对话窗口从一句“我想用Python和Tkinter创建一个简单的窗口”开始你的定制化抓包工具之旅或许就在今天启程。