Skip to content

usage-guide.md

Latest commit

 

History

History
424 lines (297 loc) · 16.7 KB

usage-guide.md

File metadata and controls

424 lines (297 loc) · 16.7 KB
Raw

http helper 使用教程

目录

  1. 简介
  2. 安装方法
  3. 界面说明
  4. 基本使用
  5. 功能详解
  6. 会话提取功能
  7. 常见问题
  8. 技术信息

简介

http helper 是一款 Chrome 开发者工具扩展，用于捕获并展示浏览器发出的 HTTP 请求和响应的原生报文内容。它支持：

  • 实时捕获 Network 面板中的请求
  • 多视图展示：Raw（原生）、Pretty（格式化）、Hex（十六进制）
  • 智能标签切换：根据 Content-Type 自动选择最佳视图
  • 多种布局模式：垂直、水平、标签页
  • 全文搜索与高亮导航（每面板独立搜索栏）
  • 会话信息自动提取（支持 Full/Substring/Regex/Keyword/XPath/JSONPath 模式，支持响应头/响应体）
  • 请求颜色标记与备注功能
  • 高级过滤：按方法/类型/颜色/关键词/正则/反向过滤，XHR 快捷过滤
  • 行复制：点击行号复制当前行，支持 Ctrl+Shift+C 快捷键
  • 软换行与换行符可视化：切换长行自动换行，显示/隐藏行尾 ↵ 标记
  • 可配置列显示与列排序
  • 全屏模式查看报文详情
  • 面板大小拖拽调整
  • 录制暂停/恢复控制
  • 二进制响应体自动识别与下载（智能文件命名）
  • 工具栏弹出页：点击扩展图标显示版本信息与调试开关
  • 调试日志：模块化调试日志，通过 popup 面板可视化开关控制
  • 左侧显示行号，方便定位报文内容
  • 一键复制原生报文到剪贴板
  • 一键下载原生报文为文本文件
  • 自动适配系统亮/暗主题

安装方法

方式一：加载已解压的扩展程序（开发者模式）

  1. 打开 Chrome 浏览器，在地址栏输入 chrome://extensions/ 并回车
  2. 在右上角打开 开发者模式 开关
  3. 点击左上角的 加载已解压的扩展程序 按钮
  4. 选择本项目的根目录（即包含 manifest.json 的文件夹，注意不是 src 目录）
  5. 安装成功后，扩展图标会出现在扩展列表中

方式二：打包为 .crx（可选）

  1. 在 chrome://extensions/ 页面点击 打包扩展程序
  2. 选择项目根目录，点击 打包扩展程序
  3. 生成的 .crx 文件可拖拽安装到 Chrome 中

界面说明

安装成功后，打开任意网页，按 F12 或 Ctrl+Shift+I 打开 Chrome 开发者工具，在顶部标签栏中找到 http helper 标签。

面板整体分为三个区域：

区域 位置 说明
工具栏 顶部 包含录制切换、清空、请求计数
请求列表 左侧 显示已捕获的所有 HTTP 请求，支持过滤、排序、颜色标记
报文详情 右侧 请求报文和响应报文，支持多视图、搜索高亮

工具栏按钮

  • 录制切换：点击红色圆形按钮切换录制/暂停状态。录制中时按钮呈脉冲动画效果
  • 清空（垃圾桶图标）：清空所有已捕获的请求
  • 请求计数：右侧显示当前捕获的请求数量

弹出页（popup）

点击浏览器工具栏的 http helper 扩展图标，弹出窗口显示：

  • 扩展名称与版本号：当前安装的扩展版本
  • DevTools 入口指引：提示按 F12 打开 DevTools 使用面板
  • 调试模式开关：开启后在 DevTools 控制台输出详细调试日志（如会话提取过程、字段匹配等）

请求列表项

请求列表以表格形式展示，默认显示以下列（可通过列配置调整可见性）：

  • #：序号
  • 标签：颜色标记圆点（点击可设置/清除颜色）
  • Method：HTTP 方法（GET、POST 等）
  • Host：请求主机名
  • Path：请求路径（含查询参数）
  • Status：HTTP 状态码
  • Type：资源类型（json/xml/html/js/css/image/font/binary/text/other）
  • Length：响应内容大小
  • 请求时间：请求发起时间
  • 响应时间：响应结束时间
  • 耗时：请求总耗时
  • 备注：请求备注文本（点击可编辑）

