Webhook 调试器：让第三方回调“原形毕露”
集成支付宝支付回调时，本地怎么也收不到异步通知。打印了所有日志，看了 Nginx 访问记录，始终没找到原因。后来写了一个 Webhook 调试器——生成一个临时 URL，配置到第三方服务，所有请求都会被捕获并实时显示，包括 Headers、Body、请求方法。原本隐身于黑暗的回调请求，一下子“原形毕露”。本文分享 Webhook 调试器的使用场景和实现原理。
🔗 在线工具：https://www.viddown.cn/tools/webhook/
一、Webhook 调试器是什么？
Webhook 调试器为每个用户生成一个唯一的公网 URL。当你把这个 URL 配置到第三方服务（如 GitHub Webhook、支付宝异步通知）的回调地址后，服务发出的任何 HTTP 请求都会被捕获并在网页上实时显示。
你可以看到：
- 请求方法（GET、POST、PUT、DELETE 等）
- 请求头（Headers）
- 请求体（Body，支持 JSON、表单、纯文本等）
- 请求来源 IP 和时间戳
二、为什么需要 Webhook 调试器？
开发中频繁对接第三方回调，常见痛点：
- 本地无法接收回调：支付回调要求公网地址，localhost 收不到。
- 日志不够详细：生产环境没有详细请求日志，难以排查。
- 无法直观看到原始数据：回调可能是 JSON、表单或 XML，肉眼难以解析。
Webhook 调试器提供一个公网 URL，捕获所有请求详情并实时展示。
三、如何使用？
3.1 获取唯一 URL
打开工具页面，自动生成唯一 URL，例如：
https://www.viddown.cn/tools/webhook/tools/webhook/0d57eb573d954c89/
点击「复制」保存。
3.2 配置到第三方服务
- GitHub Webhook：仓库 Settings → Webhooks → 添加，Payload URL 填上述地址。
- 支付宝/微信支付：在支付接口配置中填写异步通知地址。
- 其他服务：将回调地址设为该 URL。
3.3 触发并查看请求
当第三方服务向该 URL 发送请求时，页面实时显示：
[2025-06-03 10:30:45] POST /tools/webhook/0d57eb573d954c89/
Headers:
user-agent: GitHub-Hookshot/...
x-github-event: push
content-type: application/json
Body:
{"ref":"refs/heads/main", "repository":{...}}
每个 Webhook 地址仅记录最近 20 条请求，刷新页面地址不变，历史记录保留。
3.4 安全提示
- URL 随机生成，仅知道该地址的人可查看请求记录。请勿泄露。
- 仅用于调试，不适合生产环境。
四、技术实现（Node.js 示例）
核心思路：接收所有 HTTP 请求，存入内存，并通过 SSE 推送到前端。
const express = require('express');
const app = express();
const storage = new Map(); // key: webhookId, value: 请求数组
app.all('/webhook/:id', express.json(), express.text(), (req, res) => {
const id = req.params.id;
const records = storage.get(id) || [];
records.unshift({
time: new Date().toISOString(),
method: req.method,
headers: req.headers,
body: req.body
});
if (records.length > 20) records.pop();
storage.set(id, records);
// 通知前端（SSE）
// ... 推送逻辑
res.status(200).send('OK');
});
app.get('/webhook/:id/records', (req, res) => {
const id = req.params.id;
res.json(storage.get(id) || []);
});
前端使用 EventSource 或轮询获取更新。
五、手写简易版（本地运行）
如果不依赖在线服务，可自建：
- 创建 webhook.js（内容如上）
- 用 ngrok 暴露本地服务
ngrok http 3000
获得公网 URL（如 https://abc123.ngrok.io），配置到第三方回调。
- 查看记录：访问 http://localhost:3000/webhook/你的id/records 获取 JSON。
六、常见问题
收不到请求？
- 确认第三方配置的 URL 正确（注意尾部斜杠）。
- 检查网络连通性：curl -X POST 你的URL 测试。
请求体显示乱码？
- 工具同时支持 JSON、表单、文本，但特殊编码可能需要手动查看原始 Headers。
URL 泄露？
- 随机 ID 可防止暴力猜测，但不要公开分享。
七、总结
Webhook 调试器把隐藏在网络中的回调请求“抓”到眼前，让调试第三方集成变得简单直观。无论是 GitHub 推送、支付通知，还是企业内部系统回调，都能快速定位问题。
在线体验：https://www.viddown.cn/tools/webhook/
本文仅作技术分享，工具仅供调试使用。