Webhook 调试器：让第三方回调“原形毕露”

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 发送请求时，页面实时显示：

text 复制代码

[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 推送到前端。

avascript 复制代码

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 暴露本地服务

bash 复制代码

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/

本文仅作技术分享，工具仅供调试使用。