Auth0 Angular 10
Apex Designer Documentation
What's New
Getting Started
Business Objects
User Interfaces
App Behaviors
Project Settings
Patterns and Best Practices
App Showcase
Angular 10 Base Library
Frequently Asked Questions

Testing And Debugging For Mobile Devices

How to test and debug your app for mobile devices

Blank Profile Image
Written by David Knapp
Updated 2 years ago
Less than a minute read

Layout Testing with Chrome Development Tools

The majority of testing for mobile is testing responsive layouts. This can be easily done using Chrome Developer Tools. Right click on the app's page and select inspect:

Page with the developer tools being turned on

The Developer Tools will be shown at the bottom of the screen:

Page with the developer tools console turned on

Click on the "Toggle device toolbar" icon button:

Console toolbar with screen size simulator highlighted

The app will be displayed as it will appear on devices of various sizes:

Page showing different options for screen size emulation

Testing on Real Devices

You should also do testing on real devices. You can test with your own phone by opening the app url in the phone's browser:

Application being tested on a phone

The main shortcoming is that it is difficult or impossible to get to the developer tools to inspect elements and view debug.

Testing on Real Devices with Browser Stack

BrowserStack lets you pick a device and browser:

BrowserStack configuration page

And it runs the app on a real phone with access to developer tools:

App running on simulated phone with full browser developer tools




Powered by Apex Designer
Terms of ServicePrivacy Policy
© 2017-2024 Apex Process Consultants