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 http3000获得公网 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/本文仅作技术分享工具仅供调试使用。
Webhook 调试器：让第三方回调“原形毕露”
发布时间：2026/6/3 16:24:08
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 http3000获得公网 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/本文仅作技术分享工具仅供调试使用。
