Skip to main content

Testing Mini Apps

Using bots in the test environment​

To log in to the test environment, use one of the following methods:

  • iOS: Tap 10 times on the Settings icon. Navigate to > Accounts > Login to another account > Test.
  • Telegram Desktop: Open ☰ Settings > Shift + Alt + Right click Add Account and select Test Server.
  • macOS: Click the Settings icon 10 times to open the Debug Menu. ⌘ + Click Add Account and log in using your phone number.

The test environment is completely separate from the main environment. You must create a new user account and a new bot using @BotFather.

Once you have received your bot token, send requests to the Bot API using this format:

https://api.telegram.org/bot<token>/test/METHOD_NAME

Note: When using the test environment, you may use HTTP links without TLS to test your Mini App.

Debug mode for Mini Apps​

Use the following tools to identify app-specific issues in your Mini App.

Android​

  • Enable USB-Debugging on your device.
  • In Telegram Settings, scroll to the bottom, press and hold the version number two times.
  • Choose Enable WebView Debug in Debug Settings.
  • Connect your phone to your computer and open chrome://inspect/#devices in Chrome.
  • Launch your Mini App on your phone, and it will appear in Chrome’s Inspect Devices tab.

iOS​

iOS WebView debugging requires the Safari desktop browser on macOS.

On iOS device:

  • Go to Settings.
  • Scroll down and tap Safari.
  • Scroll to the bottom and press Advanced.
  • Enable Web Inspector.

On macOS:

  • Open Safari.
  • Open Settings (⌘ + ,).
  • Select the Advanced tab.
  • Check Show features for web developers.

Next steps:

  • Connect your iOS device to the Mac via USB cable.
  • Open Mini App inside iOS Telegram client.
  • In Safari on macOS, go to Develop in the menu bar.
  • Select the connected iPhone.
  • (Optional) select Connect via network and disconnect the cable.
  • Under the Telegram block, select the opened WebView URL.

Telegram Desktop on Windows, Linux, and macOS​

  • Download and launch the latest version of Telegram Desktop on Windows, Linux or macOS (5.0.1 at the time of writing)
  • Go to Settings > Advanced > Experimental settings > Enable webview inspection.
  • on Windows and Linux, right-click in the WebView and choose Inspect.
  • On macOS, you need to access the Inspect through Safari Developer menu as Inspect is not available via right-click.

Telegram macOS​

  • Download and launch the beta version of Telegram macOS.
  • Quickly click the Settings icon five times to open the debug menu and enable Debug Mini Apps.

Right-click inside the Mini App and choose Inspect Element.

Testing with Eruda​

Eruda is a tool that provides a web-based console for debugging and inspecting web pages on mobile devices and desktop browsers.

1

Step 1: include Eruda library​

To begin, add the Eruda library to your HTML file:

Option 1: use a CDN (recommended).

<!-- Include Eruda from CDN (Recommended) -->
<script src="https://cdn.jsdelivr.net/npm/eruda"></script>

Option 2: install via npm.

npm install eruda --save

Step 2: initialise Eruda​

If using the CDN, initialize Eruda when the page loads:

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>
  // Initialize Eruda
  eruda.init();
</script>

If you prefer modern tooling and packages, add this script to your project:

import eruda from 'eruda'

eruda.init()

Step 3: launch Eruda​

After deploying your Mini App:

  • Open it in Telegram.
  • Press the Eruda icon to start debugging.
concept image concept image
Was this article useful?