Development Tools

Debug WebView logs easily with Appetize.io simulators

Overview

Accessing weblogs in a WebView-based mobile app presents unique challenges. Since WebViews function as embedded browsers within an app, they lack built-in developer tools, making it difficult to inspect network activity. Additionally, mobile environments impose restrictions on logging and debugging, further complicating the process.

To overcome these limitations, developers can inspect network logs using Appetize.io simulators by enabling debug logs and accessing the console output in the Appetize environment.

👍

Developer Demo

Display our demo page in your app to test during development https://median.dev/web-console-logs/

Enable Debug Logs

To debug JavaScript in WebView content using our browser-based simulators, follow these steps:

  1. Rebuild your app with Web Console Logs enabled.
  2. Open the simulator panel.
  3. Toggle Debug Mode and click Appetize to enable logging.
App Studio - Development Tools

App Studio - Development Tools

Appetize

The Debug Logs tab in Appetize displays both native app logs and web console logs. This tool provides insights into network requests, JavaScript errors, and other debugging information. However, note the following:

  • This feature requires an unsigned debug build and must be disabled before generating a signed APK/AAB for the Google Play Store.
  • Console output includes console.log(), console.warn(), console.error(), and console.debug(), each prefixed accordingly (e.g., [console.log] or [console.debug]).
  • Native app logs will also be displayed, so filtering by prefix is recommended.
Viewing JavaScript console via Appetize

Viewing JavaScript console via Appetize

Frequently Asked Questions

Why am I receiving the 'Android App Bundle' error?

When Development Tools/Web Console Logs are enabled, the Median build platform generates an unsigned Android debug build (AAB). If you attempt to publish this AAB to Google Play, you will receive the error:The Android App Bundle was not signed. To resolve this, disable web console logs before generating a signed Android app.

To debug JavaScript in your web content from our browser-based simulators first rebuild your app with Web Console Logs enabled. Then, on the simulator panel toggle toggle "Debug Mode" and click "Appetize". The JavaScript console for the app will be shown at the bottom of the window that opens. The "Debug Logs" tab will show the native app log output as well as the web console logs. Note: This option builds an unsigned debug build and must be disabled to build a signed APK/AAB for the Google Play Store.