点击列头可排序（三态：升序→降序→取消）。点击任意请求行，右侧即可展示该请求的原生报文。

报文详情区域

报文详情区域顶部有布局切换栏和全屏按钮。每个报文区域（请求/响应）有标签导航：

  • Raw：显示原生 HTTP 报文
  • Pretty：格式化后的报文（JSON/XML 自动缩进）
  • Hex：十六进制视图

报文区域下方有搜索高亮栏（Burp Suite 风格布局）：

  • 搜索图标 | 正则开关 | 大小写开关 | 上一个/下一个导航 | 搜索输入框 | 高亮计数

报文区域有操作按钮：

  • Copy：复制当前视图的报文内容
  • Download：下载当前视图的报文为 .txt 文件
  • 更多操作（菜单）：复制会话信息、复制请求头、复制请求体
  • 全屏：将报文区域全屏显示

基本使用

1. 捕获请求

打开 http helper 面板后，刷新当前网页或触发页面上的网络请求，左侧列表会自动捕获并显示请求。最多保留最近 500 条请求。

2. 查看报文

在左侧列表中点击任意请求，右侧显示请求报文和响应报文。

  • 默认显示 Raw 视图（原生报文）
  • 如果请求/响应是 JSON 或 XML，会自动切换到 Pretty 视图
  • 如果是二进制内容，会自动切换到 Hex 视图

报文左侧带有行号，方便阅读和定位。

3. 切换视图

点击报文区域顶部的 Raw / Pretty / Hex 标签，可手动切换视图：

  • Raw：原生 HTTP 报文，包含完整的请求行/状态行、头部和正文
  • Pretty：格式化后的报文，JSON 自动缩进，XML 自动排版
  • Hex：十六进制视图，显示每个字节的偏移量、十六进制值和 ASCII 字符

4. 切换布局

点击报文详情区域顶部的布局按钮切换布局：

  • 垂直布局：请求报文在上，响应报文在下（默认）
  • 水平布局：请求报文在左，响应报文在右
  • 标签页布局：请求和响应以标签页形式展示，只显示一个

5. 搜索报文

每个报文区域（请求/响应）下方都有独立的搜索栏：

  1. 在搜索输入框中输入关键词
  2. 当前视图中匹配的内容会被高亮显示
  3. 点击左右箭头（◀ / ▶）可在匹配项之间导航
  4. 点击 Re 按钮启用正则表达式模式
  5. 点击 Ca 按钮启用大小写敏感

搜索栏右侧显示匹配计数（如 2/5 个高亮 表示第 2 个匹配，共 5 个）。请求和响应面板的搜索互相独立。

6. 复制报文

点击 Raw Request 或 Raw Response 区域右上角的 Copy 按钮，即可将该区域当前视图的完整内容复制到剪贴板。

7. 下载报文

点击 Raw Request 或 Raw Response 区域右上角的 Download 按钮，即可将报文下载为 .txt 文件。

  • 请求文件命名格式：request_{METHOD}.txt，例如 request_GET.txt
  • 响应文件命名格式：response_{STATUS}.txt，例如 response_200.txt

8. 清空列表

点击顶部工具栏的 清空（垃圾桶图标）按钮，可清空所有已捕获的请求。

9. 录制控制

点击工具栏的红色圆形按钮可暂停/恢复录制。暂停后新请求不会被捕获，已有请求保留在列表中。录制中时按钮呈脉冲动画效果。

10. 颜色标记

点击请求列表中「标签」列的圆点，弹出颜色选择器，可选择 8 种颜色（红、橙、黄、绿、蓝、紫、粉、灰）或清除标记。标记后的请求可通过高级过滤按颜色筛选。

11. 备注编辑

点击请求列表中「备注」列的单元格，弹出备注编辑对话框。输入备注文本后保存，备注内容会显示在列表中并支持排序。

12. 高级过滤

点击请求列表区域顶部的过滤按钮，展开高级过滤面板：

  • Method：按 HTTP 方法过滤（GET/POST/PUT/DELETE 等）
  • Type：按资源类型过滤（json/xml/html/js/css/image 等）
  • XHR：快捷按钮，仅显示 Fetch/XHR 类型请求
  • Color：按颜色标记过滤（选择颜色或「无颜色」）
  • Keyword：关键词搜索（支持正则和大小写）
  • 反向过滤：勾选后返回不匹配的请求

