Debugging

Debugging With eruda.js

When you can not use debugging inside Delta Chat, either because you have no computer to connect to or if you are on iOS, you may try eruda.js as an alternative to browser-native debugging tools.

  1. Download a standalone eruda.js

  2. Copy eruda.js next to your index.html

  3. Prepend the following snippet to the head section of your index.html: 

    <script src="eruda.js"></script>
<script>
  eruda.init();
</script>

When your webxdc app is started, a floating button will appear in a corner. Tap it to see the developer tools.

Debugging Inside Delta Chat

Debug a webxdc app in Android via Chrome DevTools

  1. enable webView debugging in Delta Chat settings Settings > Advanced > Developer Mode: image of andvanced screen

  2. enable developer mode and ADB debugging on your device (go to system settings, device info, click 7+ times on build number until there is a toast telling you that you are now a "Developer", then go into the new developer menu and enable "ADB debugging", see also android docs: Enable ADB debugging on your device).

  3. connect your device via USB to your computer

  4. open chromium (or google chrome) and go to chrome://inspect/#devices

  5. start your webxdc that you want to debug

  6. click on inspect:

screenshot of chrome dev tools device list

Inpect HTMLJavaScript Console
dev tools inpectordev tools js console

Make sure to disable adb debugging again after you are done with debugging!

Debug a webxdc app in Delta Chat Desktop

First enable the devTools for webxdc in the Settings:

Settings > Advanced > Experimental Features > Enable Webxdc Devtools

Note that you need to close and open any active webxdcs again for changes to take effect

Start the webxdc you want to debug and press F12 to open the developer tools:

screenshot of desktop webxdc window with devtool

A bit small isn't it? fix it either by resizing the window's width or undock the developer tools:

undock devtools

undock devtools

I Cannot Share Variables on iOS Between Scripts!

Your code:

a.js

const CONFIG = { difficulty: "hard", hasCoins: true };

b.js

if (CONFIG.difficulty == "hard") {
  /** make the game harder **/
}

index.html

<html>
  <head>
    <!-- ... -->
  </head>
  <body>
    <!-- ... -->
    <script src="a.js"></script>
    <script src="b.js"></script>
  </body>
</html>

Basically you get many errors in your JS console like this:

Can't find variable: CONFIG

There are a few ways to solve this:

  • use a bundle to bundle all your JS to one file (some bundlers: parcel, webpack, esbuild)
  • use esm modules (see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
  • define your variables as inline script in your HTML file. (inline script means that the script is in the HTML file between the <script> tags: <script>my code</script>)
  • append your global variables to the window object: window.myVar = 1; and use them like console.log(window.myVar)