Development & Test Deep Dive
Overview
Mobile apps built with the Median App Studio are composed of various components as they combine web content, including web SDKs, native app UI elements and native functionality (such as haptics or biometrics) or even native development SDK integrations offered through our plugins.
In this article we provide an overview of the most commonly used test cases and development tools.
Test Cases
UI & UX
UI & UX typically validates the app user interface and user experience across applicable devices types, orientations and operating software versions. Typical test cases include the validation of user navigation, link handling, deep linking, accessibility and offline behavior.
App Performance
Performance of mobile apps built with our platform is strongly correlated to the performance of your web experience. It is imperative that you optimize the site speed in order to deliver a performant user experience. This means you will have to find and remediate performance bottlenecks caused by website assets and resources such as javascript, images, embedded functionality.
In some cases, you can also achieve performance gains by leveraging native device SDKs of your third-party vendors and using Native Navigation rather than delivering menus through your web experience.
You can analyze your page speed with tools such as:
If you need a head start on the most impactful strategies, you can reference our blog post on enhancing speed and performance for webview applications.
Native Device Features
Features like Haptics, Biometrics or In-App purchases are standout native device features that elevate your app experience and make it stand out over displaying your website in a mobile or desktop browser. Those features sometimes require testing with physical devices and can not be simulated using your browser or virtual devices.
Plugin Configuration
Depending of the complexity of your plugins, you may require assistance validating the plugin configuration. Median offers purpose-built development demos as shown in our Median.co Developer Portal that can be used as the Website URL for your app. Additionally, Median offers Solution Architecture and Engineering services to advise on plugin implementation.
Additionally, diagnostic tools for mobile devices can help access log files to gather information about plugin behavior, configuration, and crashes, aiding in the troubleshooting process with our team or third-party vendors.
Test and Troubleshooting Tools
App Studio Simulators
Cloud-based virtual device simulators are readily available in the App Studio. They offer a quick way to compile and deploy your mobile app to test configuration changes directly in your browser. While this offers a quick way to test your user interface and experience, you won't be able to perform thorough debugging of the website shown in the webview.
Some native device functionality or third party SDKs integrated through one of our plugins can not be tested using device simulators. We highlight those cases in the documentation with a warning label similar to the example below:
Integration Tests
This SDK integration can not be tested in the simulator.
Browser Development Tools
Browser development tools are the key debugging tool for web developers at all levels. Accessible directly from your browser, these tools allow you to inspect, debug, and optimize your web applications in real-time. In addition to troubleshooting your web experience (HTML, CSS, JS), they typically allow you to display websites with a specific viewport, user agent and read the web console or analyze the network requests for you page.
Browser development tools offer in terms of functionality and usage from browser to browser. We recommend following the official documentation for the development tools of your browser in order to learn more about the offered functionality and usage.
Appetize Debug Mode
The Appetize Debug mode enriches the simulator experience of the App Studio by offering device debug logs and a network traffic monitor. You can launch the Appetize Debug mode using the Debug Mode toggle in the Median App Studio and following the link as shown below
Launch Appetize Debug Mode
Some native device functionality or third party SDKs integrated through one of our plugins can not be tested using any device simulators. We highlight those cases in the documentation with a warning label similar to the example below:
Integration Tests
This SDK integration can not be tested in the simulator.
To learn more about the Appetize Debug mode you can follow the documentation below.
Physical Devices
Physical mobile devices are the gold standard to test your mobile applications, allowing you to experience all native functionalities and perform comprehensive end-to-end testing especially for native device functionality that can not be experienced through simulators (eg Haptics, In-App Purchases, Biometrics).
In order to distribute your app to physical devices you can follow our documentation on distributing APKs (Android) and using Testflight (iOS)
adb and sysdiagnose
adb (Android Debug Bridge) and sysdiagnose are dedicated mobile app diagnostic tools offered and maintained by Apple and Google. They typically offer the most in-depth access to logs, system information and application metrics. If you want to learn more about adb and sysdiagnose we recommend following the official documentation available below:
Mapping Test Cases and Tools
The following table maps the previously introduced development tools and test cases to help you choose the best tools to accelerate your development and QA processes. We categorized the tools in the following categories:
š - Recommended for this test case
š§ - Limited testing available
āļø - Not recommend for this test case
| UI / UX | App Performance | Native Device Features | Plugin Configuration | |
|---|---|---|---|---|
| App Studio Simulators | š Simulators allow you to easily switch between devices and operating systems and orientations | āļø Performance tests may be conducted but the simulators offer no detailed logs | āļø App simulators only offer a limited set of native functionality | āļø Simulators may surface high-level information on plugin configuration and app crashes but do not provide detailed logs |
| Browser Development Tools | š§ Browser tools may be limited to setting a distinct user agent and viewport | š Browser development tools are purpose built to offer you a great toolset to analyze the performance of your web assets | āļø Native device features can not be tested and debugged using your desktop browser | āļø Console logs will be accessible, but native SDKs can not be tested |
| Appetize Debug mode | š Simulators allow you to easily switch between devices and operating systems and orientations | š§ Network logs can offer some valuable insights but the Browser Development tools offer more details | āļø App simulators only offer a limited set of native functionality | š With access to device logs, the Appetize Debug mode offers a great way to access mobile device logs when validating the configuration of plugins and third party SDKs. |
| Physical Device | š§ Limitations due to the necessity of maintaining a big suite of test devices | š§ Limitations due to the necessity of maintaining a big suite of test devices | š Physical devices are often required to test and debug native device functionality | š Physical devices in combination with our development demo pages are the fastest way to validate your plugin configurations |
| adb and sysdiagnose | āļø adb and Sysdiagnose are not ideal when validating UI/UX | š adb and Sysdiagnose both offer metrics and tools to analyze performance bottlenecks | š adb and Sysdiagnose may offer additional logs and error codes that can pinpoint gaps or issues caused by native device functionality | š adb and Sysdiagnose are the best tools to diagnose SDK behavior and provide logs to engage third party vendors in a meaningful way |
FAQ
How can I debug my website running inside my Android and iOS apps?
You can perform limited debugging of your website when it is displayed in the webview within your app using our browser based simulators. Create a build of your app with Web Console Logs enabled on the Build & Download tab under Development Tools. The JavaScript Console for the webview within your app will then be streamed to the app log where error messages as well as console output can be viewed. For complete instructions see Development Tools.
For more advanced debugging including inspection of HTML/CSS and live access to the JavaScript console for code execution you may use Safari and Chrome remote debugging. This provides comparable functionality to a regular desktop browser. You may inspect HTML and CSS and make live changes to test differences in display behavior between iOS WKWebView and Android WebView, and you can view JavaScript variables and execute code in realtime.
For iOS please review https://appletoolbox.com/use-web-inspector-debug-mobile-safari/ - it is the same process for Webviews running within your app. Your app must be running on iOS Simulator locally, or on a device plugged into your computer.
For Android please review https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews
To remotely debug on Android, you will need a "debug" build of your app. By default, Median generates a "release" build so that you can publish directly to Google Play with no changes required. To build a "debug" version you will need to build locally referring to Build Android from source. When using push notifications and other integrations that depend on the Android Package Name you must ensure that you build locally using the proper package name that is registered e.g. com.domain.app and not com.domain.app.debug.
Updated 15 days ago