Telegram Mini App 本地开发工具上线

😤 让所有人抓狂的问题

你试过开发 Telegram Mini App 吗？

    Write your code.

    Spin up ngrok (and pray it doesn't crash).

    Go to @BotFather, paste the tunnel URL.

    Grab your phone, open the bot, type console.log() — and pray again.

    Repeat for every theme, platform, and user type you need to test.

各位，都 2015 年了，居然还是没有官方模拟器。

"The main difficulty is the inability to run a project as easily as in a browser via localhost — and the absence of a developer console."
— Habr, March 2025

💡 隆重介绍：TMA DevKit

一款面向 Telegram Mini Apps 的本地模拟器和 Bridge 检查工具。你可以把它理解为 window.Telegram.WebApp 的 Redux DevTools。

一句话概括：把 Mini App URL 粘贴到面板中，它就会在 iframe 内运行，并完整模拟 Telegram 客户端——不需要手机，不需要 ngrok，也不需要 BotFather。

✨ DevKit v2 能做什么（以及它为什么这么好用）

🧠 用于 AI 驱动调试的 MCP Server——全新功能！

通过 Model Context Protocol 连接任意 AI 助手（Claude、GPT、本地模型）。你可以询问与应用状态、事件流或 initData 验证有关的问题，并立即获得调试建议。

🔧 真正的 Mock，而不是 Stub

Full window.Telegram.WebApp API surface (all methods, properties, events).

Cryptographically valid initData generation with HMAC-SHA-256 signature using your bot token.

Backend validation passes as in production.

Compatible with @telegram-apps/sdk v3 out of the box.

⚡ 5 个一键快速场景

场景	说明
iOS Premium	拥有 Premium 订阅的 iPhone 用户
Android Free	普通 Android 用户
New User	带有 referral 参数的新用户
Group Launch	模拟从群聊中打开
Desktop	电脑端宽视口

几秒钟即可切换上下文，无需手动输入。

📊 Bridge 事件检查器

All web_app_* calls displayed in real time.

Group by type, filter, pause, export logs as .txt.

emit console to fire client → app events (theme_changed, main_button_pressed, etc.).

☁️ CloudStorage 编辑器

可视化键值编辑器。你不必再猜测其中存储了什么，也不用手动折腾 localStorage。

💾 保存预设

将当前配置（platform、user、theme、viewport、bot token）保存为带名称的预设。一键即可切换，并且能够跨会话持久保存。

🖥️ 精心打磨的面板体验

Resizable panels (like VS Code).

Zoomable device stage (25%–200%).

Mobile notch and desktop traffic lights react to platform selection.

Import/export config as JSON.

🧰 技术栈

组件	技术
Frontend	React 19、TypeScript、Vite
Styling	Tailwind CSS、shadcn/ui
Mock Script	约 90 KB 的原生 JS，零依赖
Testing	22+ 个 Vitest 测试（base64url、config、protocol、events）
License	MIT

🎯 接下来有什么计划？

该项目正在积极开发中，计划包括：

More scenario presets.

Enhanced MCP integration with pre‑built prompts.

VS Code plugin.

GitHub: github.com/Deus-org/tma-devkit

Live Demo (if available) — add your link or a screenshot.

如果你曾经开发过 TMA，我非常希望得到以下反馈：

Feedback on the README (is it clear?).

Feature suggestions.

Bug reports (open an issue on GitHub).

⭐️ 如果你觉得这个项目有用，请为仓库点个 Star——这会带来非常大的帮助！

出自一位受够了在手机上调试的开发者之手。让我们一起改善 TMA 开发体验！🚀

如需采取进一步措施，你可以考虑屏蔽此人和／或举报滥用行为。