added eruda

docs/develop/dapps/telegram-apps/testing-apps.mdx

@@ -1,3 +1,5 @@
+import ConceptImage from '@site/src/components/conceptImage'
+
 # Testing Web Apps
 
 ## Using bots in the test environment
@@ -38,4 +40,53 @@ Use these tools to find app-specific issues in your Web App:
 - Download and launch the [Beta Version](https://telegram.org/dl/macos/beta) of Telegram macOS.
 - Quickly click 5 times on the Settings icon to open the debug menu and enable “Debug Web Apps”.
 
-Right click in the web app and choose *Inspect Element*.
+Right click in the web app and choose *Inspect Element*.
+
+## Testing with Eruda
+
+[Eruda](https://github.com/liriliri/eruda) is a tool that provides a web-based console for debugging and inspecting web pages on mobile devices and desktop browsers. Here's a step-by-step guide on how to use Eruda in a Telegram Web Apps project.
+
+![1](/img/docs/telegram-apps/eruda-1.png)
+
+### Step 1: Include Eruda Library
+
+First, you need to include the Eruda library in your HTML file. You can include it from a CDN:
+
+```html
+<!-- Include Eruda from CDN (Recommended) -->
+<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
+```
+
+Or you can get it on npm.
+
+```bash npm2yarn
+npm install eruda --save
+```
+
+### Step 2: Initialise Eruda
+
+Next, you need to initialize Eruda. You typically do this when the web page loads. In case you run Eruda from CDN.
+
+```html
+<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:
+
+```jsx
+import eruda from 'eruda'
+
+eruda.init()
+```
+
+### Step 3: Launch Eruda
+
+Deploy your Web App, launch it and just press Eruda icon to start debugging!
+
+<ConceptImage style={{maxWidth:'200pt', margin: '10pt 20pt 0 0', display: 'flex-box'}} src="/img/docs/telegram-apps/eruda-2.png" />
+<ConceptImage style={{maxWidth:'200pt', margin: '10pt 20pt', display: 'flex-box'}}  src="/img/docs/telegram-apps/eruda-3.png" />

src/components/conceptImage.tsx

@@ -2,15 +2,20 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import ThemedImage from "@theme/ThemedImage";
 import React from "react";
 
-function ConceptImage({src}) {
+function ConceptImage({src, style}) {
 
   let imgUrl = src;
+  let imgStyle = style;
+
+  if (imgStyle === undefined) {
+    imgStyle = {maxWidth: '80%',textAlign: 'center', margin: '10pt auto', display: 'block'}
+  }
 
   if (src.indexOf('http') === -1)
     imgUrl = useBaseUrl(src);
 
   return (
-    <img style={{maxWidth: '80%',textAlign: 'center', margin: '10pt auto', display: 'block'}} src={imgUrl}  alt={'concept image'}/>
+    <img style={imgStyle} src={imgUrl}  alt={'concept image'}/>
   );
 }