13. 列配置

点击请求列表工具栏的列配置按钮，弹出列可见性勾选框，可自定义显示/隐藏的列。

14. 全屏模式

点击报文详情区域的全屏按钮，可将报文内容全屏显示。按 ESC 键退出全屏。支持全屏的区域：请求列表、报文详情、单个报文面板。

15. 行复制

每个报文视图区域左侧显示行号，可通过以下方式复制当前行：

  • 点击行号：鼠标悬停行号区域时显示复制图标，点击复制该行内容（去除行尾 ↵ 标记）
  • 快捷键：Ctrl+Shift+C（macOS: Cmd+Shift+C）复制光标所在行

16. 软换行与换行符可视化

报文区域工具栏提供两个辅助开关：

  • 软换行按钮（Wrap）：切换长行自动换行，避免水平滚动
  • NL 按钮（Newline）：切换行尾 ↵ 换行符标记显示/隐藏，帮助识别空白行

17. 二进制响应体下载

当响应内容被识别为二进制类型（如图片、音频、视频、字体等），系统会：

  • 自动切换到 Hex 视图
  • 禁用文本复制/下载按钮并显示原因提示
  • 提供独立的二进制下载功能，文件命名按以下优先级：
    1. Content-Disposition 中的文件名
    2. URL 路径中的文件名
    3. Content-Type 对应的扩展名
    4. 时间戳回退（如 download_20260702_120000.bin）

18. 面板拖拽调整

请求列表和报文详情之间的分隔条可拖拽调整宽度比例。请求/响应面板之间的分隔条也可拖拽调整高度/宽度比例（根据布局模式）。

功能详解

原生报文格式

请求报文示例

GET /api/user?id=123 HTTP/1.1\r\n
Host: example.com\r\n
User-Agent: Mozilla/5.0 ...\r\n
Accept: application/json\r\n
\r\n

响应报文示例

HTTP/1.1 200 OK\r\n
Content-Type: application/json\r\n
Content-Length: 256\r\n
\r\n
{"id":123,"name":"Alice"}

注意：报文中 \r\n 为换行符，是 HTTP 协议规定的行分隔符。

主题适配

插件界面会自动跟随操作系统的亮/暗主题设置：

  • 亮色主题：白色背景，深色文字
  • 暗色主题：深色背景，浅色文字

无需手动切换。

会话提取功能

会话提取功能允许你定义提取规则（Scheme），自动从 HTTP 请求和响应中提取关键信息（如 Token、Session ID、User ID 等）。

界面入口

点击顶部标签栏的 会话复制配置 标签页，进入会话管理界面。界面分为两个子标签：

  • 字段管理：管理所有提取字段（独立于方案存储）
  • 方案管理：管理方案，并通过双列表选择器关联字段

创建字段

  1. 切换到 字段管理 标签
  2. 点击 新建字段 按钮
  3. 填写字段信息：
    • Field Name：字段名称（如 token、userId）
    • Location：数据来源位置
      • 请求 Header：从请求头中提取（默认使用完整值模式，只需指定 Header 名称）
      • 请求 Body：从请求体中提取
      • 响应 Header：从响应头中提取（默认使用完整值模式）
      • 响应 Body：从响应体中提取
    • Location Name：当 Location 为 Header 类型时，填写 Header 名称（如 Authorization、Set-Cookie）；为 Body 类型时留空
    • Mode：提取模式
      • 完整值 (full)：直接返回源数据全部内容，无需匹配规则（Header 类型的默认模式）
      • 子串匹配 (substring)：子字符串匹配（支持起始/结束偏移量）
      • 正则匹配 (regex)：正则表达式匹配（支持捕获组和大小写）
      • 关键词 (keyword)：关键词匹配（提取上下文）
      • XPath：XPath 表达式（用于 XML/HTML）
      • JSONPath：JSONPath 表达式（用于 JSON）
    • Pattern / Expression：匹配模式或表达式（完整值模式无需填写）
  4. 点击保存

创建 Scheme

  1. 切换到 方案管理 标签
  2. 点击 新建方案 按钮
  3. 填写 Scheme 信息：
    • Name：方案名称（必填）
    • Target Domains：目标域名（逗号分隔，可选）
    • Domain Regex：域名正则匹配（可选）
    • Description：描述（可选）
  4. 在 字段选择 区域，使用双列表选择器（DualListSelector）从所有字段中选择该方案包含的字段
  5. 点击保存

