Telegram小程序 开发 | 调试

riyad

3 h& P+ S2 p3 x! e应用程序开发是一个非常繁琐且持续的过程，需要投入大量的时间和耐心。为了简化操作，Telegram Mini Apps 平台提供了调试已开发应用程序的功能。
, e6 G' X7 g2 d
启用调试模式

Telegram Desktop​

• 下载并启动 Telegram DesktopBeta 版。
• 打开侧边菜单，导航至 Settings > Advanced。
• 向下滚动打开的菜单，点击 Experimental settings 按钮。
• 选中 Enable webview inspecting 选项。
  : h; q+ D3 K) V) R) L

启用调试模式后，右键单击 Mini App 将显示一个上下文菜单，其中包含 Inspect 选项，允许您打开开发工具。

macOS 版 Telegram​

• 下载并启动 Telegram macOSBeta 版。
• 快速点击 5 次 "设置 "图标，打开调试菜单，启用 Debug Mini Apps 选项。
  7 \/ U6 G7 @4 I! q, B, E& t

和 Telegram Desktop 中一样，Inspect Element 选项也会出现在右键菜单中。

" D2 w" }' p  u安卓版 Telegram​

• 在 设备上启用 USB 调试。
• 在 Telegram 设置中，一路向下滚动，按住 版本号 两次。
• 在调试设置中选择 Enable WebView Debug。
• 将手机连接到电脑，然后在 Chrome 浏览器中打开 chrome://inspect/#devices--在手机上启动 你的迷你应用程序时，就会看到它。
  

OS 版 Telegram​

iOS 网络视图调试需要 Safari 桌面浏览器，因此需要 macOS。

要在没有 macOS 的情况下访问 iOS 调试功能，请参阅Eruda 部分。

在 iOS 设备上：

• 转到 Settings。
• 找到 Safari 图标并按下。
• 向下滚动并按下 Advanced。
• 启用 Web Inspector 选项。
  

- b! h, N' L& a2 h4 M0 M9 x/ {% C

在 macOS 上：

• 打开 Safari 浏览器。
• 打开 Settings (⌘ + ,).
• 选择 Advanced 选项卡。
• 选中底部的 Show features for web developers 选项。
  7 b" d1 M+ l7 `2 b- S

下一步：

• 通过数据线将 iOS 设备连接到 Mac。
• 在 iOS Telegram 客户端中打开 Mini App。
• 在 macOS 的 Safari 菜单栏中打开 Develop 选项卡。
• 选择已连接的 iPhone。
• 可选项：选择 Connect via network 并断开电缆。
• 在 Telegram 区块下选择已打开的网络视图 URL。
  

& t: {7 G% O" P% X- ZEruda​

Eruda是一种在 网络中提供轻量级控制台的技术。 我们通常在不提供自己控制台的环境中使用此类软件包。

首先，需要安装软件包并将其初始化。

script tag :

1. 
   
2. <script src="//cdn.jsdelivr.net/npm/eruda"></script>
   % B. V# {3 t# K- T
3. <script>eruda.init()</script>

复制代码

npm package

1. import eruda from 'eruda';
   * D- ?- b. W1 _# O5 X
2. 
   2 r& ?2 E; H/ j6 G( ~9 _: [  j3 h
3. eruda.init();

复制代码

初始化 eruda 后，您将在用户界面中看到其元素。 点击它将显示 控制台。

2 R3 D# @! a# ?( V7 T5 p7 G7 o
, j) c8 w9 J. m: O" @
) ^8 B0 X) u8 p0 Q8 ~
% n9 w* T5 p/ O9 m