激活 Scheme

在方案列表中，通过 ToggleSwitch 开关激活某个方案。同一时间只能有一个方案处于激活状态。

激活后，当捕获到匹配目标域名的请求时，会自动提取字段并显示 Toast 提示。

输出格式配置

方案支持三种输出格式（在编辑方案时设置）：

  • key=value（默认）：每行一个 key=value 对
  • JSON：格式化为 JSON 对象
  • 自定义模板：使用 {{fieldName}} 占位符自定义输出格式

复制会话信息

在 HTTP 历史标签页中，选中一个请求后，点击报文区域的 更多操作 菜单，选择 复制会话信息，可将当前请求按激活方案提取的结果复制到剪贴板，格式为：

token: abc123
userId: 456

提取模式示例

模式 用途 Pattern 示例 说明
完整值 (full) 直接获取源数据 无需填写 返回 Header 值或 Body 全文，Header 类型的默认模式
子串匹配 (substring) 提取固定位置内容 Bearer 从匹配位置提取到末尾，支持偏移量
正则匹配 (regex) 灵活提取 Bearer ([^\s]+) 提取第一个捕获组，支持大小写开关
关键词 (keyword) 提取上下文 session_id 提取关键词前后 50 字符
XPath XML 提取 //user/id 从 XML 中提取节点值
JSONPath JSON 提取 $.data.token 从 JSON 中提取字段值，支持通配符和递归

编辑和删除

  • 编辑字段：在字段管理列表中点击编辑按钮
  • 删除字段：点击删除按钮，字段会从所有引用该字段的方案中移除
  • 编辑方案：在方案管理列表中点击编辑按钮
  • 删除方案：点击删除按钮删除方案

常见问题

Q1：面板中没有显示任何请求？

请确保：

  1. 已打开 http helper 面板
  2. 页面已刷新或已触发网络请求
  3. 当前页面确实有网络活动（可在 Network 面板中确认）

Q2：响应报文显示 "Loading response body..."？

响应体需要异步加载，通常在选中请求后 1~2 秒内会显示完整内容。如果长时间未加载，可能是该请求没有响应体（如 204 No Content）。

Q3：下载的文件名可以自定义吗？

当前版本文件名自动生成（包含方法或状态码）。如需自定义文件名，可下载后手动重命名，或通过复制后粘贴到自定义文件中。

Q4：为什么有些请求没有捕获到？

本插件通过 Chrome DevTools Network API 捕获请求，以下情况可能无法捕获：

  • 页面加载完成前已发出的请求（需在页面加载前打开面板）
  • 某些内部 Chrome 请求（如扩展自身的请求）
  • Service Worker 拦截的请求（取决于 Chrome 版本行为）

Q5：如何更新扩展？

  1. 修改源码后执行 pnpm build 重新构建
  2. 进入 chrome://extensions/
  3. 找到 http helper，点击 刷新 按钮（圆形箭头图标）

Q6：搜索功能如何使用正则表达式？

  1. 在报文区域下方的搜索栏中输入正则表达式（如 \d{3} 匹配三位数字）
  2. 点击 Re 按钮启用正则模式
  3. 匹配结果会自动高亮显示

注意：正则表达式使用 JavaScript 正则语法，不需要包裹在 / 中。

Q7：会话提取的 Scheme 数据存储在哪里？

Scheme 和字段数据通过 chrome.storage.local 持久化存储在浏览器本地，卸载扩展后数据会丢失。如需备份，可导出相关数据。

Q8：Hex 视图有什么用途？

Hex 视图用于查看请求/响应体的原始字节内容，特别适用于：

  • 分析二进制数据（图片、音频、视频等）
  • 检查不可见字符或编码问题
  • 调试数据传输中的字节级问题

技术信息

  • Manifest Version：3
  • 权限：storage
  • 最大保留请求数：500 条
  • 支持浏览器：Chrome 88+（支持 Manifest V3 的版本）
  • 前端框架：Vue 3.5 + TypeScript
  • 状态管理：Pinia
  • UI 组件库：PrimeVue 4.5 + PrimeIcons 7.0
  • 构建工具：Vite 6 + @crxjs/vite-plugin
  • 代码高亮：highlight.js 11.x